View Chrome Websocket Frames as Formatted JSON

README.md

How to View Chrome Websocket Frames as Formatted JSON

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.

Prerequisites

• Sublime Text installed
• Package PrettyJSON is installed (https://github.com/dzhibas/SublimePrettyJson)
• Package RegReplace is installed (https://github.com/facelessuser/RegReplace)

Add RegReplace Settings

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.

Install Multiple Command plugin

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.

Add 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.

Try it

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.

run_multiple_commands.py

# run_multiple_commands.py
import sublime, sublime_plugin

# Takes an array of commands (same as those you'd provide to a key binding) with
# an optional context (defaults to view commands) & runs each command in order.
# Valid contexts are 'text', 'window', and 'app' for running a TextCommand,
# WindowCommands, or ApplicationCommand respectively.
class RunMultipleCommandsCommand(sublime_plugin.TextCommand):
  def exec_command(self, command):
    if not 'command' in command:
      raise Exception('No command name provided.')

    args = None
    if 'args' in command:
      args = command['args']

    # default context is the view since it's easiest to get the other contexts
    # from the view
    context = self.view
    if 'context' in command:
      context_name = command['context']
      if context_name == 'window':
        context = context.window()
      elif context_name == 'app':
        context = sublime
      elif context_name == 'text':
        pass
      else:
        raise Exception('Invalid command context "'+context_name+'".')

    # skip args if not needed
    if args is None:
      context.run_command(command['command'])
    else:
      context.run_command(command['command'], args)

  def run(self, edit, commands = None):
    if commands is None:
      return # not an error
    for command in commands:
      self.exec_command(command)