直接用Chrome打开HTML文件可调试，但file://协议下fetch、Service Worker等API因安全限制失效，需启用本地HTTP服务（如python3 -m http.server 8000）才能完整运行。
直接用 Chrome 打开 HTML 文件就能调试，不需要服务器或额外工具——但必须注意：本地双击打开的 file:// 协议页面，部分 API（如 fetch 读取本地 JSON、Service Worker）会因安全限制失效，这时候得用本地服务。
怎么快速打开开发者工具并定位到你的 HTML 元素
右键页面任意空白处 → 选“检查”，工具自动打开并高亮当前元素；或者按 Ctrl+Shift+I（Win/Linux）或 Cmd+Option+I（macOS）。别用“查看网页源代码”，那只是静态 HTML 文本，看不到运行时 DOM 或样式计算结果。
常见错误现象：
- 点了“检查”没反应？确认鼠标确实点在页面内容区，不是地址栏或标签页上
- Elements 面板里找不到刚写的
<div id="app">？可能是 JS 动态插入的，刷新后还没执行，先去 Console 看有没有报错 - 右键菜单没有“检查”？浏览器被策略锁定或用了精简版，换官方 Chrome 再试
Console 里查错比肉眼看快十倍
HTML 本身不报错，但内联 JS、<script src> 加载失败、或浏览器不支持的语法（比如用了 const 却跑在旧版 IE 模拟环境）都会在 Console 显示红色错误。关键不是看第一行，而是点错误右侧的文件名和行号，直接跳转到问题源头。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在 HTML 里加一句
<script>console.log('loaded');</script>，如果这行没输出，说明 HTML 根本没加载成功或被拦截 - 遇到
net::ERR_FILE_NOT_FOUND？检查<script src="js/main.js">的路径是否相对于当前 HTML 文件，不是相对于桌面或项目根目录 - 想临时测试逻辑？直接在 Console 输入
document.getElementById('xxx')，看返回是不是null—— 是的话，要么 ID 写错，要么脚本执行太早，DOM 还没就绪
Network 面板确认资源真加载了
写完 <img src="logo.png"> 却只看到缺省图标？别猜，切到 Network 面板，刷新页面，找 logo.png 这一行：状态码是 200 才算成功；404 就是路径错了；pending 可能是文件被杀毒软件锁住，或路径含中文/空格没编码。
容易踩的坑：
- 勾选“Disable cache”再刷新——否则可能看到的是旧缓存，误判资源加载失败
- 图片、字体、CSS 文件在 Network 里显示灰色？说明它们是从内存缓存（memory cache）读的，不是重新请求，不影响功能但会干扰判断
- JS 文件状态是
200但 Console 还报ReferenceError？打开它对应的响应内容，确认文件里真有你要调用的函数，而不是空文件或 404 页面被当 JS 返回了
用 Sources 面板打断点调试 JS 逻辑
如果 HTML 引入了外部 JS，且逻辑出错（比如点击按钮没反应），不要靠 console.log 海轰。在 Sources 面板左侧文件树找到那个 JS 文件，点击行号左侧空白处设断点，再操作页面——执行到那里就会暂停，你可以看右边 Scope 面板里变量实时值，或在 Console 输入表达式验证假设。
注意点：
- 断点只对实际执行的 JS 生效；如果 JS 被
async加载或动态eval，可能不在 Sources 列表里，先在 Console 输入debugger;强制中断 - 修改 Sources 里的 JS 并保存（
Ctrl+S），不会更新磁盘文件，只是临时覆盖——适合快速验证修复，但改完记得同步到编辑器 - 本地
file://页面下，Sources 面板可能不显示你自己的 JS 文件，只显示(index)或乱码路径；这是 Chrome 安全策略所致，此时只能靠console.log和debugger
最常被忽略的是协议差异：file:// 下调试方便，但一旦涉及跨域、存储、摄像头等 API 就必然失败；真要测完整功能，哪怕只是起个 python3 -m http.server 8000，也比硬扛限制强。
