本地文件双击打开会触发CORS限制，需用HTTP服务（如python3 -m http.server）访问；DevTools可模拟弱网和设备；需启用source map调试；静态资源路径要匹配部署子路径。
本地文件直接双击打开会触发 CORS 限制
HTML5 页面如果包含 fetch、XMLHttpRequest 或 importScripts 等跨源请求，用文件协议（file://）直接双击打开，浏览器会因安全策略拒绝加载资源——这不是代码写错了，是协议本身被拦了。
- Chrome / Edge 默认禁止
file://下的 AJAX 请求；Firefox 行为稍宽松但也不稳定 - 本地测试必须启动一个最小 HTTP 服务，哪怕只是临时的
- 推荐用命令行快速起服务：
python3 -m http.server 8000
（Python 3）或npx http-server -p 8000
（需 Node.js） - 然后访问
http://localhost:8000/index.html，CORS 问题立刻消失
用 Chrome DevTools 模拟真实弱网与移动端设备
上线前不测网络降级和小屏适配，等于把 bug 直接交给用户发现。DevTools 的 Network 和 Device Toolbar 不是摆设，得真用。
- 在 DevTools 中按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win/Linux），输入Network conditions回车，勾选Offline或选Slow 3G模拟卡顿 - 点顶部工具栏的
Toggle device toolbar（快捷键Ctrl+Shift+M），选 iPhone SE 或 Nexus 5X 看响应式是否断裂 - 特别注意：
viewportmeta 标签是否漏写？缺失会导致移动端页面缩放异常
检查控制台报错不能只看红字，要盯住 source map 和堆栈源头
压缩后的 JS 报错常显示 app.min.js:2:12345，这种定位毫无意义。上线前必须确认 sourcemap 是否生成且路径正确，否则调试等于盲人摸象。
- Webpack/Vite 用户检查构建配置中
devtool是否设为source-map（生产环境可设hidden-source-map，配合错误监控平台使用） - 确保生成的
.map文件与 JS 同目录，且 JS 文件末尾有注释行：//# sourceMappingURL=app.js.map - Chrome 控制台右上角三个点 →
Settings → Preferences → Sources → Enable JavaScript source maps必须勾选 - 遇到
Uncaught TypeError: Cannot read property 'xxx' of undefined，别急着改代码，先点堆栈里带.ts或.jsx的那一行，看原始源码位置
静态资源路径错位是上线后白屏/样式丢失的头号原因
开发时用 /static/logo.png 能显示，上线部署到子路径如 https://example.com/my-app/ 就 404——因为 /static/ 被解析成根目录，实际资源在 /my-app/static/ 下。
立即学习“前端免费学习笔记（深入）”；
- Vite 用户检查
vite.config.ts中base配置：base: '/my-app/'（结尾带斜杠） - Webpack 用户检查
output.publicPath，值必须与部署路径一致 - HTML 中所有相对路径尽量用
./或/ - 用
curl -I https://example.com/my-app/static/main.css实测资源能否返回 200，比肉眼刷新网页更可靠
真正卡住上线的，往往不是语法错误，而是路径、协议、构建配置这三处的隐性不一致。每个环节都得用真实请求验证，而不是依赖“看起来正常”。
