deploy: 14fff24

captainbrosset · Jun 11, 2023 · b35a014 · b35a014
1 parent c6da685
commit b35a014
Show file tree

Hide file tree

Showing 189 changed files with 1,721 additions and 1,258 deletions.
diff --git a/1/index.html b/1/index.html
diff --git a/2/index.html b/2/index.html
diff --git a/3/index.html b/3/index.html
diff --git a/4/index.html b/4/index.html
diff --git a/5/index.html b/5/index.html
@@ -17,6 +17,7 @@
  <meta name="twitter:site" content="@_devtoolstips">
  <meta property="og:site_name" content="DevTools Tips">
  <meta name="twitter:card" content="summary">
+ <meta name="view-transition" content="same-origin" />
  </head>
  <body>
  <a href="#maincontent" class="skip-link">Skip to main content</a>
@@ -36,18 +37,33 @@ <h1><a href="/">DevTools Tips</a></h1>
  </header>
  <div class="header-shadow"></div>
  <div class="header-shadow-block"></div>
- <main id="maincontent">
+ <main id="maincontent" >
  <div class="announcement">
  <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>147 DevTools Tips</h2>
+ <h2>148 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 ">
+<li class="hover-box tip " style="view-transition-name:post-suppressed-event-listeners-when-paused;">
+ <a href="/tips/en/suppressed-event-listeners-when-paused/" class="tip-title">Event listeners are suppressed when paused</a>
+ <a href="/tips/en/suppressed-event-listeners-when-paused/" class="tip-image"><img src="../../assets/img/suppressed-event-listeners-when-paused.png" alt="A page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page." loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript....
+ <a href="/tips/en/suppressed-event-listeners-when-paused/">Read more</a>
+ </div>
+ <div class="tip-info">
+ Categories:
+ <ul class="tags"><li class="tag"><a href="/tag/javascript/" title="See all tips about javascript">javascript</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/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 " style="view-transition-name:post-sample-colors-from-the-page;">
  <a href="/tips/en/sample-colors-from-the-page/" class="tip-title">Sample colors from the page</a>
  <a href="/tips/en/sample-colors-from-the-page/" class="tip-image"><img src="../../assets/img/sample-colors-from-the-page-1.gif" alt="Animation of the eyedropper tool being started from the Firefox main menu." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -62,7 +78,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-visualize-tabbing-order;">
  <a href="/tips/en/visualize-tabbing-order/" class="tip-title">Visualize the tabbing order on the page</a>
  <a href="/tips/en/visualize-tabbing-order/" class="tip-image"><img src="../../assets/img/visualize-tabbing-order.png" alt="The tabbing order highlighter in Firefox, showing numbered boxes around focusable elements." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -77,7 +93,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-style-console-messages;">
  <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">
@@ -93,7 +109,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-find-all-images-without-alt-text;">
  <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>
  <div class="tip-excerpt">
@@ -108,7 +124,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-outline-everything;">
  <a href="/tips/en/outline-everything/" class="tip-title">Draw a box around all elements to debug your CSS and page structure</a>
  <a href="/tips/en/outline-everything/" class="tip-image"><img src="../../assets/img/outline-everything.gif" alt="Animation showing how adding the rule in the styles pane if Chrome DevTools outlines all elements in the page." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -123,7 +139,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-query-dom-from-console;">
  <a href="/tips/en/query-dom-from-console/" class="tip-title">Find DOM elements from the console</a>
  <a href="/tips/en/query-dom-from-console/" class="tip-image"><img src="../../assets/img/query-dom-from-console.png" alt="Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -139,7 +155,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-persist-logs-across-pages;">
  <a href="/tips/en/persist-logs-across-pages/" class="tip-title">Persist console messages across page navigations and reloads</a>
  <a href="/tips/en/persist-logs-across-pages/" class="tip-image"><img src="../../assets/img/persist-logs-across-pages.png" alt="Edge devtools' console showing the settings panel at the top, with the &quot;perserve log&quot; box checked." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -154,7 +170,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-simulate-color-vision-deficiencies;">
  <a href="/tips/en/simulate-color-vision-deficiencies/" class="tip-title">Simulate color vision deficiencies</a>
  <a href="/tips/en/simulate-color-vision-deficiencies/" class="tip-image"><img src="../../assets/img/simulate-color-vision-deficiencies-1.png" alt="The color vision simulation drop-down in Firefox." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -169,7 +185,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-edit-css-angles;">
  <a href="/tips/en/edit-css-angles/" class="tip-title">Edit CSS angles</a>
  <a href="/tips/en/edit-css-angles/" class="tip-image"><img src="../../assets/img/edit-css-angles.gif" alt="Animation of the angle editor in Chrome, where a click is made on the angle swatch, and then the mouse is used to change the angle." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -184,7 +200,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature">
+<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-edit-clip-path-shape-outside;">
  <a href="/tips/en/edit-clip-path-shape-outside/" class="tip-title">Edit clip-path and shape-outside CSS properties by dragging points in the page</a>
  <a href="/tips/en/edit-clip-path-shape-outside/" class="tip-image"><img src="../../assets/img/edit-clip-path-shape-outside.gif" alt="Animation of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -199,7 +215,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-copy-from-console;">
  <a href="/tips/en/copy-from-console/" class="tip-title">Copy an object from the console</a>
  <a href="/tips/en/copy-from-console/" class="tip-image"><img src="../../assets/img/copy-from-console.png" alt="Chrome devtools' console with a line of code using the copy() function." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -214,7 +230,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-get-current-element-in-console;">
  <a href="/tips/en/get-current-element-in-console/" class="tip-title">Get the selected element in the console</a>
  <a href="/tips/en/get-current-element-in-console/" class="tip-image"><img src="../../assets/img/get-current-element-in-console.jpg" alt="Safari's console showing how the $0 shortcut returns the selected element." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -229,7 +245,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature">
