deploy: e8b8cb3

captainbrosset · Jun 20, 2023 · bf7b6f9 · bf7b6f9
1 parent f0ade8e
commit bf7b6f9
Show file tree

Hide file tree

Showing 27 changed files with 66 additions and 79 deletions.
diff --git a/_pagefind/fragment/en_986f8e2.pf_fragment b/_pagefind/fragment/en_986f8e2.pf_fragment
diff --git a/_pagefind/fragment/en_f060499.pf_fragment b/_pagefind/fragment/en_f060499.pf_fragment
diff --git a/_pagefind/index/en_1191e24.pf_index b/_pagefind/index/en_1191e24.pf_index
diff --git a/_pagefind/index/en_6149c3c.pf_index b/_pagefind/index/en_6149c3c.pf_index
diff --git a/_pagefind/index/en_7a873c7.pf_index b/_pagefind/index/en_7a873c7.pf_index
diff --git a/_pagefind/index/en_c62d7fe.pf_index b/_pagefind/index/en_c62d7fe.pf_index
diff --git a/_pagefind/pagefind-entry.json b/_pagefind/pagefind-entry.json
@@ -1 +1 @@
-{"version":"0.12.0","languages":{"en":{"hash":"en_52a5eafea2","wasm":"en","page_count":148}}}
+{"version":"0.12.0","languages":{"en":{"hash":"en_5b5a518ca0","wasm":"en","page_count":148}}}
diff --git a/_pagefind/pagefind.en_52a5eafea2.pf_meta b/_pagefind/pagefind.en_52a5eafea2.pf_meta
diff --git a/_pagefind/pagefind.en_5b5a518ca0.pf_meta b/_pagefind/pagefind.en_5b5a518ca0.pf_meta
diff --git a/browser/chrome/index.html b/browser/chrome/index.html
@@ -173,7 +173,7 @@ <h2>121 <span class="browser-name">Chrome</span> DevTools Tips </h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-replay-xhr;">
+<li class="hover-box tip " style="view-transition-name:post-replay-xhr;">
  <a href="/tips/en/replay-xhr/" class="tip-title">Replay a XHR request</a>
  <a href="/tips/en/replay-xhr/" class="tip-image"><img src="../../assets/img/replay-xhr.png" alt="Chrome's Network tool, with the Replay XHR contextual menu item" loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -184,7 +184,7 @@ <h2>121 <span class="browser-name">Chrome</span> DevTools Tips </h2>
  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/chrome/" title="See all tips supported on chrome">chrome</a></li></ul>
+ <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></ul>
  </div>
 </li>
 

diff --git a/browser/edge/index.html b/browser/edge/index.html
@@ -42,7 +42,7 @@ <h1><a href="/">Edge 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>124 <span class="browser-name">Edge</span> DevTools Tips </h2>
+ <h2>125 <span class="browser-name">Edge</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>
 
@@ -173,6 +173,21 @@ <h2>124 <span class="browser-name">Edge</span> DevTools Tips </h2>
  </div>
 </li>
 
+<li class="hover-box tip " style="view-transition-name:post-replay-xhr;">
+ <a href="/tips/en/replay-xhr/" class="tip-title">Replay a XHR request</a>
+ <a href="/tips/en/replay-xhr/" class="tip-image"><img src="../../assets/img/replay-xhr.png" alt="Chrome's Network tool, with the Replay XHR contextual menu item" loading="lazy"></img></a>
+ <div class="tip-excerpt">
+ When you're debugging an XHR request to a backend service that doesn't respond with the right things...
+ <a href="/tips/en/replay-xhr/">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/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></ul>
+ </div>
+</li>
+
 <li class="hover-box tip " style="view-transition-name:post-list-used-fonts;">
  <a href="/tips/en/list-used-fonts/" class="tip-title">List the fonts used on a page, or an element</a>
  <a href="/tips/en/list-used-fonts/" class="tip-image"><img src="../../assets/img/list-used-fonts-firefox.png" alt="Firefox, with DevTools on the side, showing the Fonts panel that contains the list of fonts. One of the fonts is hovered" loading="lazy"></img></a>

