search

captainbrosset / devtools-tips

A collection of useful cross-browser DevTools tips
https://devtoolstips.org
312 stars 33 forks source link

Replay XHR? #82

Closed pankajparashar closed 1 year ago

pankajparashar commented 1 year ago

I'm not sure if I'm missing a step, but I don't see the Replay XHR option on the XHR/Fetch requests in the Network panel.

https://devtoolstips.org/tips/en/replay-xhr/

Screenshot 2023-06-10 at 21 33 14
captainbrosset commented 1 year ago

That's weird, I tested right now and I still see the replay XHR option in Chrome Canary.

pankajparashar commented 1 year ago

Pinging @bramus to check which version of Chrome Canary supports Replay XHR option?

bramus commented 1 year ago

Tested a few things and don’t see it in Chrome 114, 115, nor 116. Also tested Edge Canary 116.0.1923.0 to make sure it’s not a Edge DevTools specific thing, but also don’t see the option there. Maybe it’s an experiment?

Pinging @jecfish who’s on top of the Chrome DevTools side of things.

captainbrosset commented 1 year ago

It's in the source code. Here is where it gets enabled in the UI: https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/network/NetworkLogView.ts;l=1661-1664 And here is the logic that decides to show it or hide it: https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/sdk/NetworkManager.ts;l=170-173

So this isn't an experiment, it's just that it doesn't always appear.

Here is a set of steps where I do see it, please do try if you get a chance and let me know if you have the feature too:

  1. Open DevTools and go to the Network tool.
  2. Toggle the Fetch/XHR tag in the toolbar.
  3. Navigate, in the same browser tab, to https://codepen.io
  4. You should see a few requests, one of which is of type XHR.
  5. Right-click that one.

image

So, I think the issue is that this feature is perhaps a bit too restrictive. With the popularity of the Fetch API, it might be good to think enabling this feature with Fetch too!

pankajparashar commented 1 year ago

@captainbrosset Thank you very much! Yes I can see this option now. I was naively testing this on the Fetch requests whereas I should have tested it for XHR requests.

I agree this option should also be enabled for Fetch too, perhaps a separate option called Replay Fetch or maybe a generic option called Replay Request which works for both XHR/Fetch.