How to dry run a request in a browser? - google-chrome

I am clicking a button in chrome upon which a POST request is sent to the server.
I want to capture this request without actually sending the request to the server something like a dry run.
Because if I let this request succeed and I replay it, I know the backend will throw the exception. Another reason is that the front end is dynamically setting a lot of fields every time.
If I can do this, I can easily copy the request body and play around with it.
Can we do something like blocking a request ?
Does chrome or any browser support it or is there an extension?

Go to the Network tab in Chrome. On top, you can see a dropdown with Online selected by default. Select offline.
Now send the request. You will see the request fails as if the network is disconnected.

Related

POST request not showing up in Chrome DevTools

When using WhatsApp web, when you send a message there are no requests showing up, but the message still delivers. Why are there literally no signs of any requests made in the networking tab??
And how to make it visible (if it's hidden)??
Note: It happens only on WhatsApp web. On other sites, it works and shows the GET and POST requests...
This is a common source of conufsion when debugging networking requests done from the web.
Normally, developers look at these network requests from top down and assume that the lowest one is the most recent request made - therefore assuming that the request must be at the bottom. For 'plain' HTTP this is correct. However, many apps that want to show data in real-time, use WebSockets to communicate with an API.
The same thing happens in the Web-version of Whatsapp. Only assets like the actual JavaScript-app, icons etc are loaded using plain HTTP. Then, a WebSocket is opened through which messages are exchanged for example.
To see the actual request do the following:
Open DevTools, go to networking tab
Open Whatsapp web. Make sure that at this step (1) is already recording!
Filter for "WS" in the filtering bar
There will be only very few results which you can click to investigate
Inspect this Socket using the 'messages' tab
Now send a message, you will see a message called binary message with your message as payload.
Try "Settings" -> "Preferences" -> "Network" -> "Record network log" in Chrome DevTools. This checkbox is probably unchecked in your situation. So, check it.
Otherwise if "Record network log" is checked, then try "Settings" -> "Preferences" -> "Restore defaults and reload".

Not seeing all traffic incoming from a website in the inspector under the network tab?

So when I go to a website like, say https://coinmarketcap.com (that displays the prices of cryptocurrencies), in my Chrome Browser, it looks like I dont see all activity going on in the inspector under the Network tab.
Here is a screenshot to visualize the website:
I see the prices are updated live on the website (without refreshing), but I don't see any activity in the Network inspector.
There is of course activity when I load the page for the first time, but nothing after that even tho the website dynamically updates the prices? My firsts thought was, that it could be fake updates via a JS script on the client-side, but there are many websites I know where you can't see this, so what's going on here? What types of protocols are used to achieve this, because I know that WebSockets and polling (xhr) always shows up.
A screenshot of the network inspector, just be clear what I mean by that (showing traffic for the first 50 ms (loading time) and then nothing afterwards)
It using Web socket, you filter the request by WS and should see the latest ws connection.
Click on it and sees the message for this socket.
it was necessary to use a proxy like burpsuite in order to capture the sockets sent and received by the client / server here is the result it's about 72 request received in a single second
The website you suggested is using Websockets for communication.
To see WebSockets request in WS tab in Network inspector, You will have to open the console first then refresh the page.
The console needs to capture the initial handshakes when communication initializes. So if you open the website first then check the console, you may not find anything in WS.

Why doesn't Chrome or Firefox show request headers for pending requests?

If you are building a website and put a breakpoint in your server code so that a page cannot be returned until you move past the breakpoint and you (for instance) reload the page in Chrome or Firefox (haven't tested others), you can't see any information about the request.
While debugging, sometimes it's easier to view information about the HTTP request in the browser's dev tools than it is to find that information in the server code. Why am I not able to see HTTP request information until a response is returned by the server?
From: https://bugs.chromium.org/p/chromium/issues/detail?id=294891:
Headers displayed for pending requests are provisional. They represent
what request was sent from Blink to Chromium.
We do not update headers until server responds to avoid additional
notification used only by DevTools.
To watch real network activity you can use chrome://net-internals
It's not clear what that means, but that's the cited reason.

Why does Chrome sometimes logs only the preflight request (and not the actual GET) when using CORS?

UPDATE: If I go back to 'All' tab and then back to 'XHR' I see both requests, so I guess it's some kind of chrome bug?
The GET request completes successfully but I cannot inspect the response. This occurs randomly in some of the endpoints of my api.
Firefox always logs the response.
You can always have a better view of the network communication via
chrome://net-internals/#events
Maybe you'll find something blocking it before reaching the dev tools..
On the network tab, you can remove the tick infront of this menu 3rd-party-request

Chrome Extension with XMLHttpRequest slow at launch

At the moment I am developing a Google Chrome Extension in which I have to fetch data from a server. I am doing this with an XMLHttpRequest and all is going well, except for the fact when I launch Google Chrome and immediately click my extension, it won't open until the XMLHttpRequest is completed. The request is sent to a rather slow server, that's where the problem is. But is there a way in which you might run the XMLHttpRequest in another thread or does Google Chrome give you another way to fetch data from a server that runs in the background so I can open my extension while it's still getting it's data from the server?
Maybe good to know, the XMLHttpRequest runs in the background page, not the popup page.
Looks like the Asynchronous parameter has to be set to true.