diff --git a/feed.xml b/feed.xml
@@ -316,10 +316,10 @@
  <updated>2023-03-28T00:00:00.000Z</updated>
  <id>https://devtoolstips.org/tips/en/replay-xhr/</id>
  <content type="html">&lt;p&gt;When you&#39;re debugging an XHR request to a backend service that doesn&#39;t respond with the right things it can be useful to send the request over and over again. Reloading the entire page to do so is tedious.&lt;/p&gt;
-&lt;p&gt;In Chrome DevTools, you can simply replay the same XHR request:&lt;/p&gt;
+&lt;p&gt;In Chrome or Edge DevTools, you can simply replay the same XHR request:&lt;/p&gt;
 &lt;ol&gt;
 &lt;li&gt;Open the &lt;strong&gt;Network&lt;/strong&gt; tool.&lt;/li&gt;
-&lt;li&gt;Find the XHR request in the list that you want to resend.&lt;/li&gt;
+&lt;li&gt;Find the XHR request in the list that you want to resend. Note that this only works with XHR requests, and not Fetch requests.&lt;/li&gt;
 &lt;li&gt;Right-click the request and click &lt;strong&gt;Replay XHR&lt;/strong&gt;.&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: you can also edit the request before resending it! To learn more, see &lt;a href=&quot;https://devtoolstips.org/tips/en/replay-xhr/edit-and-resend-network-requests.md&quot;&gt;Edit and resend faulty network requests to debug them&lt;/a&gt;.&lt;/p&gt;

diff --git a/index.html b/index.html
@@ -213,7 +213,7 @@ <h2>148 DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-replay-xhr;">
+<li class="hover-box tip " style="view-transition-name:post-replay-xhr;">
  <a href="/tips/en/replay-xhr/" class="tip-title">Replay a XHR request</a>
  <a href="/tips/en/replay-xhr/" class="tip-image"><img src="../../assets/img/replay-xhr.png" alt="Chrome's Network tool, with the Replay XHR contextual menu item" loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -224,7 +224,7 @@ <h2>148 DevTools Tips</h2>
  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/chrome/" title="See all tips supported on chrome">chrome</a></li></ul>
+ <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></ul>
  </div>
 </li>
 

diff --git a/tag/all/index.html b/tag/all/index.html
@@ -213,7 +213,7 @@ <h2>148 all DevTools Tips</h2>
  </div>
 </li>
 
-<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-replay-xhr;">
+<li class="hover-box tip " style="view-transition-name:post-replay-xhr;">
  <a href="/tips/en/replay-xhr/" class="tip-title">Replay a XHR request</a>
  <a href="/tips/en/replay-xhr/" class="tip-image"><img src="../../assets/img/replay-xhr.png" alt="Chrome's Network tool, with the Replay XHR contextual menu item" loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -224,7 +224,7 @@ <h2>148 all DevTools Tips</h2>
  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/chrome/" title="See all tips supported on chrome">chrome</a></li></ul>
+ <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></ul>
  </div>
 </li>
 

diff --git a/tag/network/index.html b/tag/network/index.html
@@ -48,7 +48,7 @@ <h2>11 network DevTools Tips</h2>
 
 </div>
 <ul class="tips">
-<li class="hover-box tip unique-browser-feature" style="view-transition-name:post-replay-xhr;">
+<li class="hover-box tip " style="view-transition-name:post-replay-xhr;">
  <a href="/tips/en/replay-xhr/" class="tip-title">Replay a XHR request</a>
  <a href="/tips/en/replay-xhr/" class="tip-image"><img src="../../assets/img/replay-xhr.png" alt="Chrome's Network tool, with the Replay XHR contextual menu item" loading="lazy"></img></a>
  <div class="tip-excerpt">
@@ -59,7 +59,7 @@ <h2>11 network DevTools Tips</h2>
  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/chrome/" title="See all tips supported on chrome">chrome</a></li></ul>
+ <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></ul>
  </div>
 </li>
 

