How to inspect websockets in Chrome's network panel
Jul 22, 2025 am 12:49 AMTo view WebSocket communication, first open the Chrome developer tool and switch to the Network panel; secondly click on the WS tag or enter ws: to filter the request; then click on the specific entry and view the sending and receiving messages under the Messages tag; you can use Filter to filter keywords to distinguish between Sent and Received data; if it is JSON data, it will be automatically formatted, and binary will be displayed as a byte stream; when troubleshooting problems, you can view the connection status and response code 101 in Headers, check whether the request header has authentication information, find error prompts in Messages, and check the reason for disconnection such as 1006 is closed abnormally in General; at the same time, confirm whether the front-end calls new WebSocket(url) correctly and whether there are cross-domain problems.
After opening Chrome Developer Tools, it is not difficult to check WebSocket communications, but many people may not find the specific location at the beginning. The key is to choose the right tag, seize the right opportunity, and be able to understand the sending and receiving information inside.

Find the WebSocket request
First, trigger a WebSocket connection on the page (such as opening a chat window or real-time data panel), and then open Chrome DevTools (F12 or right-click to check). Switch to the Network panel and you will see a bunch of network requests. At this time, click on the WS tag at the top, or enter ws:
in the filter box to display only WebSocket type connections.
Usually you will only see one or two entries, their status is (websocket)` , not the common XHR
or Doc
. Click one of them and the details will appear on the right.

View the content of WebSocket communications
After clicking on a WebSocket request, you will see several subtitles, the most important of which is Messages . Under this tag, messages sent by the client and the server will be displayed.
- Filter can help you filter specific content, such as entering keywords to see messages containing them only.
- Messages are divided into two columns: Sent and Received , representing the content sent and received by the browser, respectively.
- If it is JSON data, Chrome will generally format it automatically for easy reading; if it is binary data, you can only see the original byte stream.
Sometimes you see heartbeat packages (such as receiving a "ping"
or "pong"
every few seconds), which is a common mechanism for WebSocket to maintain connections.

Frequently Asked Questions Tips
When there is a problem with WebSocket, you can start from the following aspects:
- Check the connection status : Under the Headers tab, see if the connection is successfully established. The response code should be
101 Switching Protocols
. - Check request headers and response headers : Confirm whether there is necessary authentication information (such as tokens) or custom header fields.
- Check if there is an error message in Messages : Some servers will send an error message before disconnecting, telling you the reason.
- Observe the reason for closing : If the connection is disconnected, you can see the closing code and reason in the General area, such as
1006 Abnormal Closure
indicates an exception interruption.
If you find that WebSocket has not been successfully established, you can first check whether the front-end code calls new WebSocket(url)
and then confirm whether the URL is correct and whether there are cross-domain problems.
Basically that's it. Debugging WebSockets is not complicated, but it is indeed easy to ignore some details, such as message order, disconnection timing, etc. By mastering these steps, it will be much easier to troubleshoot most problems.
The above is the detailed content of How to inspect websockets in Chrome's network panel. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

To prevent Chrome from automatically updating on Mac, it can be done by disabling update services, modifying permissions, and restricting network access. 1. Use terminal commands to disable the GoogleSoftwareUpdate daemon to prevent background updates; 2. Modify update directory permissions to prevent Chrome from starting the update process by itself; 3. Restrict Chrome's outbound network connection through system firewall or third-party tools to further eliminate update requests. Using these methods in combination can effectively prevent Chrome from being automatically updated.

To let Chrome download directly instead of opening it when clicking on the PDF link, 1. Enter chrome://settings/content/pdfDocuments to check "DownloadPDFfilesinsteadofautomatically opening theminChrome"; 2. Check whether there are plug-ins such as Lightpdf or Smallpdf interfering behavior, you can try to disable the test; 3. You can use the developer tools to copy the link and paste the new tag to trigger the download. The above methods can be selected according to the situation.

The screen tear occurs when the Chrome browser scrolls, which is usually caused by the out-of-synchronization of rendering and refresh. The solutions are as follows: 1. Ensure that hardware acceleration is enabled, you can manually check the settings and restart the browser; 2. Forcefully enable Compositor and related options to optimize rendering; 3. Check the display refresh rate, use single-screen testing, and enable VSync or adaptive synchronization technology on supported devices; 4. Update the graphics card driver or replace the display interface such as using the DP interface. It is recommended to start the troubleshooting with simple steps and gradually adjust to find the best configuration.

The problem of Chrome sync stuck can be solved through the following steps: 1. Check the network connection and Google account status to ensure normal access; 2. Log out and log in to the Chrome account again; 3. Clear the synchronized data and restart the browser; 4. Reset Chrome settings; 5. Try the traceless mode or new user profile. Sequentially checking can effectively restore the synchronization function.

The problem of Chrome automatically popping up new tabs is usually caused by malicious extensions, advertising scripts, or browser hijacking. The solutions are as follows: 1. Check and uninstall suspicious extensions, especially ad-class plug-ins; 2. Clear browser caches and cookies to eliminate data corruption; 3. Check whether the homepage and default search engine settings have been tampered with and manually corrected; 4. Use antivirus software such as WindowsDefender or Malwarebytes to scan and clear potential malware; 5. Finally, try resetting Chrome settings to restore the default configuration. Troubleshooting in this order can effectively solve most abnormal labeling problems.

1. Check whether the shortcut attribute has additional parameters and delete it; 2. Clear cache and switch startup settings, or create new user information; 3. Extend the impact and disable the problem plug-in through traceless mode. Chrome pops up new windows instead of tabs usually due to exceptions in shortcut parameters, cache configuration conflicts, or third-party extension interference. Check and adjust the corresponding settings in turn to resolve.

Chrome printing exceptions can be solved in the following ways: 1. Check the printer selection, paper size, orientation, zooming and background graphics settings in the print preview; 2. Try stealth mode to eliminate extended interference and clear cache; 3. Update or reinstall the printer driver, replace the general driver or use the "Print as PDF" method; 4. Finally, you can reset the Chrome settings to restore the default. Most problems can be solved through the first few steps. If they still fail, you can export PDF to print.

Chrome's "Contrast Ratio" check tool can be found directly under the "Computed" panel of the developer tool, which is used to determine whether the text and background colors meet the accessibility standards. Select the text element when using it, open the color selector next to the "color" property, and the contrast ratio will be displayed at the bottom. If it is below the standard, a red warning will be displayed, and if it is met, it will be green. The WCAG standard requires at least 4.5:1 text and at least 3:1 large fonts to ensure that people with visual impairment can also read clearly. Common questions include light-colored text, similar color matching or picture background interference, etc. This tool is suitable for casual inspection when debugging styles, especially when modifying color schemes or repairing UI components, and it is recommended to evaluate translucent or
