不能直接调试，但可通过配置 launch.json 并启用 Chrome 远程调试实现：需确保 --remote-debugging-port、pwa-chrome type、webRoot 路径三者匹配，否则断点灰色。
VSCode 里点 F5 就能调试 HTML 中的 JS 吗？
不能直接调试，但可以做到——前提是 Chrome 和 VSCode 的通信链路打通。关键不在“能不能点 F5”，而在于 launch.json 配置是否匹配当前运行方式，以及 Chrome 是否以调试模式启动。很多人的断点是灰色的（Unbound breakpoint），不是插件没装，而是这三者没对齐：Chrome 的 --remote-debugging-port 参数、launch.json 中的 type 和 file/url 字段、webRoot 路径是否真实指向源码位置。
断点灰色？先检查这三个硬性条件
灰色断点 = VSCode 找不到浏览器里运行的 JS 和你编辑器里文件的对应关系。常见原因如下：
-
Chrome没启用远程调试端口：必须手动启动 Chrome 或修改快捷方式目标，追加--remote-debugging-port=9222；仅靠插件自动拉起 Chrome 通常不带该参数 -
launch.json用的是旧"type": "chrome"：VSCode 1.8x+ 后推荐改用"type": "pwa-chrome"，否则 ES modules、动态 import 等现代语法断点会失效 -
webRoot设错：比如项目结构是src/index.html+src/app.js，却写成"${workspaceFolder}"，实际应为"${workspaceFolder}/src"；否则 sourcemap 映射失败，VSCode 不知道webpack:///./app.js对应本地哪个文件
最小可用 launch.json 配置（纯 HTML 项目）
不用 Live Server、不用构建工具，就一个 index.html 带内联或外链 JS，用这个配置最稳：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug HTML (pwa-chrome)",
"type": "pwa-chrome",
"request": "launch",
"file": "${file}",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"port": 9222
}
]
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
${file}表示当前打开的 HTML 文件，换文件按 F5 就自动加载新页面，不用改配置 -
webRoot设为${workspaceFolder}是因为纯 HTML 项目通常没有src/子目录，JS 就在根目录下 - 删掉
runtimeExecutable字段：它容易因路径空格、权限（如 Linux/macOS 上的EACCES）报错，让 VSCode 自动找系统 Chrome 更可靠 - 如果 Chrome 已有其他实例占了 9222 端口，先关掉所有 Chrome 窗口（含后台进程），或把
port改成9223并同步在 Chrome 启动参数里改
为什么不用 Live Server 配合 Debugger？
Live Server 启的服务地址是 http://127.0.0.1:5500/xxx.html，而 Debugger 默认走 file:// 协议或自建服务。两者混用会导致 webRoot 映射失败、断点不命中、甚至 CORS 报错。如果你已经依赖 Live Server：
- 改用
"request": "attach"模式，配合 Chrome 手动开启远程调试，再让 VSCode 连上去 - 或者干脆放弃 Live Server，改用
python3 -m http.server 8000启服务，然后在launch.json里配"url": "http://localhost:8000/${relativeFile}"，并确保webRoot指向正确 - 注意：
url必须带协议和末尾斜杠，写成"http://localhost:8000/index.html"会失败，得是"http://localhost:8000/"
真正卡住的从来不是“怎么配”，而是 Chrome 实例、端口、sourcemap、路径映射这四者之间差了一个字符或一个斜杠。调通一次后，复制配置到新项目前，务必核对 webRoot 和你的实际目录结构是否一致。