diff --git a/tips/en/check-bfcache-readiness/index.html b/tips/en/check-bfcache-readiness/index.html
@@ -69,11 +69,6 @@ <h3>See also</h3>
  <a href="/tips/en/zoom-devtools-content" class="other-tip-image">
  <img loading="lazy" src="/assets/img/zoom-devtools-content.gif" alt="Animation showing the UI of Chrome DevTools being zoomed in and out.">
  </a>
- </li><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
- </a>
  </li><li>
  <a href="/tips/en/take-high-res-screenshots">Take high-resolution screenshots of web pages</a>
  <a href="/tips/en/take-high-res-screenshots" class="other-tip-image">

diff --git a/tips/en/detect-low-color-contrast/index.html b/tips/en/detect-low-color-contrast/index.html
@@ -107,9 +107,9 @@ <h3>See also</h3>
  <img loading="lazy" src="/assets/img/fix-color-contrast-issues-with-element-tooltip.gif" alt="Animation of the Elements panel in Microsoft Edge. User clicks on color value, then activates the inspect tool, then hovers over an element on the page, then uses the arrow keys to change the color. We see the element tooltip showing the background and text colors as well as the resulting contrast.">
  </a>
  </li><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
+ <a href="/tips/en/simulate-color-vision-deficiencies">Simulate color vision deficiencies</a>
+ <a href="/tips/en/simulate-color-vision-deficiencies" class="other-tip-image">
+ <img loading="lazy" src="/assets/img/simulate-color-vision-deficiencies-1.png" alt="The color vision simulation drop-down in Firefox.">
  </a>
  </li></ul>
 </div><div class="tip-footer">

diff --git a/tips/en/emulate-color-schemes/index.html b/tips/en/emulate-color-schemes/index.html
@@ -102,16 +102,16 @@ <h3>See also</h3>
  <a href="/tips/en/remove-annoying-overlays" class="other-tip-image">
  <img loading="lazy" src="/assets/img/remove-annoying-overlays.gif" alt="Animation showing the whole flow from selecting the element with the inspect tool and pressing delete, resulting in the element disappearing from the page.">
  </a>
- </li><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
- </a>
  </li><li>
  <a href="/tips/en/understand-console-tab-drawer">Understand when the Console opens in the main panel and in the drawer</a>
  <a href="/tips/en/understand-console-tab-drawer" class="other-tip-image">
  <img loading="lazy" src="/assets/img/understand-console-tab-drawer-1.png" alt="DevTools, with just one tool displayed, the Elements tool">
  </a>
+ </li><li>
+ <a href="/tips/en/console-table-group-assert">console.log() is great, but do you know console.table()? console.group()? console.assert()?</a>
+ <a href="/tips/en/console-table-group-assert" class="other-tip-image">
+ <img loading="lazy" src="/assets/img/console-table-group-assert-1.jpg" alt="The Chrome DevTools Console tool showing a table that contains each object in a separate row, and each object property in its own column">
+ </a>
  </li></ul>
 </div><div class="tip-footer">
  <div class="authors">Authors: <span><a href="https://patrickbrosset.com">Patrick Brosset</a></span></div>

diff --git a/tips/en/form-testing/index.html b/tips/en/form-testing/index.html
@@ -54,14 +54,6 @@ <h2 class="tip-title">Autofill forms for testing</h2>
 <p><img src="/assets/img/form-testing.gif" alt="Animation of a form being filled after selecting &quot;autofill&quot; in the context menu, followed by the form being emptied after choosing &quot;Clear form&quot; in the context menu."></p>
 <p><a href="https://polypane.app/docs/form-autofill/">Learn more here</a>.</p>
 
-</div><div class="see-also">
- <h3>See also</h3>
- <ul><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
- </a>
- </li></ul>
 </div><div class="tip-footer">
  <div class="authors">Authors: <span><a href="https://kilianvalkhof.com">Kilian Valkhof</a></span></div>
  <p class="last-edit">Last edit: <time datetime="2023-01-06T00:00:00.000Z">1/6/2023</time> - <a href="https://github.com/captainbrosset/devtools-tips/edit/main/./src/tips/en/form-testing.md">Edit page</a></p>

