VS Code Chrome debugging

Every time I’m trying to debug my project in vs code using the chrome debugger, the page will crash if i sit on a break point too long. Does anyone else have this issue?

This doesn’t seem to be specific to webpack

1 Like

What is to long? I have never had an issue leaving it sit on a BP in a debug session. I haven’t left it there generally for more then 10 minutes that I recall though. I can test it.

Update: Just did 25 minutes on a BP, and was fine stepping and hitting continue.


I’m not sure what is going on, I don’t even get minutes. 10-15 seconds sometimes

1 Like

It happens in a webpack project and systemjs. Using the latest debugger and chrome. It happens on multiple machines as well

1 Like

So I created my project some time ago with WebPack, and the loader is the default.
I am using the latest chrome and VSCode update for debugging.

Pretty sure I am not doing anything special anywhere because I wouldn’t know how :wink:

This is what I have in launch.json…

    "version": "0.1.0",
    "configurations": [{
            // "debugServer": 4712,
            "name": "test chrome",
            "type": "chrome",
            "request": "launch",
            //"url": "http://localhost:8080/index.html",
            "port": 9222,
            //"pathMapping": {
            //    "/": "${workspaceFolder}/wwwroot"
            // "runtimeExecutable": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
            "trace": true,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}/src",
            "userDataDir": "${workspaceRoot}/.chrome",
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            "debugServer": 4712,
            "name": "attach to chrome",
            "type": "chrome",
            "port": 9222,
            "request": "attach",
            "webRoot": "${workspaceFolder}/wwwroot"

here is my package.json in case there might be something there that might point to something…

  "name": "val-test",
  "description": "An Aurelia client application.",
  "version": "0.1.0",
  "repository": {
    "type": "???",
    "url": "???"
  "license": "MIT",
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^11.2.0",
    "@ckeditor/ckeditor5-highlight": "^10.0.4",
    "au-rollbar": "^0.1.2",
    "aurelia-animator-css": "^1.0.4",
    "aurelia-bootstrapper": "^2.3.0",
    "aurelia-dialog": "^1.1.0",
    "aurelia-fetch-client": "^1.6.0",
    "aurelia-polyfills": "^1.3.0",
    "aurelia-store": "^1.3.1",
    "aurelia-validation": "^1.3.0",
    "auth0-js": "^9.10.2",
    "bluebird": "^3.5.2",
    "bootstrap": "^4.1.3",
    "dexie": "^2.0.4",
    "font-awesome": "^4.7.0",
    "inputmask": "^4.0.3",
    "jquery": "^3.4.1",
    "moment": "^2.22.2",
    "popper.js": "^1.14.5",
    "rollbar": "^2.5.1",
    "toastr": "^2.1.4",
    "tslib": "^1.9.3"
  "peerDependencies": {},
  "devDependencies": {
    "@types/jest": "^23.3.5",
    "@types/lodash": "^4.14.117",
    "@types/node": "^10.11.6",
    "@types/webpack": "^4.4.15",
    "aurelia-cli": "^1.0.0-beta.4",
    "aurelia-loader-nodejs": "^1.0.1",
    "aurelia-pal-nodejs": "^1.1.1",
    "aurelia-protractor-plugin": "^1.0.6",
    "aurelia-testing": "^1.0.0",
    "aurelia-tools": "^2.0.0",
    "aurelia-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "del": "^3.0.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^2.0.0",
    "gulp": "^4.0.0",
    "gulp-rename": "^1.4.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jest": "^24.7.1",
    "jest-cli": "^24.7.1",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^0.4.3",
    "minimatch": "^3.0.4",
    "node-sass": "^4.12.0",
    "nps-utils": "^1.7.0",
    "opn": "^5.4.0",
    "plugin-error": "^1.0.1",
    "protractor": "^5.4.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "through2": "^2.0.3",
    "ts-jest": "^23.10.4",
    "ts-loader": "^5.2.1",
    "ts-node": "^7.0.1",
    "typescript": "^3.1.2",
    "url-loader": "^1.1.1",
    "vinyl-fs": "^3.0.3",
    "wait-on": "^3.1.0",
    "webpack": "^4.20.2",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.3.1"
  "jest": {
    "modulePaths": [
    "moduleFileExtensions": [
    "transform": {
      "^.+\\.ts$": "ts-jest"
    "testRegex": "\\.spec\\.(ts|js)$",
    "setupFiles": [
    "testEnvironment": "node",
    "collectCoverage": true,
    "collectCoverageFrom": [
    "coverageDirectory": "<rootDir>/test/coverage-jest",
    "coverageReporters": [
  "engines": {
    "node": ">= 6.0.0"
  "scripts": {
    "start": "nps",
    "test": "nps test"
  "main": "dist/app.bundle.js"
1 Like

I have the same issue. Running chrome debugger in VS Code on the webpack project generated by the CLI crashes every time. The SystemJS/RequireJS project doesn’t.

1 Like

Looks like you can open a window for more information perhaps if I am reading this right in the last post?

1 Like

That’s not the same issue. Vs code doesn’t crash for me, the web browser dies. Chrome says “Oh snap”

1 Like

I wasn’t sure if perhaps it might toss some type of error on disconnect that might show up there.

Is there a text dump for chrome when it crashes somewhere?

1 Like

Would this maybe provide more info on the browser crashing for you?

1 Like

Perhaps you can check is the sourceMapPathOverrides is the correct one in your .vscode/launch.jsonfile is the correct one. I provided steps on how to check that in the Aurelia-Skeleton in this issue. Give that a try just to confirm the source map path is correct in your installation

1 Like

I have no issues hitting breakpoints. The debugger pretty much times out on me

1 Like

Hi. I have the same problem since I installed the CLI latest version. Did you find any solution?

1 Like

Nope same issues. If anyone got it working, will appreciate the info.

1 Like

After trying a lot of things in webpack.config changing
moduleIds: ‘hashed’, to moduleIds: production ? ‘hashed’:‘named’,
fix the problem and now I am able to debug in Chrome.

I hope this works for you.



This worked like a charm, thanks Carlos.