For debugging in VS Code on the Mac: a double-clickable icon which will start Chrome with --remote-debugging-port=9222
This is an answer to the following question on Stack Overflow:
I am working on getting the VS Code debugger to attach to Chrome as part of my regular workflow.
I keep Chrome running all the time, and the highly-regarded VS Code Live Server extension opens my project in a new tab, which I like. I would like to be able to attach the VS Code debugger to this instance, but it looks like I have to start Chrome from the command line with
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Several questions:
- Is there a way to modify Chrome's configuration file so that it always starts with that flag set?
- Is that a stupid thing to do?
- Do I really need the
sudo
in the line above? Some sources do not have it.- Alternatively, is there a way to create a desktop/toolbar shortcut to chrome that will start it will remote debugging enabled?
Apparently it is possible to use Automator to turn a shell script into an app, but before I learned that, I found out that there are various ways that used to work that are now broken, and one simple way that still works. There is also a way to make a double-clickable shell script, but it will open a Terminal window.
This repo contains the "Chrome-debug" app, and an icon to paste on it, which is basically the Chrome icon with "9222" written on it so as to remember that this is the debugging version of Chrome.
To make it work, may need to execute this shell command
chmod +x Chrome-debug.app/Chrome-debug
in the root of the project (I didn't, when I tested it).
Also, open chrome-debug-icon.png
(not .psd
) in Preview, select all, and copy. Right-click the Chrome-debug
app > Get Info.
Click on the small icon in the upper-lefthand corner, and hit paste. The correct icon should now be attached to the "app."
The guts of is this one-line shell script (yes, I did not use sudo
):
#!/bin/bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222&
It shouldn't be too difficult to build a more robust "bundle" which would not need to have the custom icon pasted on. It would involved building a bundle with a plist
file, either by hand or by using Xcode. But that would be a project for another day.