This question already has answers here:
How to inspect WebSocket frames in Chrome properly?
(5 answers)
Closed 4 years ago.
I'm trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you should be able to see it using the network tab - and it even has a filter for 'ws'.
However I've been inspecting sites that I know are using websockets and can't find a way to inspect the messages being sent back and forth. Using Chrome v56, also tried Safari with no luck...
Does anyone know how this can be achieved?
You need to reload the page with the network tab open and filter by type 'ws'. This will show you a connection being made with a websocket. You can then click on the connection to show the traffic being sent back and forth with the server
https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#frames
Information about this traffic is nested deeper in Network tab.
Using Chrome 58+, you will see
entry about connection to the websocket, on the main Network tab listing.
This change a protocol (HTTP status 101),
so
every possible next request being websocket traffic, will be visible under Frames tab of above entry.
Of course you can have more opened connections to different websockets, aggregated on the main "Network" tab by websocket type.
Related
Currently working with Socket.IO using websockets. I have a couple of questions regarding how to interpret websockets in the chrome devtools:
When we have the following output in chrome:
Questions:
The method still is specified with the HTTP get method verb. Is this because this HTTP protocol is used to initiate the handshake?
If we have 4 type = websocket like in this example. Do we actually have 4 websocket connections?
One websockets was completed and the other 3 were still pending, what does this mean?
Yes, that's because the WebSocket handshake is an HTTP GET request. As you can see in the Status column, the server responded with "101 Switching Protocols", after which the protocol changed to the WebSocket protocol.
You seem to have one closed connection and three ongoing connections. Maybe whatever library you're using likes to create multiple connections?
The "pending" connections are active connections. The developer tools shows each connection that hasn't been closed yet as "pending". Not the most clear representation, but the dev tools were made to primarily deal with HTTP where individual requests don't last forever.
Free ProTip in case you didn't know: If you click on any of the requests and then click on the Frames tab, you can see all the WebSocket messages in real-time.
I have written a few dissectors in Lua for Wireshark, for example. I would like to know if Devtools can be extended to achieve similar effects. There are a few reasons this is desirable:
Installing and using Wireshark often mandates privileged access.
Capturing traffic from the loopback NIC on Windows remains problematic.
websocket traffic is included in saved HAR files, suitable for later dissection.
Devtools can inspect SSL secured websocket frames with zero user effort.
It's possible with Firefox.
There is an addon already that hooks into the WebSocket data. It can do some additional parsing of protocols on top of WebSockets like MQTT.
https://addons.mozilla.org/en-GB/firefox/addon/websocket-monitor/
It appears to hook into nsIWebSocketEventService to get the data. I haven't found any documentation for it.
https://github.com/firebug/websocket-monitor/blob/master/lib/wsm-actor.js#L80
Chrome does not appear to allow access to WebSocket frame data through an API.
You may be able to modify the WebSocket constructor to allow you to intercept the events from your plugin.
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/7_a0W8Y92O4
When using Internet Explorer 11 to connect to a HTTPS site of my company, the first connection is very, very slow. Usually more than 30 seconds. After this first connection, I can browse the site with no problem. The problem just happens in Internet Explorer, it works fine in Chrome and Firefox.
If after the first visit, I clear the cache and cookies, the next page load is quick. I have to close the browser and reopen it to reproduce the problem. Even if I let the browser idle for a couple of hours, the next visit is still quick. The problem is just in the first visit of a browser to this site.
Below you can see the network view of the developer toolbar:
The first connection is a HTTP connection that redirects to a HTTPS connection. This connection is very slow. The two following connections are quick. If I close my browser and visit directly the third URL via HTTPS, it will also load slowly.
Here is the Timing in the Detail view (sorry, I can't change my company browser language to English):
What can it be? How do I debug it? With this problem, it is very hard to execute automated web tests.
I've had the same problem as well. It happens only when the HTTPS site is being accessed on a machine without internet access and only using IE.
A workaround that i've applied on LAN would be to update IE settings as described below:
Go to IE Options, advanced tab then locate security category and uncheck
“Check for publisher’s certificate revocation” and “Check for server certificate revocation”.
I've only found that workaround after seeing this post, so thanks for sharing :)
Since the problem happens only with HTTPS (right?) I guess that IE tries to check the revocation status of the site on the first visit. It probably caches the result, but only for the current browser session. There might be problems to reach the server responsible for the revocation (see OCSP/CRL settings inside the certificate) and thus the connection might time out. Chrome does not check revocation in most cases and Firefox might use a shorter timeout and ignore failures. You should see the attempts to get OCSP/CRL if you do a packet capture.
I'm looking for a way to force a connection break (a way to disconnect) a browser tab.
What I'm trying to do is to test my site, where I open a websocket to the server from the browser, and then emulate a disconnection, but just on that browser tab (or even just on the browser), because I need my connection to check what happens on the server in that precise instant.
I was looking for a chrome extension to do so, but I don't find any. But any way to accomplish that would be fine.
My client OS is MacOSX 10.5
In Chrome, use Menu | Tools | Task Manager to see a list of tabs. You can kill a tab in the middle of a page load from there.
You could just kill the browser process. In that case the browser wouldn't be able to close the connection gracefully. It would pretty much look like a severed network connection to the server.
See this question on superuser.com for how to kill a process on MacOS.
An even more realistic test would be to set up a virtual machine, run the client there (or the server), and then interrupt the virtual network connection.
Another option would be to set up a local proxy server (note that few proxy servers already support WebSockets), connect to the server through this proxy, and then simulate an interrupted connection by killing the proxy. That way you could observer both the servers and the clients reaction to the event.
In chrome now there's an "offline" option, under the Network tab from the DevTools, but if you are looking for a websocket disconnection, like myself, you must be aware of this:
https://bugs.chromium.org/p/chromium/issues/detail?id=423246
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Recently, I came across an issue where a CGI application is not responding. Symptom is Firefox displaying:
Transferring data from localhost...
But the thing is I cannot see any traffic from Firebug's Net panel, and the browser just stays on the same stage forever.
I am thinking about the ways to debug this application but I cannot see the source code or any of its compiled Java/C++ components, therefore I reckon a HTTP network level of diagnostics is a good start.
I have little experience in Fiddler and Wireshark, just wondering will they get better feedback/statistics in the HTTP network level? I've heard Wireshark is advanced but could possibly introduce a large volume of traffic so system admins don't like it very much. At this time I think Firebug doesn't really show me enough information.
I need to collect information so that I can then forward to client as proof.
Wireshark, Firebug, Fiddler all do similar things - capture network traffic.
Wireshark captures any kind of network packet. It can capture packet details below TCP/IP (HTTP is at the top). It does have filters to reduce the noise it captures.
Firebug tracks each request the browser page makes and captures the associated headers and the time taken for each stage of the request (DNS, receiving, sending, ...).
Fiddler works as an HTTP/HTTPS proxy. It captures every HTTP request the computer makes and records everything associated with it. It does allow things like converting post variables to a table form and editing/replaying requests. It doesn't, by default, capture localhost traffic in IE, see the FAQ for the workaround.
The benefit of WireShark is that it could possibly show you errors in levels below the HTTP protocol. Fiddler will show you errors in the HTTP protocol.
If you think the problem is somewhere in the HTTP request issued by the browser, or you are just looking for more information in regards to what the server is responding with, or how long it is taking to respond, Fiddler should do.
If you suspect something may be wrong in the TCP/IP protocol used by your browser and the server (or in other layers below that), go with WireShark.
None of the above, if you are on a Mac. Use Charles Proxy. It's the best network/request information collecter that I have ever come across. You can view and edit all outgoing requests, and see the responses from those requests in several forms, depending on the type of the response. It costs 50 dollars for a license, but you can download the trial version and see what you think.
If your on Windows, then I would just stay with Fiddler.
Fiddler is the winner every time when comparing to Charles.
The "customize rules" feature of fiddler is unparalleled in any http debugger. The ability to write code to manipulate http requests and responses on-the-fly is invaluable to me and the work I do in web development.
There are so many features to fiddler that charles just does not have, and likely won't ever have. Fiddler is light-years ahead.
To complement the list, also be aware of http://mitmproxy.org/
I use both Charles Proxy and Fiddler for my HTTP/HTTPS level debugging.
Pros of Charles Proxy:
Handles HTTPS better (you get a Charles Certificate which you'd put in 'Trusted Authorities' list)
Has more features like Load/Save Session (esp. useful when debugging multiple pages), Mirror a website (useful in caching assets and hence faster debugging), etc.
As mentioned by jburgess, handles AMF.
Displays JSON, XML and other kind of responses in a tree structure, making it easier to read. Displays images in image responses instead of binary data.
Cons of Charles Proxy:
Cost :-)
If you're developing an application that transfers data using AMF (fairly common in a particular set of GIS web APIs I use regularly), Fiddler does not currently provide an AMF decoder that will allow you to easily view the binary data in an easily-readable format. Charles provides this functionality.