使用VSCode调试JavaScript需安装Debugger for Chrome插件，配置launch.json指定本地服务器地址和项目根目录，启动服务后在JS文件中设断点，通过运行与调试面板启动浏览器进行断点调试，支持源码映射与变量查看。
在 VSCode 里调试网页 JavaScript，你可以结合浏览器的调试功能和 VSCode 的开发体验，实现断点调试、变量查看等操作。最常用的方式是通过 Chrome DevTools + VSCode 插件 实现无缝调试。
打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），安装以下插件：
这个插件允许 VSCode 连接到正在运行的 Chrome 浏览器实例，进行断点调试。
点击左侧运行与调试图标（或按 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/*" } } ] }说明：
确保你的网页通过本地服务器运行。比如：
npx serve、python -m http.server 等记住服务启动的端口（如 8080），并在 launch.json 中对应填写 url。
在你的 .js 文件中，点击行号左侧设置断点（红点出现即可）。
回到“运行与调试”面板，选择刚才配置的调试项，点击绿色运行按钮。
VSCode 会自动启动 Chrome（或 Edge）并加载页面。当代码执行到断点时，会暂停，你可以在 VSCode 中查看调用栈、作用域变量、监视表达式等。
你也可以在 HTML 中内联脚本或引入的 JS 文件中打断点，只要路径能被正确映射。
如果你想调试已经打开的网页（比如本地开发页），可以使用“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？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
694
收藏
取消收藏
