At the time this was written, the Package Control didn't include a Sublime Text 3 version of SWI. So, we'll need to install it manually by cloning the ST3 branch on the SWI repository on GitHub. Let's start by opening our packages directory from the Sublime Text menu by navigating to Preferences | Browse Packages…. This will open up the packages directory. We'll need to navigate to this directory from the console; in Windows, we can do it simply by Shift + right-click | Open command window here, while on Linux and OS X, we'll need to use cd to navigate manually from the terminal. After we are in the packages directory, we need to clone the right branch by executing the following:

git clone -b ST3 "git://github.com/sokolovstas/SublimeWebInspector.git"

To test out the installation, we'll open the command palette and go to Web Inspector | Start Google Chrome with remote debug port 9222; this should open up Chrome. If we get an error message saying The system cannot find the file specified, we'll need to change the path for our chrome installation. We'll do it by going to the cloned directory and edit swi.sublime-settings to fit our needs:

// Path to google chrome
   "chrome_path": {
      "osx": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "windows": "C:\Users\Danpe\AppData\Local\Google\Chrome\Application\chrome.exe",
      "windows_x64": "C:\Users\Danpe\AppData\Local\Google\Chrome\Application\chrome.exe",
      "linux": "/usr/bin/google-chrome"
   },

Make sure that all Chrome windows are closed before opening with the debug port and the path settings are correct. Chrome won't open in the debug mode if another Chrome window is already open.

After opening Chrome in the debug mode, we will call the Web Inspector again by pressing Ctrl + Shift + R on Windows or Linux, and Command + Shift + R on OS X. We should see the Start debugging and Add/Remove Breakpoint commands, as shown in the following screenshot:

Clicking on Start debugging will give us a list of all currently open tabs in Chrome. We'll choose the one that we wish to debug. We will see a screen similar to the following screenshot:

We can see all our debug prints as well as warnings and errors inside the console. While making a change and saving, the page will get auto refreshed. Let's try it by changing a to b where b isn't a real variable, and see what happens:

Oops! We got an error. We can see where the breakpoint stopped (Resume, Step Over, Step Into, and Step Out). We can also add our own breakpoint by calling the Web Inspector and clicking on Add/Remove Breakpoint. SWI exposes its commands so we can bind any keys to those commands. The following is a list of all the exposed commands: