Sublime Web Inspector (SWI)

Sublime Web Inspector works on top of WebInspectorProtocol. All information is displayed in console and text files. You can click on objects from console or stack trace to evaluate them. You can also click on a file name to goto the file and line instantly. All clickable zones have borders to simply vizualize them.

You can add feature requests or bugs to https://github.com/sokolovstas/SublimeWebInspector/issues

Thanks XDebug Authors for inspiration

Installation

Execute the following command in your Sublime Packages folder:

• Sublime 2

  git clone git://github.com/sokolovstas/SublimeWebInspector.git Web\ Inspector

• Sublime 3

  git clone git://github.com/sokolovstas/SublimeWebInspector.git -b ST3 Web\ Inspector

I will prepare a plugin to Package Manager after additional testing

Features

• Breakpoints for project stored in user settings with absolute paths.
• Console.
• Debugger steps and breakpoints.
• Stack trace.
• You can see object properties and values in console and stack trace.

Commands

You can find all commands in the "Sublime Web Inspector" namespace. Here is a complete list:

Command for controlling debugger

• swi_debug_resume: Resume from pause
• swi_debug_step_into: Step into debugger
• swi_debug_step_out: Step out debugger
• swi_debug_step_over: Step over debugger
• swi_debug_evaluate: Evaluate selection (if paused on call frame)

Breakpoints

• swi_debug_breakpoint: Add remove breakpoints

Page

• swi_debug_reload: Reload connected page

Start-stop

• swi_debug_start: Start debugger
• swi_debug_stop: Stop debugger

Utils

• swi_debug_start_chrome: Start Google Chrome
• swi_show_file_mapping: Show mapping local file to url

Settings

You can change layouts for the debugger, color options, and path to Google Chrome in settings.

Additional Notes

Close Google Chrome before you run it in remote debugger mode.