{"id":593,"date":"2024-01-28T20:37:13","date_gmt":"2024-01-28T15:07:13","guid":{"rendered":"http:\/\/codetheory.in\/?p=593---1604a87a-8cd1-4f82-a1e3-62bb2fa1018c"},"modified":"2024-01-28T20:37:13","modified_gmt":"2024-01-28T15:07:13","slug":"websocket-traffic-inspection-in-chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/codetheory.in\/websocket-traffic-inspection-in-chrome-developer-tools\/","title":{"rendered":"WebSocket Traffic Inspection in Chrome Developer Tools"},"content":{"rendered":"<p>Just like debugging any other thing, doing the same for websocket traffic can be really useful. Not sure if firebug does that, but inspecting your websocket traffic in chrome dev tools is definitely possible.<\/p>\n<p><!--more--><\/p>\n<h2>Some Code First<\/h2>\n<p>Whenever dealing with websockets, I find myself mostly working with <a href=\"http:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">Node.js<\/a> and <a href=\"http:\/\/socket.io\/\" target=\"_blank\" rel=\"noopener\">Socket.IO<\/a>. You can setup a quick node server that does websocket data transfer back and forth with socket.io. Check out <a href=\"https:\/\/github.com\/learnboost\/socket.io#readme\" target=\"_blank\" rel=\"noopener\">some code here<\/a> to get started.<\/p>\n<p>If you are reading this post, then you probably already have an app that&#8217;s leveraging the power of websockets to do something in realtime.<\/p>\n<h2>How to Inspect ?<\/h2>\n<p>Take the following steps:<\/p>\n<ol>\n<li>Open Chrome Dev Tools.<\/li>\n<li>Click <strong>Network<\/strong> Tab.<\/li>\n<li>Filter the traffic by clicking <strong>WebSockets<\/strong> in the bottom-most bar.<\/li>\n<li>Find your proper websocket connection and click it.<\/li>\n<li>Now you will see a new pane appear with <em>Headers<\/em> and <em>Frames<\/em> tab. Click the <strong>Frames<\/strong> tab.<\/li>\n<\/ol>\n<div><a href=\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/websockets_chrome_inspection.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-594\" title=\"websockets_chrome_inspection\" src=\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/websockets_chrome_inspection.png\" alt=\"WebSockets Chrome Debugging\" width=\"752\" height=\"375\" \/><\/a><\/div>\n<div><span style=\"line-height: 24px;\"><br \/>\n<\/span><\/div>\n<p>Note: Unfortunately, the Frames pane showing messages does not refresh automatically in realtime. To refresh the data table, click that connection again from the <em>Network<\/em> tab&#8217;s <em>Name<\/em> Column.<\/p>\n<p>Chrome version used is 22, but I also remember inspecting in Chrome 20 or so.<\/p>\n<p>Happy WebSockets Debugging!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just like debugging any other thing, doing the same for websocket traffic can be really useful. Not sure if firebug does that, but inspecting your websocket traffic in chrome dev tools is definitely possible.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[64,63],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/593"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=593"}],"version-history":[{"count":7,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/593\/revisions"}],"predecessor-version":[{"id":184678,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/593\/revisions\/184678"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}