+<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-find-custom-elements-code;">
  <a href="/tips/en/find-custom-elements-code/" class="tip-title">Find your web component&#39;s custom element code</a>
  <a href="/tips/en/find-custom-elements-code/" class="tip-image"><img src="../../assets/img/find-custom-elements-code.gif" alt="Animation showing the custom button in Firefox's inspector and that clicking on it goes to the debugger." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -244,7 +260,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-tweak-grid-flex-alignment;">
  <a href="/tips/en/tweak-grid-flex-alignment/" class="tip-title">Tweak css grid and flexbox alignment properties</a>
  <a href="/tips/en/tweak-grid-flex-alignment/" class="tip-image"><img src="../../assets/img/tweak-grid-flex-alignment.png" alt="The grid editor in the Styles pane of Microsoft Edge." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -259,7 +275,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-see-quick-a11y-info-on-hover;">
  <a href="/tips/en/see-quick-a11y-info-on-hover/" class="tip-title">See quick accessibility information on hover</a>
  <a href="/tips/en/see-quick-a11y-info-on-hover/" class="tip-image"><img src="../../assets/img/see-quick-a11y-info-on-hover.gif" alt="Animation of the a11y tooltip in chrome." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -274,7 +290,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-filter-network-requests;">
  <a href="/tips/en/filter-network-requests/" class="tip-title">Filter requests in the Network panel by status code, mime type and more</a>
  <a href="/tips/en/filter-network-requests/" class="tip-image"><img src="../../assets/img/filter-network-requests.png" alt="The Network panel in Edge showing the filter input field." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -290,7 +306,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-view-perf-markers-in-order;">
  <a href="/tips/en/view-perf-markers-in-order/" class="tip-title">View performance markers in order</a>
  <a href="/tips/en/view-perf-markers-in-order/" class="tip-image"><img src="../../assets/img/view-perf-markers-in-order.png" alt="The console in Edge showing the PerformanceTiming object, with alphabetical properties, and then using console.table to sort properties." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -305,7 +321,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-unminify-javascript-code;">
  <a href="/tips/en/unminify-javascript-code/" class="tip-title">Unminify JavaScript code to easily read and debug it</a>
  <a href="/tips/en/unminify-javascript-code/" class="tip-image"><img src="../../assets/img/unminify-javascript-code.gif" alt="The Sources panel in Chrome, showing the pretty-print button." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -320,7 +336,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-highlight-matching-elements;">
  <a href="/tips/en/highlight-matching-elements/" class="tip-title">Highlight all the elements that a CSS rule matches</a>
  <a href="/tips/en/highlight-matching-elements/" class="tip-image"><img src="../../assets/img/highlight-matching-elements.gif" alt="Animation showing how hovering over selectors in chrome highlights the matching elements in the page." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -335,7 +351,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-expand-nodes-recursively;">
  <a href="/tips/en/expand-nodes-recursively/" class="tip-title">Expand DOM nodes recursively</a>
  <a href="/tips/en/expand-nodes-recursively/" class="tip-image"><img src="../../assets/img/expand-nodes-recursively.gif" alt="Animation showing right-clicking on a node in Chrome's Elements panel and choosing &quot;expand recursively&quot;." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -350,7 +366,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature">
+<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-edit-css-filters;">
  <a href="/tips/en/edit-css-filters/" class="tip-title">Edit CSS filters</a>
  <a href="/tips/en/edit-css-filters/" class="tip-image"><img src="../../assets/img/edit-css-filters.png" alt="The filter editing UI in Firefox." loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -366,7 +382,7 @@ <h2>147 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip ">
+<li class="hover-box tip " style="view-transition-name:post-debugger-statement;">
  <a href="/tips/en/debugger-statement/" class="tip-title">Use the debugger statement to pause script execution</a>
  <a href="/tips/en/debugger-statement/" class="tip-image"><img src="../../assets/img/debugger-statement.png" alt="The Sources panel in Edge, paused at a debugger statement." loading="lazy"></img></a>
  <div class="tip-excerpt">

diff --git a/_pagefind/fragment/en_1380934.pf_fragment b/_pagefind/fragment/en_1380934.pf_fragment
diff --git a/_pagefind/index/en_1a63a96.pf_index b/_pagefind/index/en_1a63a96.pf_index
diff --git a/_pagefind/index/en_86a8ee9.pf_index b/_pagefind/index/en_86a8ee9.pf_index
diff --git a/_pagefind/index/en_e695b3c.pf_index b/_pagefind/index/en_e695b3c.pf_index
diff --git a/_pagefind/index/en_fc22203.pf_index b/_pagefind/index/en_fc22203.pf_index
diff --git a/_pagefind/pagefind-entry.json b/_pagefind/pagefind-entry.json
@@ -1 +1 @@
-{"version":"0.12.0","languages":{"en":{"hash":"en_8a485e8ff2","wasm":"en","page_count":147}}}
+{"version":"0.12.0","languages":{"en":{"hash":"en_225faddc5c","wasm":"en","page_count":148}}}
diff --git a/_pagefind/pagefind.en_225faddc5c.pf_meta b/_pagefind/pagefind.en_225faddc5c.pf_meta
diff --git a/_pagefind/pagefind.en_8a485e8ff2.pf_meta b/_pagefind/pagefind.en_8a485e8ff2.pf_meta
diff --git a/assets/img/find-rule-that-causes-style-1.png b/assets/img/find-rule-that-causes-style-1.png
diff --git a/assets/img/find-rule-that-causes-style-2.png b/assets/img/find-rule-that-causes-style-2.png