在编程的世界里，JavaScrit（JS）的调试是开发者日常工作中不可或缺的一环。而VisualStudioCode（VSCode）作为一款功能强大的代码编辑器，其内置的调试工具更是让JS调试变得轻松高效。就让我带你一步步了解如何在VSCode中调试JS。

一、安装和配置VSCode

1.下载并安装VSCode。 2.打开VSCode，选择“扩展”标签页，搜索并安装“JavaScrit”和“LiveServer”扩展。

二、创建或打开项目

1.创建一个新的JavaScrit项目或打开一个现有的项目。

2.在项目根目录下创建一个名为“.vscode”的文件夹（如果不存在）。

3.在该文件夹内创建一个名为“settings.json”的文件。

三、配置settings.json

1.打开settings.json文件，添加以下配置：

files.exclude":{

.git":true,

.svn":true,

.log":true,

.tm":true,

.sw":true

editor.codeActionsOnSave":{

source.fixAll":true

2.保存并关闭settings.json文件。

四、设置断点

1.在你的JS代码中，找到需要调试的位置。

2.将鼠标悬停在需要设置断点的行号上，右击，选择“添加断点”。

3.或者直接按F9键设置断点。

五、启动调试

1.选择“运行”菜单中的“启动调试”选项。

2.如果是第一次启动调试，VSCode会提示你选择调试配置。选择“Chrome”或“Node.js”。

3.在弹出的对话框中，选择“创建新的配置文件”或“使用默认配置”。

六、单步调试

1.当你的代码运行到断点处时，VSCode会自动停止执行。 2.使用“单步进入”（F11）、“单步跳过”（F10）和“单步退出”（Shift+F11）等快捷键进行调试。

七、查看变量

1.在调试过程中，你可以通过“变量”窗口查看当前作用域下的变量值。 2.修改变量值后，代码会自动重新执行。

八、查看调用栈

1.在调试过程中，你可以通过“调用栈”窗口查看当前函数的调用关系。 2.点击调用栈中的函数，可以查看该函数的源代码。

九、查看源代码

1.在调试过程中，你可以通过“源”窗口查看当前正在调试的文件。 2.修改源代码后，代码会自动重新执行。

十、停止调试

1.当调试完成后，选择“运行”菜单中的“停止调试”选项。

通过以上步骤，你可以在VSCode中轻松地调试JavaScrit代码。掌握这些调试技巧，将大大提高你的开发效率。希望这篇文章能帮助你更好地理解如何在VSCode中调试JS。