Is it possible to simulate changing network latencies (within a range) for different requests via chrome?
E.g. for testing what happens when the order of ajax responses differs.
DevTools technical writer here. We have network throttling in the Network panel:
But that creates a steady throttled state. As of Chrome 68 we don't have any feature for randomizing the amount of throttling within a given range.
You might be able to achieve this using Puppeteer.
I think it would possible, creating an extension and use the Chrome debugger and Network domain
you can use this Chrome/Firefox devtools extension that can simulate http request delay for configurable URL
Chrome devtools plugin
Related
My web client application is setting HTTP POST requests via fetch API.
I see that OPTIONS preflight requests are sent via debugging proxy (Charles Proxy), but they are not displayed in Google Chrome Developer Tools\Network tab.
I don't have any filters setup on the network tab. I remember OPTIONS requests being visible there, but not anymore. How do I bring them back?
You'll need to go to: chrome://flags/#out-of-blink-cors, disable the flag, and restart Chrome.
This is an expected behavior change according to:
https://bugs.chromium.org/p/chromium/issues/detail?id=995740#c1
I originally came across this via:
https://support.google.com/chrome/thread/11089651?hl=en
As of 2021 in CHROME the OPTIONS request is visible in the NETWORK tab filter OTHER requests
To see it together with XHR just CTRL+click and pick the request filters you want to see.
UPDATE (April 17) Chrome Version 90.0.4430.72 has made the options requests hidden again :(
Chrome 81 does not seem to display anything even after changing the option and restarting on my computer.
As an alternative solution, I started to use Firefox and its Network tab for development.
https://getfirefox.com
I'm Takashi from Chromium Project, and drove the Out-Of-Blink/Render CORS project.
The project intended to introduce a process isolated CORS implementation for better security and privacy, and many of new network related features rely on this new implementation. Unfortunately we temporarily disabled preflight support in DevTools as it turned out continuing to support it weakens security and privacy. Sorry for inconvenience during this period.
Good news is now Chrome 83 implements the CORS preflight DevTools support again in a security preserved way. So you can monitor the CORS preflight requests as you could do before the Out-Of-Blink/Renderer CORS.
Best,
I am intercepting and returning a resource from service worker cache. It takes around 300-400ms to download the content as per Google Chrome devtools. I checked in Firefox, the download is instant.
I expected that download time to be a lot smaller since no network is involved. I intercept the fetch with the usual match function:
event.respondWith(
caches.match(event.request).then(response => response)
);
Is there something wrong I am doing in the way I intercept and return the resource from cache?
You can try the following solutions from this google forum:
Delete your cache and cookies
Use incognito mode If this helps then temporarily disable your extensions to identify which one is causing the rendering problem. To
do this go to chrome://extensions and uncheck Enabled for each
extension one by one.
Reset your browser settings
Turn off hardware acceleration by going to Menu > Settings > Advanced Settings > Under 'System' uncheck Use hardware acceleration
when available.
I need to log the information shown in network tab to a file. I can do it by firing network tab first and then exporting it to a file. But is it possible to run the network tab and exporting it to a file in the background automatically whenever the Chrome is opened?
Is it possible to do?
It depends on your requirement. If your extension involves DevTools, and therefore it is open, you can use the chrome.devtools.network.getHAR() method to get the network traffic. You don't need to navigate to the Network tab.
However, if you want to access the network data without DevTools being opened, this API will not work, as it's only exposed to the DevTools instance. There are a couple of possible options.
Option 1
You could use the chrome.webRequest API to intercept each request/response and append whatever data you want/can to an object. You could then use the chrome.downloads API to download the data. In your case, you could use a data URI.
var url = 'data:application/json;base64,' + btoa(data);
chrome.downloads.download({url: url, filename: 'notQuiteAHAR'json'});
I haven't tested this in practice, and I'm not too sure if you can determine when all requests are done before calling the download.
Option 2
Use the more low level chrome.debugger API, as per the comment by #wOxxOm. The debugging protocol only allows one instance of the debugger at a time, so this will only ever work if you don't have DevTools running. The API exposes a lot more than the chrome.webRequest API, but requires a bit of work to get all the data you need.
There's a repository called chrome-har-capturer, which uses the debugging protocol. Of particular interest is har.js, which uses the events found in the debugger API to manually construct the HAR. The purpose of the library is for remote debugging purposes, but I believe you can use the debugger API in an extension, and so you could probably use aspects of this repository.
As suggested by Gideon Pyzer, HAR Recorder uses chrome debug protocol to record HAR and generate a har file (without opening devtools). If you want a variation, you can fork and make changes on it.
Is there any way to add a time delay to a script/asset loading in the Google Chrome Browser via the Chrome Developer Tools? Or to block a script loading entirely?
The reason I want to do this is to see how a site performs when a script/asset suffers from delayed loading or failed loading.
In Chrome Developer Tools when you are in the Network you can add custom throttling. You can specify download and upload speed as well as request latency. But this will apply to all resources and not only to a specific one.
--- edit ---
For delay individual URLs on any page, you can use a chrome extension (since it can intercept browser requests). I use https://chrome.google.com/webstore/detail/url-throttler/kpkeghonflnkockcnaegmphgdldfnden
If the asset is a third party or hosted on a different domain, there is a Chrome plugin that's designed to test what you are calling loading delays, that are also called SPOF (Single Point Of Failure). It might not be very intuitive at first use, but it's very helpful :
The plugin is called SPOF-O-Matic and can be found here: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
Following solutions have nothing with Chrome Devtools but they work.
If you don't mind redirects then you can try Slowwly or deelay.me.
Other alternative for non-windows OS is Comcast.
You can do it by combining multiple resources.
I use http://www.deelay.me/ to generate the delayed url.
I then combine it with requestly extension (https://requestly.io/) to create a host replace rule to target a specific resource
This devtools extension can fit your requirement, Its a Chrome/Firefox devtools extension that can simulate http request delay for any configurable URL.
Chrome devtools extension webstore
You can use Requestly Browser Extension or Desktop App to modify your network requests. Delaying/Throttling scripts is one of the use-cases amongst many already supported in Requestly.
Here's how you can do it. Once you install Requestly, Use the Delay Request feature.
Create New Rule & Select Delay Rule Type
Define URL (or URL Pattern) and the delay value
This article explains 3 different approaches to add delay/throttle APIs (or network requests). However, in your case Requestly extension based approach should work best.
PS - I built Requestly.
Is there a way, or an extension, that lets me watch the "traffic" going through a WebSocket? For debugging purposes I'd like to see the client and server requests/responses.
Chrome developer tools now have the ability to list WebSocket frames and also inspect the data if the frames are not binary.
Process:
Launch Chrome Developer tools
Load your page and initiate the WebSocket connections
Click the Network Tab.
Select the WebSocket connection from the list on the left (it will have status of "101 Switching Protocols".
Click the Messages sub-tab. Binary frames will show up with a length and time-stamp and indicate whether they are masked. Text frames will show also include the payload content.
If your WebSocket connection uses binary frames then you will probably still want to use Wireshark to debug the connection. Wireshark 1.8.0 added dissector and filtering support for WebSockets. An alternative may be found in this other answer.
They seem to continuously change stuff in Chrome, but here's what works right now :-)
First you must click on the red record button or you'll get nothing.
I never noticed the WS before but it filters out the web socket
connections.
Select it and then you can see the Frames (now called Messages) which will show you error messages etc.
Chrome Canary and Chromium now have WebSocket message frame inspection feature. Here are the steps to test it quickly:
Navigate to the WebSocket Echo demo [dead as of 2022], hosted on the websocket.org site https://echo.websocket.events/.ws (run by the company Lob) or you can locally run the Echo Server project.
Turn on the Chrome Developer Tools.
Click Network, and to filter the traffic shown by the Dev Tools, click WebSockets.
In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
Click the Send button in the Echo demo.
THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the echo.websocket.org entry, representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.
Note: Every time you send or receive new messages, you have to refresh the main panel by clicking on the echo.websocket.org entry on the left.
I also posted the steps with screen shots and video.
My recently published book, The Definitive Guide to HTML5 WebSocket, also has a dedicated appendix covering the various inspection tools, including Chrome Dev Tools, Chrome net-internals, and Wire Shark.
If you don't have a page which is accessing the websocket, you can open up the Chrome console and type your JavaScript in:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
This will open up the web socket so you can see it in the network tab and in the console.
The other answers cover the most common scenario: watch the content of the frames (Developer Tools -> Network tab -> Right click on the websocket connection -> frames).
If you want to know some more informations, like which sockets are currently open/idle or be able to close them you'll find this url useful
chrome://net-internals/#sockets
You have 3 options: Chrome (via Developer Tools -> Network tab), Wireshark, and Fiddler (via Log tab), however they all very basic. If you have very high volume of traffic or each frame is very large, it becomes very difficult to use them for debugging.
You can however use Fiddler with FiddlerScript to inspect WebSocket traffic in the same way you inpect HTTP traffic. Few advantages of this solution are that you can leverage many other functionalities in Fiddler, such as multiple inspectors (HexView, JSON, SyntaxView), compare packets, and find packets, etc.
Please refer to my recently written article on CodeProject, which show you how to Debug/Inspect WebSocket traffic with Fiddler (with FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
If you want a better experience, I'd suggest using Postman to debug WebSocket requests. It has been released as a new feature.
https://stackoverflow.com/a/43754722/15988851
I'm just posting this since Chrome changes alot, and none of the answers were quite up to date.
Open dev tools
REFRESH YOUR PAGE (so that the WS connection is captured by the network tab)
Click your request
Click the "Frames" sub-tab
You should see somthing like this:
Chrome developer tools allows to see handshake request which stays pending during the opened connection, but you can't see traffic as far as I know. However you can sniff it for example.
Short answer for Chrome Version 29 and up:
Open debugger, go to the tab "Network"
Load page with websocket
Click on the websocket request with upgrade response from server
Select the tab "Frames" to see websocket frames
Click on the websocket request again to refresh frames
I have used Chrome extension called Simple WebSocket Client v0.1.3 that is published by user hakobera. It is very simple in its usage where it allows opening websockets on a given URL, send messages and close the socket connection. It is very minimalistic.
As for a tool I started using, I suggest firecamp Its like Postman, but it also supports websockets and socket.io.