Chrome Web Inspector Web Socket Debugging

后端 未结 3 1676
心在旅途
心在旅途 2020-12-02 13:02

I can use the Network tab in the Google Chrome Web Inspector to debug the network traffic (AJAX requests, etc.). I can check what data is transferred easily

相关标签:
3条回答
  • 2020-12-02 13:42

    Chrome and Chromium now have WebSocket message frame inspection. Here are the steps to test it quickly:

    1. Navigate to the WebSocket Echo demo, hosted on the websocket.org site.
    2. Turn on the Chrome Developer Tools.
    3. Click Network, enable filter (3rd icon from the left on the top of Dev Tools) to filter the traffic shown by the Developer Tools, and click WebSockets.
    4. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
    5. Click the Send button in the Echo demo.
    6. To see the WebSocket frames in Chrome Developer Tools, under Name, click the 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.

    I also posted the steps with screen shots and video. enter image description here

    0 讨论(0)
  • 2020-12-02 13:53

    Another Idea, for simple web socket testing and lightweight, use Chrome plugin "Simple Web-socket. I wanted to check only if the connection can be establish or not. Following Chrome plugin "Simple Web-socket (link : https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en)" work like charm. See image.

    https://lh3.googleusercontent.com/bEHoKg3ijfjaE8-RWTONDBZolc3tP2mLbyWanolCfLmpTHUyYPMSD5I4hKBfi81D2hVpVH_BfQ=w640-h400-e365

    0 讨论(0)
  • 2020-12-02 14:00

    After some more research I found a duplicate question here: Debugging WebSocket in Google Chrome

    Chrome does't support viewing the traffic in the current stable version. I need to use Wireshark.

    0 讨论(0)
提交回复
热议问题