在VSCode中调试浏览器端JavaScript需正确配置环境：安装Debugger for Chrome或使用内置JavaScript Debug Terminal，配合Live Server启动页面，配置launch.json指定URL和webRoot，设断点后按F5调试。
在 VSCode 中调试浏览器端 JavaScript 很方便，关键是正确配置调试环境，让 VSCode 能和浏览器建立连接并控制执行流程。
确保浏览器支持调试（推荐 Chrome 或 Edge）
VSCode 通过 Debugger for Chrome 或内置的 Edge Debugger 扩展与浏览器通信。Chrome 和新版 Edge 均基于 Chromium，兼容性最好。
- 安装官方扩展：Debugger for Chrome（已归档，但旧项目仍可用）或直接使用 VSCode 内置的 JavaScript Debug Terminal（VSCode 1.59+ 默认启用，无需额外插件）
- 启动浏览器时建议加上远程调试标志（仅特定场景需要）：
chrome.exe --remote-debugging-port=9222，一般开发服务器自动处理，可暂不手动操作
用 Live Server 启动页面（快速上手）
适合静态 HTML + JS 项目，无需构建工具。
- 安装扩展：Live Server（by Ritwick Dey）
- 右键 HTML 文件 → Open with Live Server，页面会在浏览器中打开，URL 类似
http://127.0.0.1:5500/index.html - VSCode 自动识别该地址，后续调试会默认连接这个标签页
配置 launch.json 启动调试会话
点击左侧调试图标 → 顶部“运行和调试”面板 → 点击“创建 launch.json 文件” → 选择环境（如 Chrome 或 Edge）。
立即学习“Java免费学习笔记（深入）”；
Eclipse中创建Web Maven Project并部署到Tomcat中 中文WORD版
下载
大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中 进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看
一个典型配置如下（适用于本地 HTML 文件）：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against index.html",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*"
}
}
]
}
-
url必须和 Live Server 实际打开的地址一致（端口要对得上） -
webRoot告诉调试器源码根目录，用于映射浏览器中的脚本路径 - 若用 Vite / Webpack 等工具，通常选对应模板（如 pwa-chrome + serve），它会自动启动开发服务器再打开浏览器
开始调试：断点、变量、控制台
配置好后，打开 JS 文件，在行号左侧灰色区域单击设断点（变成红点），按 F5 启动调试。
- 刷新浏览器页面，执行到断点处会自动暂停，VSCode 切换到调试视图
- 左侧“变量”面板查看当前作用域变量；“调试控制台”可执行 JS 表达式（比如
document.body） - 用上方调试工具栏继续（F5）、单步跳过（F10）、单步进入（F11）、跳出（Shift+F11）
- 支持条件断点：右键断点 → “编辑断点” → 输入条件（如
i === 5）
基本上就这些。不需要复杂配置也能快速开始，关键在于浏览器和 VSCode 能“说上话”。如果断点不命中，先检查 URL 是否匹配、webRoot 是否正确、是否用了 source map（尤其是打包项目）。
