使用VSCode调试JavaScript需安装Debugger for Chrome插件，配置launch.json指定本地服务器地址和项目根目录，启动服务后在JS文件中设断点，通过运行与调试面板启动浏览器进行断点调试，支持源码映射与变量查看。
在 VSCode 里调试网页 JavaScript，你可以结合浏览器的调试功能和 VSCode 的开发体验，实现断点调试、变量查看等操作。最常用的方式是通过 Chrome DevTools + VSCode 插件 实现无缝调试。
1. 安装必要插件
打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），安装以下插件：
Debugger for Chrome（或新版推荐的 Debugger for Microsoft Edge，如果你用的是 Edge）
这个插件允许 VSCode 连接到正在运行的 Chrome 浏览器实例，进行断点调试。
2. 配置 launch.json
点击左侧运行与调试图标（或按 Ctrl+Shift+D），然后点击“创建 launch.json”文件。
立即学习“Java免费学习笔记（深入）”；
选择环境为 Chrome 或 Edge，VSCode 会生成一个基础配置。修改内容如下：
{ “version”: “0.2.0”, “configurations”: [ { “name”: “Launch Chrome against localhost”, “type”: “pwa-chrome”, “request”: “launch”, “url”: “http://localhost:8080”, “webRoot”: “${workspaceFolder}”, “breakOnLoad”: true, “sourceMapPathOverrides”: { “webpack:///./src/*”: “${webRoot}/src/*” } } ]}
说明：
url：填写你本地服务器启动后的地址，比如 http://localhost:8080 webRoot：项目根目录，确保路径映射正确 如果你使用了 Webpack 等打包工具，可能需要调整 sourceMapPathOverrides 来正确映射源码
3. 启动本地服务器
确保你的网页通过本地服务器运行。比如：
使用 Live Server 插件（VSCode 扩展）右键 HTML 文件选择 “Open with Live Server” 或使用命令行：npx serve、python -m http.server 等
记住服务启动的端口（如 8080），并在 launch.json 中对应填写 url。
稿定在线PS
PS软件网页版
99 查看详情
4. 设置断点并开始调试
在你的 .js 文件中，点击行号左侧设置断点（红点出现即可）。
回到“运行与调试”面板，选择刚才配置的调试项，点击绿色运行按钮。
VSCode 会自动启动 Chrome（或 Edge）并加载页面。当代码执行到断点时，会暂停，你可以在 VSCode 中查看调用栈、作用域变量、监视表达式等。
你也可以在 HTML 中内联脚本或引入的 JS 文件中打断点，只要路径能被正确映射。
5. 调试已打开的页面（附加模式）
如果你想调试已经打开的网页（比如本地开发页），可以使用“attach”模式：
{ “name”: “Attach to Chrome”, “type”: “pwa-chrome”, “request”: “attach”, “port”: 9222, “webRoot”: “${workspaceFolder}”}
前提：启动 Chrome 时开启远程调试端口，例如：
chrome.exe –remote-debugging-port=9222
然后运行这个 attach 配置，连接到浏览器实例。
基本上就这些。配置一次后，以后都能一键调试，效率比只用浏览器 DevTools 更高。
以上就是怎样在VSCode里调试网页JavaScript？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/432437.html
微信扫一扫 
支付宝扫一扫 
