deploy: ce145c8

captainbrosset · Jun 2, 2023 · 277b33a · 277b33a
1 parent dbf2a9c
commit 277b33a
Show file tree

Hide file tree

Showing 20 changed files with 338 additions and 88 deletions.
diff --git a/1/index.html b/1/index.html
@@ -41,12 +41,27 @@ <h1><a href="/">DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>144 DevTools Tips</h2>
+ <h2>145 DevTools Tips</h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
 </div>
 <ul class="tips">
+<li class="hover-box tip ">
+ <a href="/tips/en/see-json-responses/" class="tip-title">See formatted JSON responses</a>
+ <a href="/tips/en/see-json-responses/" class="tip-image"><img src="../../assets/img/see-json-responses.png" alt="The JSON viewer in Microsoft Edge." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it e...
+ <a href="/tips/en/see-json-responses/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/network/" title="See all tips about network">network</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/polypane/" title="See all tips supported on polypane">polypane</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip unique-browser-feature">
  <a href="/tips/en/emulate-idle-detection-states/" class="tip-title">Emulate idle detection states</a>
  <a href="/tips/en/emulate-idle-detection-states/" class="tip-image"><img src="../../assets/img/emulate-idle-detection-states.png" alt="Chrome DevTools' Sensors panel, showing a drop-down list with the different states that can be emulated." loading="lazy"></img></a>
@@ -406,21 +421,6 @@ <h2>144 DevTools Tips</h2>
  <ul class="browsers"><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/polypane/" title="See all tips supported on polypane">polypane</a></li></ul>
  </div>
 </li>
-
-<li class="hover-box tip unique-browser-feature">
- <a href="/tips/en/spot-out-of-viewport-elements/" class="tip-title">Quickly spot out-of-viewport elements</a>
- <a href="/tips/en/spot-out-of-viewport-elements/" class="tip-image"><img src="../../assets/img/spot-out-of-viewport-elements.png" alt="Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle." loading="lazy"></img></a>
- <div class="tip-excerpt">
- Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser vie...
- <a href="/tips/en/spot-out-of-viewport-elements/">Read more</a>
- </div>
- <div class="tip-info">
- Categories:
- <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li><li class="tag"><a href="/tag/css/" title="See all tips about css">css</a></li></ul>
- Supported by:
- <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li></ul>
- </div>
-</li>
 </ul>
 <nav class="pagination" aria-label="Pagination navigation">
  <ul>

diff --git a/2/index.html b/2/index.html
@@ -41,12 +41,27 @@ <h1><a href="/">DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>144 DevTools Tips</h2>
+ <h2>145 DevTools Tips</h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
 </div>
 <ul class="tips">
+<li class="hover-box tip unique-browser-feature">
+ <a href="/tips/en/spot-out-of-viewport-elements/" class="tip-title">Quickly spot out-of-viewport elements</a>
+ <a href="/tips/en/spot-out-of-viewport-elements/" class="tip-image"><img src="../../assets/img/spot-out-of-viewport-elements.png" alt="Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser vie...
+ <a href="/tips/en/spot-out-of-viewport-elements/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li><li class="tag"><a href="/tag/css/" title="See all tips about css">css</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip ">
  <a href="/tips/en/edit-elements-with-the-keyboard/" class="tip-title">Edit an element&#39;s attributes and tag name with the keyboard</a>
  <a href="/tips/en/edit-elements-with-the-keyboard/" class="tip-image"><img src="../../assets/img/edit-elements-with-the-keyboard.gif" alt="Animation of a part of the Inspector panel in Firefox, showing how pressing Enter on a focused element goes into edit mode and how Tab allows to navigate from field to field." loading="lazy"></img></a>
@@ -408,21 +423,6 @@ <h2>144 DevTools Tips</h2>
  <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li></ul>
  </div>
 </li>
-
-<li class="hover-box tip ">
- <a href="/tips/en/find-html-parsing-errors/" class="tip-title">Find HTML parsing errors</a>
- <a href="/tips/en/find-html-parsing-errors/" class="tip-image"><img src="../../assets/img/find-html-parsing-errors.png" alt="The View-Source page in Firefox, with a stray em closing tag highlighted in red, with a tooltip." loading="lazy"></img></a>
- <div class="tip-excerpt">
- DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns...
- <a href="/tips/en/find-html-parsing-errors/">Read more</a>
- </div>
- <div class="tip-info">
- Categories:
- <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li></ul>
- Supported by:
- <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/polypane/" title="See all tips supported on polypane">polypane</a></li></ul>
- </div>
-</li>
 </ul>
 <nav class="pagination" aria-label="Pagination navigation">
  <ul>

diff --git a/3/index.html b/3/index.html
@@ -41,12 +41,27 @@ <h1><a href="/">DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>144 DevTools Tips</h2>
+ <h2>145 DevTools Tips</h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
 </div>
 <ul class="tips">
