Live Server 不能直接断点调试，它仅提供HTTP服务和自动刷新，不支持调试协议；真断点需用Debugger for Chrome attach或VS Code内置JavaScript Debug Terminal。
Live Server 能不能直接断点调试？
不能。Live Server 插件只起一个 HTTP 服务并自动刷新页面，它不启动任何调试器，也不注入调试协议——debugger 语句会静默跳过，console.log 可见但断点完全无效。
- 常见错误现象：
F5启动后浏览器打开，但 VS Code 左侧断点红点变灰、悬停提示“断点未命中” - 真正能调试的路径只有两条：用
Debugger for Chrome（或 Edge）扩展 attach 到浏览器；或启用 VS Code 内置的JavaScript Debug Terminal - 如果你只是改 HTML/CSS/JS 想看效果，Live Server 够用；但只要涉及逻辑验证、变量追踪、异步流程分析，就必须切到调试模式
怎么配 Debugger for Chrome 实现真断点？
关键不是装插件，而是让 VS Code 和 Chrome 建立双向通信——Chrome 得开启远程调试端口，VS Code 才能连上并接管 JS 执行流。
- 先在终端运行 Chrome 并带参数：
chrome --remote-debugging-port=9222 --auto-open-devtools-for-tabs（macOS/Linux 可用此命令；Windows 用户建议建快捷方式或用 PowerShell 启动） - 然后在 VS Code 中创建
.vscode/launch.json，写入标准 attach 配置：{ "type": "pwa-chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}" } - 确保你用的是 Chrome 打开的页面（不是 Edge/Firefox），且页面 URL 是
http://localhost:xxx这类本地地址，不能是file://协议 - 改完 JS 后别只刷新页面，要按
F5触发调试会话——否则断点不会激活
PHP 或 Vue 项目该用哪个本地服务器？
没有万能方案，得看语言运行时和项目结构。Live Server 对 PHP 文件支持有限，对 Vue CLI 项目则根本不能用——它不识别 vue 单文件组件，也不会跑 webpack-dev-server 的热更新逻辑。
- PHP 项目：必须用系统已安装的
phpCLI，运行php -S localhost:8000 -t public/；如果用 XAMPP/WAMP，要确认php在 PATH 里，且 VS Code 终端重启过才生效 - Vue/React/Vite 项目：一律走框架自己的开发服务器，比如
npm run serve或npm run dev；Live Server 点右键“Go Live”只会加载原始index.html，不执行构建、不处理模块导入、不代理 API - 纯静态 HTML+JS 项目：Live Server 最省事，但记得检查右下角状态栏语言模式是不是
HTML，不是Plain Text，否则右键菜单不显示“Open with Live Server”
为什么改了 CSS/JS 页面没自动刷新？
不是 Live Server 坏了，是它默认监听范围很窄——只响应 .html、.htm、.xhtml、.php 文件变更，.css 和 .js 被刻意排除在外。
- 临时解决：在 VS Code 设置中搜
liveServer.settings.FileExtension，把"css"和"js"加进数组 - 更稳妥做法：关掉 Live Server 的自动刷新，改用
Debugger for Chrome的--auto-open-devtools-for-tabs参数 + 浏览器 Network 面板勾选Disable cache，这样改完保存就能实时看到样式/脚本变化 - 注意：如果项目用了构建工具（如 Webpack、Vite），这类手动刷新机制反而干扰热模块替换（HMR），此时应彻底弃用 Live Server
php 命令找不到、或者 VS Code 工作区没以文件夹形式打开——这些都不是配置问题，是环境没搭稳。先让 php -v 或 node -v 在终端里能跑通，再谈调试。 
