调试javascript代码需先安装node.js和vscode，并安装javascript调试器插件；2. 在项目根目录创建.vscode/launch.json文件配置调试环境，node.js使用"type": "node"，浏览器环境使用"type": "chrome"并设置url和webroot；3. 在代码行号旁点击设置断点；4. 点击调试图标或按f5启动调试器；5. 使用f5继续、f10单步跳过、f11单步进入、shift+f11单步跳出控制执行；6. 通过变量窗口和监视窗口检查变量值；7. 在调试控制台执行代码或查看输出；8. 修改代码并重新调试以修复bug；9. 调试异步代码时在await后设断点，使用try/catch捕获错误，或插入debugger语句暂停；10. 遇“找不到源文件”时检查launch.json路径配置，若使用typescript或webpack需添加sourcemaps和sourcemappathoverrides映射源文件；11. 调试react native时可使用react native debugger或vscode的react native插件，配置launch.json中"type": "reactnative"并指定platform为android或ios；综上，通过合理配置和工具使用，可在vscode中高效调试各类javascript代码。
VSCode调试JavaScript代码，简单来说，就是设置断点、启动调试器、检查变量和调用栈，然后逐步执行代码，发现并修复bug。
解决方案
准备工作： 首先，确保你已经安装了Node.js（如果你的JavaScript代码是运行在Node.js环境下的）和VSCode。然后，安装VSCode的JavaScript调试器插件，通常VSCode会自动提示你安装。
-
创建
.vscode/launch.json
文件： 这是调试配置的核心。在你的项目根目录下创建一个.vscode
文件夹（如果还没有），然后在里面创建一个launch.json
文件。这个文件告诉VSCode如何启动调试器。立即学习“Java免费学习笔记（深入）”；
一个简单的Node.js调试配置可能是这样的：
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": [ "/**" ], "program": "${workspaceFolder}/your_script.js" // 替换成你的JavaScript文件路径 } ] } 如果是浏览器环境，配置会稍微复杂一点，需要用到
chrome
或者edge
调试器。你需要安装相应的浏览器调试插件，然后在launch.json
中配置启动浏览器并附加到调试器。{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", // 替换成你的网页地址 "webRoot": "${workspaceFolder}" } ] } 设置断点： 在你想要暂停执行的代码行左侧点击，VSCode会在行号旁边显示一个红点，这就是断点。
启动调试器： 点击VSCode左侧的调试图标（一个虫子的图标），然后点击绿色的“启动调试”按钮（或者按下F5）。VSCode会根据
launch.json
中的配置启动调试器。-
单步调试： 调试器启动后，代码会在你设置的第一个断点处暂停。你可以使用调试工具栏上的按钮（继续、单步跳过、单步进入、单步跳出、重启、停止）来控制代码的执行。
- 继续 (F5): 继续执行代码，直到遇到下一个断点。
- 单步跳过 (F10): 执行当前行代码，然后跳到下一行。如果当前行是函数调用，则直接执行完整个函数，不进入函数内部。
- 单步进入 (F11): 如果当前行是函数调用，则进入函数内部。
- 单步跳出 (Shift+F11): 从当前函数跳出，返回到调用该函数的地方。
检查变量： 在调试过程中，你可以通过VSCode的“变量”窗口查看当前作用域内所有变量的值。你也可以在“监视”窗口添加表达式，实时查看表达式的值。
调试控制台： 在调试过程中，你可以在VSCode的“调试控制台”中执行JavaScript代码，或者查看
console.log
的输出。修复Bug： 根据你观察到的变量值和代码执行流程，找到bug所在，修改代码，然后重新启动调试器，验证你的修复是否有效。
如何调试异步JavaScript代码？
异步代码的调试稍微复杂一些，因为代码的执行顺序可能和你想象的不一样。你需要特别注意
async/await、
Promise和
setTimeout等异步操作。
使用
async/await
：async/await
可以让异步代码看起来更像同步代码，更容易调试。设置断点： 在
await
关键字后面设置断点，可以让你观察异步操作的结果。使用
try/catch
： 在async
函数中使用try/catch
块可以捕获异步操作中的错误。使用
debugger
语句： 你可以在代码中插入debugger
语句，当代码执行到debugger
语句时，调试器会自动暂停。这比设置断点更灵活。
遇到“找不到源文件”错误怎么办？
有时候，VSCode调试器会提示“找不到源文件”。这通常是因为调试器找不到你的JavaScript文件。
检查
launch.json
： 确保launch.json
中的program
（对于Node.js）或webRoot
和url
（对于浏览器）配置正确，指向你的JavaScript文件或网页。-
使用
sourceMapPathOverrides
： 如果你的代码经过了编译（比如使用了TypeScript或者Webpack），你需要配置sourceMapPathOverrides
来告诉调试器如何找到源文件。{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": [ "/**" ], "program": "${workspaceFolder}/dist/your_script.js", // 编译后的文件 "sourceMaps": true, "outFiles": [ "${workspaceFolder}/dist/**/*.js" ], "sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" } } ] } 这个配置告诉调试器，如果编译后的代码中引用了
webpack:///./src/
路径下的文件，那么实际上对应的源文件在${workspaceFolder}/src/目录下。
如何调试React Native代码？
调试React Native代码和调试浏览器JavaScript代码类似，你需要使用React Native的调试工具。
使用React Native Debugger： React Native Debugger是一个独立的调试工具，它基于Chrome开发者工具，可以用来调试React Native代码。
-
使用VSCode的React Native插件： VSCode也有React Native插件，可以让你在VSCode中直接调试React Native代码。你需要配置
launch.json
文件，告诉VSCode如何连接到React Native应用。{ "version": "0.2.0", "configurations": [ { "name": "Debug Android", "type": "reactnative", "request": "launch", "platform": "android" }, { "name": "Debug iOS", "type": "reactnative", "request": "launch", "platform": "ios" } ] }
总而言之，VSCode的JavaScript调试功能非常强大，掌握这些技巧可以大大提高你的开发效率。调试过程中最重要的是耐心和细心，仔细观察变量的值和代码的执行流程，相信你一定能找到bug所在。
