VSCode 代码调试

简介: VSCode 代码调试

断点调试(debug): 指在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显错误。

我们以【测试】项目为例,随便在 test.html 文件中编写一段 JS 代码获取页面内容。

点击调试按钮,点击创建 launch.json 配置文件,选择【测试】项目。

选择要运行的浏览器。

确认配置信息中的 file 路径正确,点击绿色箭头开始调试。

返回 test.html 文件,点击行数左侧添加断点,点击刷新开始断点调试

当代码执行到断点时就会停止运行,可以点击继续运行下一个断点,也可以点击单步调试,执行下一行代码。代码中的变量以及 this 的指向都会在【变量】中显示。

还可以点击【监视】中的 + 号,输入变量名,监听变量每一步的变化。

还可以勾选 Caught Exceptions 监听报错,然后我们特意写错语法,点击刷新抓取报错。

现在再次运行时 VSCode 就会将报错的内容提示出来。


相关文章
|
1月前
|
编译器 C语言 C++
【VS Code】安装配置调试C/C++(一)
【VS Code】安装配置调试C/C++(一)
41 0
|
22天前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
vscode编辑器中如何调试nextjs代码
|
12天前
|
存储 前端开发 JavaScript
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!
|
6天前
|
开发工具 git
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
13 0
|
6天前
|
开发工具 git
vscode 将已修改代码提交推送git时一直转圈也没有反馈
vscode 将已修改代码提交推送git时一直转圈也没有反馈
12 0
|
1月前
|
项目管理 C++
【VS Code】安装配置调试C/C++(二)
【VS Code】安装配置调试C/C++(二)
41 1
|
2月前
|
C++
VS code debug c代码 配置
VS code debug c代码 配置
23 0
|
2月前
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
59 0
|
2月前
|
Windows
【vscode】 VsCode终端崩溃C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe已终止,退出代码:2
【vscode】 VsCode终端崩溃C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe已终止,退出代码:2
205 1