How do I enable editable debugging of files within VS Code w/ Chrome Debugging?

Question

Environment:

• OS: macOS Big Sur 11.5.2 (20G95)
• Chrome: Version 93.0.4577.82 (Official Build) (x86_64)
• VSCode: Version: 1.60.1 Commit: 83bd43bc519d15e50c4272c6cf5c1479df196a4d Date: 2021-09-10T17:09:14.403Z (5 days ago) Electron: 13.1.8 Chrome: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Darwin x64 20.6.0

---

My action:

1. {VSCode} Open the workspace containing my project directory.
2. {VSCode} Add the following block to 'launch.json' in the "configurations" array:

{
   "type": "pwa-chrome",
   "request": "attach",
   "name": "Attach Chrome Debugging to Browser for VSCode",
   "port": 9222,
   "url": "http://localhost:8888/",
   "urlFilter": "http://localhost:8888/*",
   "webRoot": "${workspaceFolder}"
}

3. {VSCode} Save 'launch.json'
4. {Chrome} Close all running instances of Chrome
5. {Terminal} Navigate to root (/)
6. {Terminal} Run the command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

Outcome:

1. {Chrome} Application opens with a popup (not as expected):
   

---

My action:

1. {Chrome} Click "Ok" button.

Outcome:

1. {Chrome} A window opens prompting "Who's using Chrome?" with an option to select my desired user profile as expected.

---

My action:

1. {Chrome} Click on my desired user profile.

Outcome:

1. {Chrome} A window opens with my desired user profile logged in as expected.

---

My action:

1. {VSCode} Add a breakpoint to my code via a debugger; statement in my HTML file.
2. {VSCode} Click "Run" button with my debugging profile selected.
3. {Chrome} Conduct behavior to trigger breakpoint in my code.

Outcome:

1. {VSCode} The breakpoint is triggered HOWEVER: it is triggered in a "read-only" version of my file, opened in a new tab separate from my actual file.

---

My Desired Outcome

Using "attach" I want to be able to have the breakpoint activate inside of the actual file in VSCode, not a "Read-Only" version.

---

I've spent about two hours researching this issue and as far as I can tell it has to do with:

• The location I'm running the terminal command from. I tried:
  • Running it from the project directory, however it dumped a ton of code into my project directory AND failed to open an instance of Chrome where I could select my desired user profile - instead opening up a user profile agnostic Chrome window.
• The --user-data-dir=remote-debug-profile line in the terminal command.
• My configuration in Launch.JSON. I've tried combinations of:
  • "type": "chrome"
  • "webRoot": "*/thedirectpathtomyprojectdirectory*"
  • "webRoot": "${workspaceFolder}/src"
  • "userDataDir": "/Library/Application\ Support/Google/Chrome/Profile 1"
  • "userDataDir": "/Library/Application\ Support/Google/Chrome"
  • "sourceMapPathOverrides": {"webpack://?:*/*": "${workspaceFolder}/*"}
  • "sourceMaps": true

I'm at a total loss!

Answer 1

The problem is with --user-data-dir=remote-debug-profile

See here - https://chromium.googlesource.com/chromium/src/+/HEAD/docs/user_data_dir.md

You need to supply an actual directory path.

1. Copy your current User Data folder to your custom dir

2. Point chrome shortcut to the custom dir using the --user-data-dir parameter