VSCode 是一个功能强大的代码编辑器，支持 JavaScript 调试。通过安装相应的扩展和配置 launch.json 文件，可以在 VSCode 中方便地设置断点、单步执行、查看变量等操作，帮助开发者快速定位和解决问题。
在VSCode中调试JavaScript代码可以通过多种方法实现，以下是详细的步骤和相关配置：
使用Node.js调试JavaScript
| 步骤 | 描述 |
| 环境配置 | 需要安装Node.js，可以从官网下载并安装适合自己系统的Node.js版本，安装完成后，通过命令行输入node v和npm v检验是否安装成功。 |
| 创建launch.json | 在VSCode中打开项目，点击左侧的运行图标（或按F5），选择“添加配置…”，选择“Node.js”环境，会自动生成一个包含基本配置的launch.json文件。 |
| 编写JavaScript代码 | 新建一个.js后缀的文件，如app.js，在其中编写JavaScript代码。 |
| 设置断点 | 在代码左侧行号旁单击设置断点，断点会在调试时暂停程序执行。 |
| 启动调试 | 按下F5键，选择launch配置，开始调试，程序会在断点处暂停，可以查看变量、单步执行等。 |
使用Live Server插件调试HTML中的JavaScript
| 步骤 | 描述 |
| 环境配置 | 安装VSCode扩展包“Live Server”，用于启动本地服务器。 |
| 创建launch.json | 在VSCode中打开项目，点击左侧的运行图标（或按F5），选择“添加配置…”，选择“Chrome”环境，会自动生成一个包含基本配置的launch.json文件。 |
| 编写HTML文件 | 新建一个.html后缀的文件，如index.html，在其中编写HTML和JavaScript代码。 |
| 设置断点 | 在HTML文件中的JavaScript部分设置断点。 |
| 启动调试 | 在VSCode中右键点击HTML文件，选择“Open with Live Server”，返回VSCode，按下F5键，选择launch配置，开始调试，程序会在断点处暂停，可以查看变量、单步执行等。 |
相关问题与解答
1、问题一：如何在VSCode中使用其他浏览器进行调试？
解答：在launch.json文件中，可以修改"type"字段为其他浏览器的类型，quot;Edge"，然后修改"runtimeExecutable"字段为相应浏览器的安装路径，保存后，按F5启动调试时选择对应的launch配置即可。
2、问题二：如何在调试过程中查看和修改变量的值？
解答：在调试过程中，可以在VSCode左侧的“变量”视图中查看当前作用域内的变量及其值，要修改变量的值，可以在“监视”视图中输入变量名并为其赋新值，或者直接在代码中修改并继续执行。
通过上述步骤和配置，您可以在VSCode中轻松调试JavaScript代码，无论是纯JavaScript文件还是嵌入HTML中的JavaScript代码。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1083023.html
