1. 技术文章
  2. Debug with Visual Studio Code not working

Debug with Visual Studio Code not working

由 泄露秘密 提交于 2019-11-28 06:57:02

I was able to solve this problem on OSX. The reason it's such a pain is there are multiple things causing the issue.

  1. You hit on the first with --user-data-dir=remote-profile: If you're already running Chrome (for example, already have tabs open - who doesn't?), you have to use a different userDataDir to have Chrome launch an independent instance.
    The correct way to do this, however, is to add "userDataDir": "${workspaceRoot}/.vscode/chrome", to your launch.json configuration (see below). This needs to be a path. If 'remote-profile' is used it attempts to find a relative directory named 'remote-profile'.
  2. You need to set sourceMapPathOverrides in your launch.json config, the value of which depends on your OS:
    OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
    Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
    Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
    (Note: I have not tested the Windows or Linux versions)

Here is my working launch.json on OSX:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

For this to work, run ng serve in a terminal, then hit F5 inside of Visual Studio Code.


Here are the versions I'm working with:

  • angular-cli: 1.0.0-beta.24
  • node: 7.3.0
  • Chrome: 55.0.2883.95
  • Visual Studio Code: 1.8.1
  • VSCode Extension "Debugger for Chrome" msjsdiag.debugger-for-chrome: 2.4.2

I finally get it fully working !!!

For those interested :

(using chromium-browser on Linux but you can easily just replace by "chrome").

First, here's the launch.json config :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

I decided to remove the part with "request": "launch" as I need to launch a new browser window.

Then, launch the browser like that :
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

In the new window, access to http://localhost:4200.

Then from VSC, run the debug.

Everything should work just fine and you should be able to use breakpoints :)

GIF available here to see it in action : http://hpics.li/0156b80

Similar to Aaron F. ans I use the following setting for Angular 2+ develop in Windows environment

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

I'm using Angular CLI 1.7.3 and Angular: 5.2.9 on Mac OSX. Here is the configuration which is working for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

The following configuration works well for me on macOS using VSCode v1.23, Angular 6, and Chrome 66.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

I had the same issue using windows-vscode and my launch.json is as follows:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

Then I installed chrome debug extension from here and then error resolved.

You can directly install this extension from:

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install

You may need to restart vscode.

I got wierd issue with launch.json provided by Aaron F.

".scripts" in debugger command line give urls like this:

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

so VS Code trying to use file "/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts" (notice webpack: in the middle).

Source maps does not work, because my Chrome give url as "webpack:/" with ONE slash.

In got it working with this launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

and got correct mapping

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
  • Ubuntu: 16.04
  • Chrome: 64.0.3282.186
  • VSCode: 1.20.1
  • Angular CLI: 1.7.2
  • Node: 7.10.1

You just need to install the Debugger for Chrome extension.

标签
angular
google-chrome-devtools
visual-studio-code
angular-cli
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!