It's frustrating to decipher the websocket frames in Chrome Dev Tools, so I setup a workflow to use Sublime Text to display the frames as JSON.
- Sublime Text installed
- Package PrettyJSON is installed (https://github.com/dzhibas/SublimePrettyJson)
- Package RegReplace is installed (https://github.com/facelessuser/RegReplace)
Go to Sublime Text Preferences > Package Settings > Reg Replace > Settings - User
and add the following:
{
"replacements":{
"remove_surrounding_brackets":{
"find":"^\\[\"|^a\\[\"|\"\\]$",
"replace":""
},
"unescape_slashes" : {
"find": "\\\\\\\\",
"replace": "\\\\",
"greedy_replace": true
},
"unescape_quotes" : {
"find": "\\\\\"",
"replace": "\"",
"greedy_replace": true
}
}
}
Save the file. This file allows RegReplace to replace the beginning ["
or a["
and ending "]
of a websocket frame, and also to unescape the quotes.
The included file run_multiple_commands.py (Taken from http://www.sublimetext.com/forum/viewtopic.php?f=5&t=8677) should be placed in the ~/Library/Application Support/Sublime Text 3/Packages
directory for a mac, or the equivalent directory for other OS's.
It allows us to run multiple commands (ie: RegReplace and PrettyJSON) from a key binding.
Go to Sublime Text Preferences > Key Bindings - User
and add the following:
[
{
"keys":["ctrl+shift+super+j"],
"command": "run_multiple_commands",
"args": {
"commands": [
{"command": "reg_replace", "args": {"replacements": ["remove_surrounding_brackets","unescape_slashes","unescape_quotes"]}},
{"command": "pretty_json"}
]
}
}
]
Here, I set the key binding to Ctrl + Shift + Super + J
, where Super
is the Command
key on a mac.
Go to a web page with websockets that use JSON, open Chrome Developer Tools, select Network, filter by WS, select the websocket, select Frames, copy a frame's text, paste it into Sublime Text, and use your keybinding to turn it in to pretty json.