VSCode调试JS必须通过HTTP服务而非file://协议；需安装Live Server插件启动本地服务，再配置launch.json使用url和webRoot指向项目根目录，确保断点生效。
VSCode 本身不执行 HTML 或 JS，它只是编辑器；真正运行和调试 JS 的是浏览器。要让断点生效、变量可查、页面可刷新，必须走“本地 HTTP 服务 + 浏览器调试器联动”这条路——file:// 协议下绝大多数断点会失效，fetch、模块导入、Service Worker 等直接报错。
用 Live Server 启动真实 HTTP 服务
这是所有后续调试的前提。没有这一步，launch.json 配置再对也白搭。
- 安装
Live Server插件（Ritwick Dey 开发），重启 VSCode - 确保你已通过
File → Open Folder打开了整个项目文件夹（不是单个 HTML 文件） - 右键任意
.html文件 →Open with Live Server，浏览器会打开类似http://127.0.0.1:5500/index.html的地址 - 此时页面走的是
http://协议，fetch('./data.json')、import、localStorage全部可用 - 如果右键没看到该选项：检查是否在资源管理器中选中了 HTML 文件，且插件已启用
配置 launch.json 让 VSCode 控制浏览器调试
不能直接调试 .js 文件，必须让 VSCode 启动浏览器并加载那个 http:// 地址，否则断点不会命中。
- 点击左侧调试图标（?），选
Create a launch.json file→ 选Chrome或Edge - 生成的配置里，删掉
"file": ...行，改用"url"指向 Live Server 的地址，例如："url": "http://127.0.0.1:5500/index.html" - 必须加上
"webRoot": "${workspaceFolder}"，否则外部<script src="main.js"></script>的断点会变空心圆（未加载） - 不要加
--disable-web-security：本地开发服务器本就不受跨域限制，加了反而可能干扰 fetch 行为 - 保存后，在调试面板顶部选择这个配置，再点绿色三角形启动
在 JS 中设断点并确认命中
断点只在浏览器实际执行到那行时触发，不是一打开就停住。常见“断点不生效”基本都卡在这几步。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 断点只能打在
<script></script>块内或外部.js文件中，不能打在 HTML 标签上 - 如果用了 ES 模块（
type="module"），确保launch.json中"sourceMaps": true，否则断点位置会偏移 - 启动调试后，浏览器会新开一个无痕窗口；若看到旧标签页，说明你之前点了右键“Open in Default Browser”，绕过了调试流程
- 修改 JS 后需手动刷新浏览器（F5），Live Server 的自动刷新不触发 VSCode 断点重载
- 首次调试时，控制台可能报
DevTools was disconnected：关掉所有其他 Chrome/Edge 窗口再试
调试失败时优先检查这三处
90% 的“JS 调试不了”问题，都出在协议、路径、上下文这三个地方。
-
console.log有输出但断点不触发？→ 检查地址栏是不是http://开头，不是file:// - 断点是空心圆？→ 检查
webRoot是否指向项目根目录，且main.js路径与<script src="...></code>%20%E4%B8%AD%E5%86%99%E7%9A%84%E4%B8%80%E8%87%B4</li>%0A<li>%E7%82%B9%20F5%20%E6%B2%A1%E5%8F%8D%E5%BA%94%E6%88%96%E6%8A%A5%E2%80%9Ccan%E2%80%99t%20find%20browser%E2%80%9D%EF%BC%9F%E2%86%92%20%E5%9C%A8%20<code>launch.json</code>%20%E4%B8%AD%E6%98%BE%E5%BC%8F%E6%8C%87%E5%AE%9A%20<code>runtimeExecutable</code>%EF%BC%8C%E6%AF%94%E5%A6%82%EF%BC%9A<code>" runtimeexecutable files></script>
真正麻烦的从来不是装插件或写配置，而是浏览器和编辑器之间那层协议映射——http:// 是钥匙，webRoot 是地图，缺一不可。一旦跑通一次，后面所有 HTML+JS 项目都是同一套逻辑复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
