How can I debug a nodejs application in vscode using Arc browser?

Question

I have recently moved to using the Arc browser and would like to use it with vs-code for development. I had run into the problem of getting it to work with any of the auto recommended settings in the launch.json file (debug configuration file) in my project. Knowing that it is chromium based I thought it would be possible, though struggled to get it to work.

I tried adding different configs in the launch.json and tried to either use the default launch config which ended up not working since Arc did not allow using more than one instance of itself at a time. I then tried to use the attach config which seems to be the way to go. The only part that I missed, is setting Arc to launch itself in debugging mode where it is listening on port 9222 (this is not the port that your project will be running on, it is the default port for the attach request of the configuration).

Answer 1

I have figured out how to debug with Arc (on Mac, so in the future if there is a Windows application, please adjust accordingly).

Here is the configuration in vs-code that I used:

{
    "name": "Attach",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
}

You will need to go into the Automator application on Mac (cmd+space then type automator). It will ask you what type your document will be, choose application. Now you will be in the library actions area where you need to serach for: "Run Shell Script", then in the scripting area that will appear, place the following:

open -a "Arc" --args --remote-debugging-port=9222

Then save the by going to the top, hovering on file and pressing save (save it as something you will remember).

Now you can search for its name and run it (it will be useful to save it on your desktop or dock). It will open Arc, where when going to the desired url, you will now be able to debug in vs-code.