HTML工具非浏览器，须用本地服务（如Live Server）而非双击打开；html-minifier压缩需防script闭合与module语法破坏；viewport应加maximum-scale=1防缩放bug；跨iframe通信禁用document.domain，改用postMessage并确保同源及执行时机。
HTML 工具不是浏览器，别直接双击打开 index.html
很多新手把写好的 index.html 文件双击用系统默认程序打开，结果样式错乱、fetch 报 CORS 错误、图片路径 404——根本原因：文件协议（file://）下浏览器禁止跨域请求、不支持服务端逻辑、相对路径解析也容易出偏差。
正确做法是起一个最小本地服务：
- VS Code 安装
Live Server插件，右键 HTML 文件点 “Open with Live Server” - 命令行用
npx serve -s .（需先npm install -g serve） - Python 用户可临时跑：
python3 -m http.server 8000，然后访问http://localhost:8000
这样所有资源走 http:// 协议，路径解析、AJAX、模块导入才符合生产环境行为。
html-minifier 压缩后页面白屏？检查 script 标签的 type 和闭合
压缩工具如 html-minifier 默认会删空格、合并属性、移除注释，但若原始 HTML 里有未闭合的 <script></script> 或用了 type="module" 却没加 defer，压缩后可能破坏执行顺序或语法结构。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：
-
<script src="app.js"></script>被压成<script src="app.js"></script>（缺少闭合），某些老浏览器直接忽略 -
<script type="module">import('./a.js')</script>被删掉换行后，变成一行导致解析失败 - 压缩时未配
--collapse-whitespace或--remove-comments开关，反而引发模板引擎冲突（比如和handlebars的{{}}混淆）
建议：上线前用 html-minifier --parse-html --minify-js --minify-css 全开，并在本地服务中验证渲染结果，别只看压缩后源码。
用 vscode-html-boilerplate 插件生成骨架，但别信它的 viewport 写法
该插件按 Enter 快速生成基础 HTML 结构，省事；但它默认插入的 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 在部分安卓 WebView 或旧版 iOS 中可能触发缩放 bug，尤其当页面含固定宽度容器时。
更稳妥的写法是：
- 加
maximum-scale=1防止用户双指放大：content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" - 若需支持缩放（比如报表页），去掉
user-scalable=no，但必须测试input聚焦时是否触发意外缩放 - 避免写死
width=375这类值——它只对特定设备生效，现代响应式应依赖 CSS 媒体查询
记住：viewport 不是“设了就适配”，它是视口解释规则，和 CSS 的 rem、vw 单位联动才真正起效。
调试 iframe 里的 HTML 工具页面，document.domain 不再管用
当你把工具页嵌进 iframe（比如 CMS 后台集成），又想从父页调用子页的 init() 函数或读取 localStorage，很多人第一反应是设 document.domain = 'example.com'。但现代浏览器已废弃该 API，且跨源 iframe 下它根本无效。
可行替代方案：
- 用
window.postMessage()双向通信，子页监听message事件，父页用iframe.contentWindow.postMessage() - 确保父子页协议、域名、端口完全一致（
http://localhost:3000和http://127.0.0.1:3000视为不同源） - 如果只是调试，Chrome DevTools 的 Elements 面板里右键 iframe → “Reveal in Elements panel”，能直接看到其 DOM 树，无需 JS 注入
跨 iframe 操作最常被忽略的是：子页 JS 执行时机。父页不能一加载完就发消息，得等 iframe.onload 或监听子页通过 postMessage 主动发来的就绪信号。
