angular - Debugging Angular2 apps in Visual Studio Code -
i'm trying develop basic angular2 app using vsc. code written in typescript. basic todo app, , code (.ts, js, .js.map) in app/ subfolder.
this launch.json configuration run:
{ "name": "run", "type": "node", "request": "launch", "program": "${workspaceroot}/node_modules/lite-server/bin/lite-server", "stoponentry": false, "args": [], "cwd": "${workspaceroot}", "prelaunchtask": null, "runtimeexecutable": null, "runtimeargs": [ "--nolazy" ], "env": { "node_env": "development" }, "externalconsole": false, "sourcemaps": false, "outdir": null },
when run it, app loads in chrome none of breakpoints work. when hover breakpoint, see "breakpoint ignored because generated code not found (source map problem?)."
i've got 1 breakpoint in /app/todo.component.ts. in /app/todo.component.js.map can see:
"file":"todo.component.js","sourceroot":"/users/xxx/documents/webs/angular2-todo/app/","sources":["todo.component.ts"],"names":[],"mappings":";;;;;;;;;;
source root , sources seem ok me.
any ideas?
you have do:
- install "debugger chrome"-extension
- delete launch.json , create new 1 (select "chrome" instead of "node.js").
- change port 3000 (if use lite-server, in tour-of-heroes-tutorial) , add "userdatadir":
example:
{ "name": "launch chrome against localhost, sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "sourcemaps": true, "webroot": "${workspaceroot}", "userdatadir": "${workspaceroot}/out/chrome" }
start server "npm start" (terminal-window or console).
launch debugging (f5 or select "launch chrome against localhost..." in dropdown).
Comments
Post a Comment