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.
2 Likes
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 
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": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"transform": {
"^.+\\.ts$": "ts-jest"
},
"testRegex": "\\.spec\\.(ts|js)$",
"setupFiles": [
"<rootDir>/test/jest-pretest.ts"
],
"testEnvironment": "node",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,ts}",
"!**/*.spec.{js,ts}",
"!**/node_modules/**",
"!**/test/**"
],
"coverageDirectory": "<rootDir>/test/coverage-jest",
"coverageReporters": [
"json",
"lcov",
"text",
"html"
]
},
"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?
https://support.google.com/chrome/a/answer/6271282
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?
Thanks.
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.
Carlos
5 Likes
This worked like a charm, thanks Carlos.
3 Likes