Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2

1、 下载Visual Studio Code （/）

2、 安装插件Debugger for chrome

3、 确定tsconfig.json配置"sourceMap": true

{"compileOnSave": false,"compilerOptions": {"outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es5","typeRoots": ["node_modules/@types"]}}

4、 生成调试配置文件launch.json

{// 使用 IntelliSense 了解相关属性。// 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: /fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:4200","webRoot": "${workspaceRoot}"},{"type": "chrome","request": "launch","name": "Launch Chrome against localhost","url": "http://localhost:4200","webRoot": "${workspaceRoot}"}]}

5、 设置断点进行调试 快捷键和C#语言一致 F10、F11

注：调试前请先npm start程序

如果觉得《Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2》对你有帮助，请点赞、收藏，并留下你的观点哦！