diff --git a/tips/en/get-size-of-resource-types/index.html b/tips/en/get-size-of-resource-types/index.html
@@ -91,9 +91,9 @@ <h3>See also</h3>
  <img loading="lazy" src="/assets/img/hide-extension-resources.jpg" alt="The Network panel in Chrome DevTools showing the pattern used in the filter input box.">
  </a>
  </li><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
+ <a href="/tips/en/see-request-path-instead-of-name">See network request paths instead of names in the Network tool</a>
+ <a href="/tips/en/see-request-path-instead-of-name" class="other-tip-image">
+ <img loading="lazy" src="/assets/img/see-request-path-instead-of-name.png" alt="The Network tool in Edge, showing the contextual menu that&#39;s used to customize the network list columns">
  </a>
  </li></ul>
 </div><div class="tip-footer">

diff --git a/tips/en/list-console-functions/index.html b/tips/en/list-console-functions/index.html
@@ -73,16 +73,16 @@ <h3>See also</h3>
  <a href="/tips/en/find-all-images-without-alt-text" class="other-tip-image">
  <img loading="lazy" 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.">
  </a>
- </li><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
- </a>
  </li><li>
  <a href="/tips/en/console-table-group-assert">console.log() is great, but do you know console.table()? console.group()? console.assert()?</a>
  <a href="/tips/en/console-table-group-assert" class="other-tip-image">
  <img loading="lazy" src="/assets/img/console-table-group-assert-1.jpg" alt="The Chrome DevTools Console tool showing a table that contains each object in a separate row, and each object property in its own column">
  </a>
+ </li><li>
+ <a href="/tips/en/copy-element-styles">Copy an elements styles</a>
+ <a href="/tips/en/copy-element-styles" class="other-tip-image">
+ <img loading="lazy" src="/assets/img/copy-element-styles.png" alt="The Edge DevTools Elements panel, showing the context menu on an element and the Copy styles menu item. The screenshot also shows what the result of copying styles is: a flat list of CSS properties and values.">
+ </a>
  </li></ul>
 </div><div class="tip-footer">
  <div class="authors">Authors: <span><a href="https://patrickbrosset.com">Patrick Brosset</a></span></div>

diff --git a/tips/en/measure-distances/index.html b/tips/en/measure-distances/index.html
@@ -72,11 +72,6 @@ <h2 class="tip-title">Measure arbitrary distances in the page</h2>
 </div><div class="see-also">
  <h3>See also</h3>
  <ul><li>
- <a href="/tips/en/replay-xhr">Replay a XHR request</a>
- <a href="/tips/en/replay-xhr" class="other-tip-image">
- <img loading="lazy" src="/assets/img/replay-xhr.png" alt="Chrome&#39;s Network tool, with the Replay XHR contextual menu item">
- </a>
- </li><li>
  <a href="/tips/en/sample-colors-from-the-page">Sample colors from the page</a>
  <a href="/tips/en/sample-colors-from-the-page" class="other-tip-image">
  <img loading="lazy" src="/assets/img/sample-colors-from-the-page-1.gif" alt="Animation of the eyedropper tool being started from the Firefox main menu.">
@@ -91,6 +86,11 @@ <h3>See also</h3>
  <a href="/tips/en/emulate-color-schemes" class="other-tip-image">
  <img loading="lazy" src="/assets/img/emulate-color-schemes-firefox.png" alt="Firefox, with DevTools open, showing the Inspector tool, with the color scheme buttons">
  </a>
+ </li><li>
+ <a href="/tips/en/highlight-matching-elements">Highlight all the elements that a CSS rule matches</a>
+ <a href="/tips/en/highlight-matching-elements" class="other-tip-image">
+ <img loading="lazy" src="/assets/img/highlight-matching-elements.gif" alt="Animation showing how hovering over selectors in chrome highlights the matching elements in the page.">
+ </a>
  </li></ul>
 </div><div class="tip-footer">
  <div class="authors">Authors: <span><a href="https://patrickbrosset.com">Patrick Brosset</a></span></div>