search

microsoft / vscode-js-debug

A DAP-compatible JavaScript debugger. Used in VS Code, VS, + more
MIT License
1.68k stars 284 forks source link

Unbound breakpoint when debugging angular/cli app with chrome #917

Closed alfmos closed 3 years ago

alfmos commented 3 years ago

I have installed Chrome extension I have set sourcemap to true in angular.json I have installed vs-code recipes from

https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI

I even tried to set debug.javascript.usePreview to false but no way. As the application starts all breakpoints become "Unbound breakpoint"

Log File vscode-debugadapter-2f4fe0b6.json.gz Launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "trace": true,
        "preLaunchTask": "npm: start",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"

        }
      },
      {
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"
        }
      },
      {
        "name": "ng e2e",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
        "protocol": "inspector",
        "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
      }
    ]
  }

Tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "analyze",
            "problemMatcher": [],
            "label": "npm: analyze",
            "detail": "npm run build:prod -- --stats-json && webpack-bundle-analyzer ./dist/angular-ngrx-material-starter/stats-es2015.json"
        },
      {
        "type": "npm",
        "script": "start",
        "isBackground": true,
        "presentation": {
          "focus": true,
          "panel": "dedicated"
        },
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "problemMatcher": {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": [
            "relative",
            "${cwd}"
          ],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "Compiled |Failed to compile."
            }
          }
        }
      },
    ]
  }

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-ngrx-material-starter": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "changeDetection": "OnPush",
          "style": "scss"
        }
      },
      "root": "projects/angular-ngrx-material-starter",
      "sourceRoot": "projects/angular-ngrx-material-starter/src",
      "prefix": "anms",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-ngrx-material-starter",
            "index": "projects/angular-ngrx-material-starter/src/index.html",
            "main": "projects/angular-ngrx-material-starter/src/main.ts",
            "polyfills": "projects/angular-ngrx-material-starter/src/polyfills.ts",
            "tsConfig": "projects/angular-ngrx-material-starter/tsconfig.app.json",
            "aot": true,
            "assets": [
              "projects/angular-ngrx-material-starter/src/favicon.ico",
              "projects/angular-ngrx-material-starter/src/assets"
            ],
            "styles": [
              "projects/angular-ngrx-material-starter/src/styles-app-loading.scss",
              "projects/angular-ngrx-material-starter/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/angular-ngrx-material-starter/src/environments/environment.ts",
                  "with": "projects/angular-ngrx-material-starter/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "bundle",
                  "name": "polyfills",
                  "baseline": "150kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "styles",
                  "baseline": "280kb",
                  "maximumWarning": "50kb",
                  "maximumError": "100kb"
                },
                {
                  "type": "bundle",
                  "name": "main",
                  "baseline": "1024kb",
                  "maximumWarning": "100kb",
                  "maximumError": "200kb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-ngrx-material-starter:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-ngrx-material-starter:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-ngrx-material-starter:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/angular-ngrx-material-starter/src/test.ts",
            "polyfills": "projects/angular-ngrx-material-starter/src/polyfills.ts",
            "tsConfig": "projects/angular-ngrx-material-starter/tsconfig.spec.json",
            "karmaConfig": "projects/angular-ngrx-material-starter/karma.conf.js",
            "assets": [
              "projects/angular-ngrx-material-starter/src/favicon.ico",
              "projects/angular-ngrx-material-starter/src/assets"
            ],
            "styles": [
              "projects/angular-ngrx-material-starter/src/styles-app-loading.scss",
              "projects/angular-ngrx-material-starter/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "projects/angular-ngrx-material-starter/src/environments/environment.ts",
                  "with": "projects/angular-ngrx-material-starter/src/environments/environment.test.ts"
                }
              ]
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/angular-ngrx-material-starter/tsconfig.app.json",
              "projects/angular-ngrx-material-starter/tsconfig.spec.json",
              "projects/angular-ngrx-material-starter/e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/angular-ngrx-material-starter/e2e/protractor.conf.js",
            "devServerTarget": "angular-ngrx-material-starter:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular-ngrx-material-starter:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "angular-ngrx-material-starter",
  "cli": {
    "analytics": false
  }
}

My setup Version: 1.52.1 (user setup) Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523 Date: 2020-12-16T16:34:46.910Z Electron: 9.3.5 Chrome: 83.0.4103.122 Node.js: 12.14.1 V8: 8.3.110.13-electron.0 OS: Windows_NT x64 10.0.18362

CPUs Intel(R) Core(TM) i3 CPU M 370 @ 2.40GHz (4 x 2394)
GPU Status 2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: unavailable_off opengl: enabled_on protected_video_decode: enabled rasterization: unavailable_off skia_renderer: disabled_off_ok video_decode: enabled vulkan: disabled_off webgl: enabled webgl2: unavailable_off
Load (avg)  
Memory (System) 5.79GB (0.59GB free)
Process Argv --file-uri file:///c%3A/Users/Alfonso%20Moscato/Desktop/Angular/Agile_Web_Client/projects/angular-ngrx-material-starter/agile_web_client.code-workspace --crash-reporter-id 2fbc197e-e899-4abc-a84c-ac331fcbf894
Screen Reader no
VM 0%
connor4312 commented 3 years ago

