Chrome Debugging in VSCode

I’ve tried giving VSCode a couple of tries in the past and I never could see it replacing my tried and true IDE of choice – Sublime Text …until possibly now. Sublime Text is an amazingly fast editor (faster than VSCode), but for some of VSCode’s quirks, I’m actually finding it to be a potential replacement now in its current iteration, and Chrome Debugger is the real clincher.

Keyboard Shortcuts

The Chrome Debugger comes pre-configured with the same F key shortcuts that Chrome uses, but if you’re running one of those terrible Macbooks with the touch bar (or using a fancy 60% or smaller mechanical keyboard with no F row), you might want to mirror the alternative shortcuts. Add these to your VSCode’s keybindings.json file:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

[

{

"key":"cmd+r",

"command":"workbench.action.debug.restart",

"when":"inDebugMode"

},

{

"key":"cmd+\\",

"command":"workbench.action.debug.continue",

"when":"inDebugMode"

},

{

"key":"cmd+;",

"command":"workbench.action.debug.stepInto",

"when":"inDebugMode"

},

{

"key":"shift+cmd+;",

"command":"workbench.action.debug.stepOut",

"when":"inDebugMode"

},

{

"key":"cmd+'",

"command":"workbench.action.debug.stepOver",

"when":"inDebugMode"

}

]

Note that I didn’t include an override to start debug mode. I left this as the default F5 shortcut so I don’t accidentally enter it.

Configuring your project

I’ve been building a few applications lately using the Create React App boilerplate as my foundation and found getting it up and running with VSCode is a very easy task. Once the Chrome Debugger extension is installed in VSCode, all you need to do is add a .vscode/launch.json file to your project with this content:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

{

"version":"0.1.0",

"configurations":[

{

"name":"Launch localhost",

"type":"chrome",

"request":"launch",

"url":"http://localhost:3000",

"webRoot":"${workspaceFolder}/src",

"skipFiles":[

"node_modules/**/*.js"

]

}

]

}

That’s it! When you start Chrome Debugger from VSCode it will launch a new instance of Chrome with debugging mode enabled and you can use that for your application preview and debugging workspace.

Unfortunately…

Unfortunately this new Chrome instance is an ad-hoc launch under an ephemeral user profile, which means no extensions. When building a React application, some extensions like React Developer Tools and Redux DevTools are critical tools for building and it just isn’t practical to install these every time you start debug mode.

Luckily, Chrome Debugger supports the ability to attach to an existing Chrome instance! Simply launch Chrome with the --remote-debugging-port=9222 flag and you’re good to go. If you’re developing in a Windows environment, adding this flag is as simple as modifying your Chrome shortcut and adding it. On a Mac however this is a little more …obtuse. The solution presented in the Chrome Debugger extension docs is “just launch it from the command line”. If you are developing on a daily basis, this is obnoxious. I would much prefer to launch using Alfred, Spotlight, or a dock shortcut and just always have remote debugging enabled.

Enter Automator

Mac OS provides a little tool called Automator and this will be our gateway to launching Chrome with debugging mode enabled from other vectors besides the command line. The solution isn’t perfect as you end up with essentially a separate application to launch. This results in two Chrome icons on your dock (not to mention the little Automator gear in your menu tray), but in my mind the convenience trumps those minor diversions.

So, without further ado, let’s get started:

Open Automator

Choose Application when it prompts you for what kind of automation you want to make

Save your automation somewhere with a convenient name you can reference (e.g. Google Chrome Debug Mode) I saved mine to ~/Applications so it would appear in my Alfred list.

That’s it! Just run the automation instead of Chrome directly. As mentioned, you will see two icons in your dock because the automation application isn’t Chrome. I just added my automation application to my dock and removed the normal Chrome entry.

If you want the same icon as the normal Chrome shortcut:

Open Finder and navigate to /Applications

Find Google Chrome in the list of applications and Get Info on it

Click the little Chrome icon in the upper left of the window (not the big one at the bottom) and hit cmd+c to copy it to the clipboard

Find your automation application and Get Info on it

Click the Automator icon in the upper lift and hit cmd+v to paste in the copied Chrome icon

Updating your VSCode project

Doing all this will give you an automator application that you can launch in place of launching Chrome directly. All that’s left to do is tell your VSCode project to attach to the existing Chrome instance instead of launching a new one. To do this, simply modify your .vscode/launch.json file to replace this:

Doing all this will launch Chrome with all your profiles and extensions available to you aaaand you can change your .vscode/launch.json config from:

1

2

3

4

5

6

{

"request":"launch"

}

with this:

1

2

3

4

5

6

7

{

"request":"attach",

"port":9222

}

Chrome debugger will now automatically attach itself to your running application and allow you to debug in editor. Now you can debug in VSCode and use things like the React Developer Tools extension or Redux DevTools extension in Chrome itself to debug issues. Now, with the recent launch of Chrome 63 and Multi-client remote debugging support, debugging won’t get all screwed up either having the Chrome dev tools and VSCode Chrome Debugger running at the same time.