VSCode调试(vscode调试配置)
开启自动调试
按下ctrl+shift+p打开命名面板,也可以在设置中打开
输入auto Attach,开启智能自动附加调试按钮
如果node_modukes中没有调试工具,会自动附加
参考:code.visualstudio.com/docs/nodejs…
使用vscode调式js
使用js调试时要注意如果使用node,不支持import的方式引入
调试js时先打入端点,进入到debug中会有调试方式进行选择
启用node调试时
node packageName会在debug中生出设置的图标选择相应的调试方式会有相应的launch.json文件生成
使用vscode调试ts
首先是
@types/node,ts-node,typescript三个包的下载,然后后有TypeScript Debugger插件的下载,用于生成launch.json文件
同样也是先打断点,在进行生成文件,选择就是选择TS debugger
使用chrome调试html文件
注意:如果不先选择调试文件,而是直接选择一个工作目录创建
launch.json文件需要对文件选项进行配置
这里直接讲述打选择单独文件进行调试
在debug中运行下有创建
launch.json,在工作区中弹出选项框,然后选择Chrome选项
chrom关于工作区配置调试文件
打开chrom浏览器,在source选项卡上打上端点,刷新后会自动附加到vscode上
| 属性 | 描述 |
|---|---|
| launch | 打开浏览器进行调试 |
| ${wekspaceFolder} | 当前工作区根目录 |
| ${file} | 当前打开要进行调试的文件 |
| sourceMaps | 当前文件的映射 |
注意:debugger chrome已经弃用,vscode自带的
pwa-chrome
参考:code.visualstudio.com/docs/editor…
关于ES6代码的调试
需要在
script脚本中启用:<script type="module">需要开启一个本地服务支持ES6语法的import导入.不然会出现跨域错误
首先需要下载
LiveServe插件,在插件中更改两个配置
将客户端浏览器改成chrome
自动附加改成true
"liveServer.settings.ChromeDebuggingAttachment": true 复制代码
在调试文件时需要先将
Live Serve服务开启,然后进行调试
注意开启服务的端口号要和LiveServer端口号一样
file选项并不会启动一个服务,而是用浏览器打开文件.
作者：听叔一声劝
链接：https://juejin.cn/post/7032911553510768671