+<li class="hover-box tip ">
+ <a href="/tips/en/find-html-parsing-errors/" class="tip-title">Find HTML parsing errors</a>
+ <a href="/tips/en/find-html-parsing-errors/" class="tip-image"><img src="../../assets/img/find-html-parsing-errors.png" alt="The View-Source page in Firefox, with a stray em closing tag highlighted in red, with a tooltip." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns...
+ <a href="/tips/en/find-html-parsing-errors/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/polypane/" title="See all tips supported on polypane">polypane</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip ">
  <a href="/tips/en/select-pointer-events-none-elements/" class="tip-title">Select elements with pointer-events:none by holding Shift</a>
  <a href="/tips/en/select-pointer-events-none-elements/" class="tip-image"><img src="../../assets/img/select-pointer-events-none-elements.gif" alt="Animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed." loading="lazy"></img></a>
@@ -410,22 +425,6 @@ <h2>144 DevTools Tips</h2>
  <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/safari/" title="See all tips supported on safari">safari</a></li></ul>
  </div>
 </li>
-
-<li class="hover-box tip ">
- <a href="/tips/en/store-node-as-variable/" class="tip-title">Store a node as a variable to use it in the console</a>
- <a href="/tips/en/store-node-as-variable/" class="tip-image"><img src="../../assets/img/store-node-as-variable.png" alt="Firefox's &quot;use in console&quot; context menu option in the Inspector, and also showing the Console with a couple of tempN variables." loading="lazy"></img></a>
- <div class="tip-excerpt">
- If you want to use a DOM node from the page in the console:
-Right-click the node in the Elements (o...
- <a href="/tips/en/store-node-as-variable/">Read more</a>
- </div>
- <div class="tip-info">
- Categories:
- <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li><li class="tag"><a href="/tag/console/" title="See all tips about console">console</a></li></ul>
- Supported by:
- <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/safari/" title="See all tips supported on safari">safari</a></li></ul>
- </div>
-</li>
 </ul>
 <nav class="pagination" aria-label="Pagination navigation">
  <ul>

diff --git a/4/index.html b/4/index.html
@@ -41,12 +41,28 @@ <h1><a href="/">DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>144 DevTools Tips</h2>
+ <h2>145 DevTools Tips</h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
 </div>
 <ul class="tips">
+<li class="hover-box tip ">
+ <a href="/tips/en/store-node-as-variable/" class="tip-title">Store a node as a variable to use it in the console</a>
+ <a href="/tips/en/store-node-as-variable/" class="tip-image"><img src="../../assets/img/store-node-as-variable.png" alt="Firefox's &quot;use in console&quot; context menu option in the Inspector, and also showing the Console with a couple of tempN variables." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ If you want to use a DOM node from the page in the console:
+Right-click the node in the Elements (o...
+ <a href="/tips/en/store-node-as-variable/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/html/" title="See all tips about html">html</a></li><li class="tag"><a href="/tag/console/" title="See all tips about console">console</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/safari/" title="See all tips supported on safari">safari</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip ">
  <a href="/tips/en/use-logpoints/" class="tip-title">Console.log() for the web with logpoints</a>
  <a href="/tips/en/use-logpoints/" class="tip-image"><img src="../../assets/img/use-logpoints.png" alt="Setting a logpoint in the sources tool." loading="lazy"></img></a>
@@ -407,22 +423,6 @@ <h2>144 DevTools Tips</h2>
  <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/polypane/" title="See all tips supported on polypane">polypane</a></li></ul>
  </div>
 </li>
-
-<li class="hover-box tip ">
- <a href="/tips/en/style-console-messages/" class="tip-title">Apply CSS styles to console messages</a>
- <a href="/tips/en/style-console-messages/" class="tip-image"><img src="../../assets/img/style-console-messages.png" alt="A styled console message in Edge." loading="lazy"></img></a>
- <div class="tip-excerpt">
- The console.log output can be styled in DevTools using CSS.
-console.log('%c Hello World', 'color: or...
- <a href="/tips/en/style-console-messages/">Read more</a>
- </div>
- <div class="tip-info">
- Categories:
- <ul class="tags"><li class="tag"><a href="/tag/console/" title="See all tips about console">console</a></li><li class="tag"><a href="/tag/css/" title="See all tips about css">css</a></li></ul>
- Supported by:
- <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/safari/" title="See all tips supported on safari">safari</a></li></ul>
- </div>
-</li>
 </ul>
 <nav class="pagination" aria-label="Pagination navigation">
  <ul>

diff --git a/5/index.html b/5/index.html
@@ -41,12 +41,28 @@ <h1><a href="/">DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>144 DevTools Tips</h2>
+ <h2>145 DevTools Tips</h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
 </div>
 <ul class="tips">
+<li class="hover-box tip ">
+ <a href="/tips/en/style-console-messages/" class="tip-title">Apply CSS styles to console messages</a>
+ <a href="/tips/en/style-console-messages/" class="tip-image"><img src="../../assets/img/style-console-messages.png" alt="A styled console message in Edge." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ The console.log output can be styled in DevTools using CSS.
+console.log('%c Hello World', 'color: or...
+ <a href="/tips/en/style-console-messages/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/console/" title="See all tips about console">console</a></li><li class="tag"><a href="/tag/css/" title="See all tips about css">css</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/edge/" title="See all tips supported on edge">edge</a></li><li class="browser"><a href="/browser/chrome/" title="See all tips supported on chrome">chrome</a></li><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li><li class="browser"><a href="/browser/safari/" title="See all tips supported on safari">safari</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip ">
  <a href="/tips/en/find-all-images-without-alt-text/" class="tip-title">Find all images without alternative text</a>
  <a href="/tips/en/find-all-images-without-alt-text/" class="tip-image"><img src="../../assets/img/find-all-images-without-alt-text.png" alt="The output of the console.table command from above shown in the Firefox DevTools console." loading="lazy"></img></a>

diff --git a/_pagefind/fragment/en_2dcb5bc.pf_fragment b/_pagefind/fragment/en_2dcb5bc.pf_fragment
diff --git a/_pagefind/index/en_3d73516.pf_index b/_pagefind/index/en_3d73516.pf_index
diff --git a/_pagefind/index/en_4cbd066.pf_index b/_pagefind/index/en_4cbd066.pf_index
diff --git a/_pagefind/index/en_7a551b7.pf_index b/_pagefind/index/en_7a551b7.pf_index
diff --git a/_pagefind/index/en_eb5161e.pf_index b/_pagefind/index/en_eb5161e.pf_index
diff --git a/_pagefind/pagefind-entry.json b/_pagefind/pagefind-entry.json
@@ -1 +1 @@
-{"version":"0.12.0","languages":{"en":{"hash":"en_d8cd58c0b0","wasm":"en","page_count":144}}}
+{"version":"0.12.0","languages":{"en":{"hash":"en_6b85095657","wasm":"en","page_count":145}}}
diff --git a/_pagefind/pagefind.en_6b85095657.pf_meta b/_pagefind/pagefind.en_6b85095657.pf_meta
diff --git a/_pagefind/pagefind.en_d8cd58c0b0.pf_meta b/_pagefind/pagefind.en_d8cd58c0b0.pf_meta
diff --git a/assets/img/see-which-font-was-used-in-font-family.png b/assets/img/see-which-font-was-used-in-font-family.png
diff --git a/browser/firefox/index.html b/browser/firefox/index.html
@@ -41,7 +41,7 @@ <h1><a href="/">Firefox DevTools Tips</a></h1>
  <p>Help us make DevTools Tips better! <a href="https://forms.gle/1rhvKkwfAjs3ATqJ8">Fill out this survey</a> to tell us more about your DevTools habits and frustrations.</p>
  </div>
  <div class="page-toolbar">
- <h2>91 <span class="browser-name">Firefox</span> DevTools Tips </h2>
+ <h2>92 <span class="browser-name">Firefox</span> DevTools Tips </h2>
  <div id="search" class="search"></div>
 <script src="/_pagefind/pagefind-ui.js" async onload="new PagefindUI({ element: '#search', showImages: false });"></script>
 
@@ -52,6 +52,21 @@ <h2>91 <span class="browser-name">Firefox</span> DevTools Tips </h2>
 </label>
 <script async src="/assets/unique-browser-features.js"></script>
 <ul class="tips">
+<li class="hover-box tip unique-browser-feature">
+ <a href="/tips/en/see-which-font-was-used-in-font-family/" class="tip-title">Know which of the font in a font-family was actually used</a>
+ <a href="/tips/en/see-which-font-was-used-in-font-family/" class="tip-image"><img src="../../assets/img/see-which-font-was-used-in-font-family.png" alt="Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined" loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ The CSS font-family property let's you define a comma-separated list of fonts that the browser engin...
+ <a href="/tips/en/see-which-font-was-used-in-font-family/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/css/" title="See all tips about css">css</a></li></ul>
+ Supported by:
+ <ul class="browsers"><li class="browser"><a href="/browser/firefox/" title="See all tips supported on firefox">firefox</a></li></ul>
+ </div>
+</li>
+
 <li class="hover-box tip ">
  <a href="/tips/en/find-all-elements-with-style/" class="tip-title">Find all elements with a specific style</a>
  <a href="/tips/en/find-all-elements-with-style/" class="tip-image"><img src="../../assets/img/find-all-elements-with-style.png" alt="The Firefox DevTools Console tool, with the code shown on the left, and the resulting nodes listed on the right" loading="lazy"></img></a>