大型HTML项目发布后的全链条可用性检测方案-html教程-PHP中文网

本地双击打开html会触发cors拦截，因浏览器禁止file://协议下的跨源请求；必须用本地服务器（如python3 -m http.server）运行，且htmlproofer仅验证静态路径与结构，不检测js运行时错误或css媒体查询生效情况。

大型html项目发布后的全链条可用性检测方案

本地直接双击打开 HTML 会触发 CORS，不是代码问题

很多团队在发布前用文件协议（file://）双击打开 HTML 测试，结果 fetch、XMLHttpRequest 或动态 import 全部失败。这不是你 JS 写错了，是浏览器主动拦截——Chrome/Edge 默认禁止 file:// 下的跨源请求，Firefox 行为也不稳定。

必须起一个最小 HTTP 服务：

python3 -m http.server 8000（Python 3 自带，无需额外安装）
npx http-server -p 8000（需 Node.js，自动监听 0.0.0.0，手机也能访问）

然后访问 http://localhost:8000/index.html，CORS 立刻消失。如果部署到子路径（如 /my-app/），还要确认静态资源路径是否带前缀，否则 /static/logo.png 会 404——实际应为 /my-app/static/logo.png。

HTMLProofer 能查什么，不能查什么

htmlproofer 是静态 HTML 文件的“体检仪”，不是运行时环境模拟器。它能可靠验证：

所有 <a href></a>、<img src>、<script src></script>、<link href> 的路径是否存在（包括相对路径解析）
外部链接是否返回 2xx/3xx（可配 ignore_urls 和 ignore_status_codes 忽略已知不可达域名或 403）
<img> 标签是否缺失 alt 属性
<meta property="og:xxx"> 是否完整（需启用 check_opengraph）

但它查不了：

JS 运行时报错（比如 Cannot read property 'xxx' of undefined）
CSS 媒体查询是否生效（@media (max-width: 768px) 在设备模拟下才触发）
异步加载的内容是否渲染正确（htmlproofer 不执行 JS）

所以它必须和 DevTools + 真机访问配合，不能替代人工走查。

Chrome DevTools 设备模拟必须显式启用才生效

点一下 Chrome 的设备图标（Ctrl+Shift+M）不等于真开了设备模拟。很多 @media 查询、viewport 逻辑、甚至 window.innerWidth 都不会更新，除非顶部出现绿色提示条 “Device emulation enabled”。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

达成这个状态的必要操作：

手动选一个具体设备（如 iPhone SE 或 Pixel 5），不要停留在 “Responsive” 模式
或点击齿轮 → 勾选 Enable device emulation，并设置 UA 和分辨率
确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在且未被 JS 动态移除

注意：screen.width 不会变，但 window.innerWidth 会。如果你 JS 里用了前者做判断，得手动刷新页面再看值。

真机调试连不上？先关掉三个开关

手机访问不到本地服务，90% 是网络配置问题；真机 Safari/WebView 调试连不上，90% 是开关没全开。

局域网访问本地服务：

启动服务时绑定 0.0.0.0:3000（不是默认的 127.0.0.1:3000）
查开发机 IP（ipconfig / ifconfig），手机浏览器输 http://192.168.x.x:3000

iOS Safari 远程调试必备三步：

iOS：设置 → Safari → 高级 → 开启 Web Inspector（且不能在无痕模式）
macOS Safari：偏好设置 → 高级 → 勾选 Show Develop menu in menu bar
USB 连接后，iPhone 首次弹出“信任此电脑”必须点“信任”（iOS > 16.4 还要避免页面含 document.write()）

Android WebView 调试失败，大概率是 WebView.setWebContentsDebuggingEnabled(true) 没写在 Application.onCreate() 或 Activity.onCreate() 里，或者 debug 包没打上 android:debuggable="true"。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！