600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > VsCode中Debug调试插件配置

VsCode中Debug调试插件配置

时间:2024-06-04 21:38:26

相关推荐

VsCode中Debug调试插件配置

第一步:环境配置

确保你的Chrome安装在默认位置

确保你的VS Code里面安装了Debugger for Chrome这个插件

把@angular/cli安装到全局空间npm install -g @angular/cli,国内用户请使用cnpm进行安装。注意,你最好升级到最新版本的@angular/cli,避免版本兼容问题。

用@angular/cli创建新项目ng new my-app ,本来就已经用@angular/cli创建的项目请忽略这一步,继续往下走,因为只要是cli创建的项目,后面的步骤都是有效的。

用VS Code打开项目,进入项目根目录

(在插件中搜索debugger for chrome 安装后重新加载)

第二步:配置launch.json

请参照以上步骤打开launch.json配置文件。

如果你是Windows用户,那么应该是这样的:

请把你本地launch.json文件里面的内容先删光,然后把以下内容贴进去:

{

"version":"0.2.0",

"configurations":[

{

"type":"chrome",

"request":"launch",

"name":"Chrome",

"url":"http://localhost:4200",

"webRoot":"${workspaceRoot}"

}

]

}

第三步:开始Debug

在你的ponent.ts的构造函数里面打个断点。

打开终端,进入项目根目录,运行ng serve启动项目,然后从VS Code的debug界面启动Chrome:

请注意,一定要用F5再次刷新一下Chrome才能进入断点!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。