Try removing the sourceMapPathOverrides section. The defaults should be good.

alfmos commented 3 years ago

I will. I'll let you know

alfmos commented 3 years ago

I tried, but no difference. Now my launch.json is:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "trace": true,
        "sourceMaps": true,
        "preLaunchTask": "npm: start",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
      },
      {
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
      },
      {
        "name": "ng e2e",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
        "protocol": "inspector",
        "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
      }
    ]
  }

Log vscode-debugadapter-0874ca30.json.gz

Any ideas? Thanks

alfmos commented 3 years ago

I have news, I am afraid not very helpful. I did the upgrade to angular 11. Suddenly, without changing a single row of code, except for the ones changed automatically by the upgrade process, the debugger has started working, emitting very strange errors on startup, but anyway working. I've tried to find references to these errors, but found nothing, except for an obscure reference in the chromium project. Launching the app without debugger doesn't show any error, so they could come from the debugger for chrome extension. Let me know if I can help someway. The errors are:

[16916:15572:0131/194552.659:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Subresource Filter Rules (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\Subresource Filter\Unindexed Rules\9.18.0).: Impossibile trovare il file specificato. (0x2)
[16916:13948:0131/194552.660:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for OnDeviceHeadSuggest (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\OnDeviceHeadSuggestModel\20210119.353349313).: Impossibile trovare il file specificato. (0x2)
[16916:15572:0131/194552.666:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for File Type Policies (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\FileTypePolicies\43).: Impossibile trovare il file specificato. (0x2)
[16916:13948:0131/194552.666:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Certificate Error Assistant (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\SSLErrorAssistant\7).: Impossibile trovare il file specificato. (0x2)
[16916:16520:0131/194552.703:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Third Party Module List (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\ThirdPartyModuleList64\2018.8.8.0).: Impossibile trovare il file specificato. (0x2)
[16916:7340:0131/194552.706:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Safety Tips (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\SafetyTips\2553).: Impossibile trovare il file specificato. (0x2)
[16916:13612:0131/194552.730:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for pnacl (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\pnacl\0.57.44.2492).: Impossibile trovare il file specificato. (0x2)
[16916:17508:0131/194552.983:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Legacy TLS Deprecation Configuration (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\TLSDeprecationConfig\4).: Impossibile trovare il file specificato. (0x2)
[16916:17508:0131/194553.072:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Zxcvbn Data Dictionaries (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\ZxcvbnData\1).: Impossibile trovare il file specificato. (0x2)
[16916:4548:0131/194553.076:ERROR:component_installer.cc(326)] Failed to read manifest or verify installation for Autofill States Data (C:\Users\ALFONS~1\AppData\Local\Temp\.profile\AutofillStates\2020.11.2.164946).: Impossibile trovare il file specificato. (0x2)
[16916:12220:0131/194602.193:ERROR:device_event_log_impl.cc(211)] [19:46:02.193] Bluetooth: bluetooth_adapter_winrt.cc:1072 Getting Default Adapter failed.

As usual, the Log vscode-debugadapter-d003dc34.json.gz

connor4312 commented 3 years ago

Thanks for the logs and followup. It looks like your workspace path is

C:\Users\Alfonso Moscato\Desktop\Angular\Agile_Web_Client

What happens is that Angular (<11) gives us webpacked paths in the form webpack:///./src/app/core/auth/auth.service.ts. These are relative, so by default we concatenate them with the workspace folder. But in your case the project lived in a subdirectory -- this can be configured with the webRoot property to set where paths are formed: "webRoot": "${workspaceFolder}/projects/angular-ngrx-material-starget".

In Angular 12 it looks like the build started producing paths relative to your workspace folder, which did map correctly (e.g. webpack:///./projects/angular-ngrx-material-starter/src/app/core/auth/auth.service.ts).

This month I will improve the discoverability of our diagnostic tool that's accessibly via the Create Diagnostic Information command, which would have been helpful in self-serving this fix. I'll go ahead and close this issue.

alfmos commented 3 years ago

Very clear, Connor. Thanks a lot for your help.

tomatac commented 3 years ago

The same type of issue 'unbound breakpoint' when I run the debugger for a react app. After some digging I found Create Diagnostic Information command. Great tool (it would be nice to be somehow more accessible)! Running the command while a debug session is running helped me to find the issue.

This used to work and it does not work anymore:

        {
            "name": "Launch Chrome localhost",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/app/src",
            "smartStep": true,
        }

Now this works:

        {
            "name": "Launch Chrome localhost",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/app",
            "smartStep": true,
        }
connor4312 commented 3 years ago

(it would be nice to be somehow more accessible

Indeed :) https://github.com/microsoft/vscode/issues/57590