配置launch.json是VSCode调试JS的关键，首先选择调试环境如Node.js或Chrome，设置”type”、”request”、”program”或”url”等参数，保存后通过F5启动调试，结合断点、单步执行与变量监视，即可高效排查问题。
VSCode调试JS，简单来说，就是让你像医生看病一样，能看到代码运行的“内部器官”，找出“病灶”（bug）。通过设置断点、单步执行、查看变量等手段，你可以逐行分析代码，理解它的运行逻辑，最终解决问题。
配置好launch.json文件，设置断点，启动调试，然后像玩游戏一样，一步一步地看代码执行，观察变量变化，bug就无处遁形了。
launch.json文件配置，断点设置，变量观察，单步调试，这几个是关键。
如何配置VSCode的launch.json文件进行JavaScript调试？
配置
launch.json
文件，是开启VSCode调试JS之旅的第一步。很多人觉得这玩意儿复杂，其实不然。简单来说，
launch.json
就是告诉VSCode，你想用什么环境、什么方式来调试你的JS代码。
立即学习“Java免费学习笔记（深入）”；
首先，在VSCode中打开你的项目，然后点击左侧的调试按钮（就是那个像虫子一样的图标），接着点击“创建launch.json文件”。VSCode会提示你选择调试环境，对于Node.js项目，选择“Node.js”；对于浏览器端的JS，选择“Chrome”或者“Edge”（取决于你用的浏览器）。
接下来，VSCode会自动生成一个
launch.json
文件。这个文件里面有很多配置项，但你只需要关注几个关键的：
"type"
: 指定调试器类型，比如
"node"
或者
"chrome"
。
"request"
: 指定调试方式，通常是
"launch"
（启动一个新的进程）或者
"attach"
（连接到一个已经运行的进程）。
"name"
: 给你的调试配置起个名字，方便你以后选择。
"program"
: 指定要调试的入口文件，比如
"./index.js"
。
"url"
: 如果你调试的是浏览器端的JS，这里指定要调试的网页地址，比如
"http://localhost:3000"
。
"runtimeExecutable"
: 如果调试的是浏览器端的JS，并且使用Chrome，可能需要指定Chrome的路径，例如
"C:Program FilesGoogleChromeApplicationchrome.exe"
。
"webRoot"
: 指定你的web应用的根目录，通常是
${workspaceFolder}
。
举个例子，如果你要调试一个Node.js项目，你的
launch.json
文件可能看起来像这样：
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": [ "/**" ], "program": "${workspaceFolder}/index.js" } ]}
如果你要调试一个浏览器端的JS项目，你的
launch.json
文件可能看起来像这样：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ]}
配置好
launch.json
文件后，保存它。以后你就可以直接点击调试按钮，选择你配置好的调试环境，开始调试你的JS代码了。当然，根据你的项目结构和需求，你可能需要对
launch.json
文件进行一些调整，但掌握了这些基本配置项，你就已经入门了。
如何在VSCode中设置断点并进行单步调试？
断点，顾名思义，就是让代码执行到这里暂停的地方。设置断点非常简单，只需要在VSCode的代码编辑区域，点击你想要暂停的那一行代码的左侧空白区域。你会看到一个红色的圆点，这就是断点。
设置好断点后，启动调试（点击调试按钮，或者按下F5）。VSCode会启动你配置好的调试环境，并执行你的JS代码。当代码执行到你设置的断点时，它会暂停下来。
这时，你就可以使用VSCode提供的单步调试功能了。VSCode的调试工具栏通常会显示在屏幕上方，上面有一些按钮，可以让你控制代码的执行流程：
继续 (F5): 让代码继续执行，直到遇到下一个断点，或者程序结束。单步跳过 (F10): 执行当前行代码，然后跳到下一行。如果当前行是一个函数调用，它会直接执行完整个函数，跳到函数调用之后的下一行。单步进入 (F11): 执行当前行代码，如果当前行是一个函数调用，它会进入到函数内部，让你逐行执行函数内部的代码。单步跳出 (Shift+F11): 如果你当前在函数内部，这个按钮会让你跳出当前函数，回到函数调用之后的位置。重新启动 (Ctrl+Shift+F5): 重新启动调试会话。停止 (Shift+F5): 停止调试会话。
通过这些单步调试功能，你可以逐行执行你的代码，观察代码的执行流程，理解代码的逻辑。如果遇到问题，你可以随时暂停代码的执行，查看变量的值，分析问题的原因。
白瓜面试
白瓜面试 – AI面试助手,辅助笔试面试神器
40 查看详情
如何使用VSCode的调试控制台和变量查看器？
调试控制台和变量查看器，是VSCode调试JS的两个利器。它们可以让你在调试过程中，实时查看代码的输出和变量的值，帮助你更好地理解代码的运行状态。
调试控制台，顾名思义，就是用来显示调试信息的控制台。你可以在代码中使用
console.log()
语句，将一些信息输出到调试控制台。在调试过程中，这些信息会显示在调试控制台中，帮助你了解代码的执行情况。
除了
console.log()
，你还可以使用
console.error()
、
console.warn()
等语句，输出不同类型的调试信息。这些信息在调试控制台中会以不同的颜色显示，方便你区分。
变量查看器，是用来显示变量的值的。在调试过程中，VSCode会自动显示当前作用域内的所有变量的值。你可以在变量查看器中，展开对象和数组，查看它们的内部结构。
变量查看器通常会显示在VSCode的左侧或者底部。你可以通过拖拽来调整变量查看器的位置和大小。
除了自动显示变量的值，你还可以在变量查看器中手动添加要查看的变量。只需要在代码中选中一个变量，然后右键点击，选择“添加到监视”，这个变量就会被添加到变量查看器中。
通过调试控制台和变量查看器，你可以实时了解代码的运行状态，观察变量的值，从而更好地理解代码的逻辑，找到问题的原因。这两个工具是调试JS必不可少的助手。
如何调试异步JavaScript代码（例如Promise、async/await）？
调试异步JS代码，是JS调试中的一个难点。因为异步代码的执行顺序和同步代码不同，它不会按照代码的顺序依次执行，而是会根据异步操作的结果来决定执行顺序。
对于Promise，你可以使用
.then()
和
.catch()
来处理异步操作的结果和错误。在调试Promise时，你可以在
.then()
和
.catch()
中设置断点，观察异步操作的结果和错误。
对于async/await，你可以像调试同步代码一样，直接在
await
语句上设置断点。当代码执行到
await
语句时，它会暂停下来，等待异步操作完成。你可以使用单步调试功能，逐行执行
async
函数中的代码，观察异步操作的结果。
但是，有时候异步代码的调试会比较麻烦，因为代码的执行顺序可能会比较复杂。这时，你可以使用VSCode的“调用堆栈”功能，查看代码的调用关系。调用堆栈会显示当前代码的调用路径，让你了解代码是从哪里被调用的，以及调用了哪些函数。
此外，你还可以使用VSCode的“异步断点”功能。异步断点可以在异步操作完成时暂停代码的执行，让你更好地理解异步代码的执行流程。要使用异步断点，你需要在
launch.json
文件中配置
"breakOnAsyncCall": true
。
调试异步JS代码需要一些技巧和经验，但只要掌握了这些方法，你就可以轻松应对各种复杂的异步场景。
以上就是VSCode调试JS怎么用_VSCode JavaScript断点调试教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/459914.html
微信扫一扫 
支付宝扫一扫 
