live server必须安装是因为它通过启动http://localhost服务绕过file://协议的安全限制，解决fetch跨域、es模块加载失败等问题；但直接点“go live”易端口冲突，需在.settings.json中配置port和donotshowinfomsg等选项。
Live Server 为什么必须装，但别直接点“Go Live”
它不是简单起个本地服务器，而是把 file:// 协议的限制绕过去了——比如 fetch 请求跨域、模块导入失败、相对路径解析异常这些问题，在 http://localhost:5500/ 下全都不见了。但直接右键点“Go Live”会用默认端口，容易和本地其他服务冲突。
- 改端口：在项目根目录建
.vscode/settings.json，写"liveServer.settings.port": 3001 - 禁自动打开浏览器：加
"liveServer.settings.donotShowInfoMsg": true，避免每次保存都弹窗 - 不支持热模块替换（HMR）：改 CSS 或 JS 后仍是整页刷新，React/Vue 项目建议用框架自带 dev server
Debugger for Chrome 怎么连上正在运行的页面
很多人配完 launch.json 还是断点不生效，根本原因是没告诉 Chrome 允许远程调试。它不是“启动 Chrome”，而是“连接已打开的 Chrome 实例”。
- Chrome 启动时加参数：
chrome.exe --remote-debugging-port=9222（Windows）或open -a "Google Chrome" --args --remote-debugging-port=9222（macOS） -
launch.json里别用"request": "launch"，改用"request": "attach"，并指定"port": 9222 - 如果页面用了构建工具（如 Vite），要确保
"sourceMapPathOverrides"正确映射，例如"webpack:///src/*": "${webRoot}/src/*"
Tabnine 和 Copilot 在 HTML/CSS 场景下谁更准
写 JSX 或 Vue 模板时，Copilot 因为能跨文件理解组件结构，补全 class 名、v-if 条件、甚至 props 类型更稳；但纯静态 HTML/CSS 片段，Tabnine 的本地模型响应更快、延迟更低，尤其适合快速生成表单结构或媒体查询。
- Copilot 默认对
plaintext文件类型也启用，会导致 Markdown 里乱出代码——关掉："copilot.enable": {"*": true, "plaintext": false} - Tabnine 的
full line completion模式在写内联样式时容易补全整行style="..."，但有时会覆盖你刚写的属性值，建议只在新行触发 - 两者都不擅长处理 Web Components 的自定义标签名推断，
<my-card></my-card>这类标签仍需手动输入
VS Code 内置的“检查元素”功能其实够用，但得开对地方
不用装额外插件就能审查 DOM，前提是开启开发者工具的“在编辑器中打开”模式。这个功能藏得深，而且只对当前激活的调试会话生效。
- 先用 Debugger for Chrome 连上页面，F5 启动调试后，按
Ctrl+Shift+P（Cmd+Shift+P），搜Developer: Toggle Developer Tools - 打开 DevTools 后，右键任意元素 → “Reveal in Editor”，VS Code 会自动跳转到对应 HTML 文件的行号
- 注意：只支持打开已存在于工作区中的文件，动态生成的模板（如 React createElement）不会跳转
console.log 输出的 __source 路径对不对。
