Live Server 不支持断点调试，因其仅提供静态 HTTP 服务且未启用 Chrome 调试协议；需通过 VSCode 的 Debugger for Chrome 扩展配合 launch.json 启动带 --remote-debugging-port 的浏览器实例，并确保 url 与 webRoot 配置准确对齐实际服务地址。
vscode 调试网页应用，live server 本身不支持断点调试——它只是起一个本地 http 服务，没有连接 chrome devtools 的调试协议能力。真要调试 js（设断点、看调用栈、监视变量），得靠 vscode 自带的 debugger for edge 或 debugger for chrome 扩展，并配合 launch.json 配置启动浏览器实例。
为什么直接右键 Open with Live Server 无法 F5 调试
Live Server 启动的是独立的 HTTP 服务（默认 http://127.0.0.1:5500/），它不接管浏览器进程，也不暴露 --remote-debugging-port。VSCode 的调试器需要通过这个端口与浏览器通信，否则 F5 按下后会提示 “Can’t attach to process” 或直接无响应。
- 现象：点击 VSCode 的绿色 ▶️ 按钮，控制台报错
Cannot connect to runtime process, timeout after 10000 ms - 本质：没启动带调试标志的浏览器，或没配对 URL 和
url字段 - 误区：以为
Live Server和调试是同一套流程——其实它是开发时快速预览的辅助工具，不是调试管道
正确配置 launch.json 启动可调试的 Chrome 实例
在项目根目录创建 .vscode/launch.json，用 chrome 类型配置，关键点是让 VSCode 自动拉起一个专属调试版 Chrome，并加载你的页面：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000/", // 注意：不是 Live Server 默认的 5500
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/src/*"
}
}
]
}
-
url必须和你实际运行的服务端口一致；若坚持用Live Server的:5500，就写"http://localhost:5500/" -
webRoot影响断点映射——JS 文件路径和源码路径不一致时，断点会打空，务必核对 - 首次运行可能提示“找不到 chrome”，需在配置里加
"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"（macOS）或对应 Windows 路径
Live Server 的实用窍门（非调试向）
它真正省心的地方是自动刷新 + 静态资源托管，但默认行为有坑，几个关键配置值得改：
- 右键菜单太多？在设置里搜
liveServer.settings.donotShowInfoMsg关掉烦人的弹窗提示 - 想换端口避免冲突？修改
liveServer.settings.port，比如设成8080，再配合launch.json的url同步更新 - HTML 里引用了
./script.js却 404？确认文件路径是相对于 HTML 当前目录，不是工作区根目录——Live Server是以打开的 HTML 文件所在文件夹为服务根 - 热重载失效？检查是否用了
fetch或XMLHttpRequest加载的动态内容——Live Server只监听文件变化并刷新整个页面，不 patch DOM
真正卡住人的地方，往往不是不会配 launch.json，而是 url 和实际服务地址对不上，或者 webRoot 指错了导致断点灰色不可用。调试 JS 时，浏览器地址栏显示的 URL 就是唯一可信的依据，其他都得向它对齐。
