How do you get VSCode to debug with Chrome

Question

将 VS Code附加到 Chrome 以进行调试会话的步骤是什么？

Answer 1

1) Install Debugger for Chrome in VS Code

2) Close all sessions of Chrome and then open an instance of Chrome in debugging mode. This can be done one of two ways. First, edit a Shortcut on your desktop (Properties and then Target) so that Chrome starts with this: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --remote-debugging-port=9222 (and YES, the double quotes are necessary if the directory for Chrome has any spaces in the address). Alternatively you can open a Terminal from within VSCode (I use the CMD.exe option) and execute: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --remote-debugging-port=9222

3) Running IIS Express is not necessary.

4) Copy the path of your web page from File Explorer and paste into the address bar of Chrome. For example paste the following into the address bar of Chrome: file://D:/Data/VSCode/iisstart.html

5) Open launch.json. I use a very simple configuration. Using Attach rather than Launch allows me to keep all the extensions in Chrome I typically use for development.

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
    },

6) Click on the Start Debugging button from the Debugging tab

7) If all works as anticipated you should see the debugging menu bar with the connection icon at the top of the VSCode screen.

That's what it took me to get VS Code to debug.