ii0/chrome-debug

For debugging in VS Code on the Mac: a double-clickable icon which will start Chrome with "--remote-debugging-port=9222"

Chrome-debug

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:

Enable remote debugging on Chrome by default on mac?

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:

1. Is there a way to modify Chrome's configuration file so that it always starts with that flag set?
2. Is that a stupid thing to do?
3. Do I really need the sudo in the line above? Some sources do not have it.
4. 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.

https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html

https://developer.apple.com/library/archive/documentation/CoreFoundation/Conceptual/CFBundles/BundleTypes/BundleTypes.html#//apple_ref/doc/uid/10000123i-CH101-SW1