网页修复软件

上周帮朋友处理一个老项目，打开页面差点没认出来——导航栏挤成一团，修复图片全部撑破容器，软件按钮点上去毫无反应。网页控制台里几十条红色报错，修复像过年放鞭炮。软件他问我有没有什么工具能一键搞定，网页我盯着屏幕愣了几秒，修复脑子里闪过无数个“修复”相关的软件软件名字，但真正能用的网页，其实没几个。修复

市面上的软件网页修复工具，大致分两类。网页一类是修复给普通用户用的“急救型”，比如浏览器的软件开发者工具里那个“修复页面”的隐藏选项——Chrome 按 F12 打开控制台，在 Console 面板输入 document.designMode = 'on' 也能临时改改文字，但这跟修复不沾边。真正的修复软件，比如 Web Page Fixer 或者 HTML Tidy 这类老牌工具，干的其实是“清理和纠错”的活。Tidy 最早是 Dave Raggett 在 1998 年扔出来的，专门收拾那些手写 HTML 留下的烂摊子——标签没闭合、属性没引号、嵌套错位，它跑一遍，输出一份干净代码。我前阵子翻出一个 2005 年的静态页面，用 Tidy 处理完，原本 300 多行的混乱结构缩到 120 行，浏览器渲染速度肉眼可见地提了一截。

但 Tidy 管不了样式。CSS 崩了，它只能干瞪眼。这时候得换 Stylelint 或者 PurgeCSS 上场。Stylelint 严格来说是个检查器，不过配上 --fix 参数，它能自动修掉一部分语法错误——比如漏掉的分号、拼错的选择器、重复的属性。我试过拿它跑一个从某模板站扒下来的 CSS 文件，原本 2000 多行里藏着 40 多处问题，跑完只剩 3 个需要手动处理的警告。PurgeCSS 更狠，直接删掉没用到的样式规则。有个做电商的朋友，页面加载慢得要命，我让他用 PurgeCSS 扫了一遍，CSS 体积从 480KB 掉到 92KB。当然，删过头也是常有的事——动态添加的类名它认不出来，得配白名单。

“修复”这个词其实有点误导。大部分工具做的不是“修”，而是“重写”——按它认为对的方式重新生成代码。所以备份永远是第一步。

JavaScript 的修复更麻烦。语法错误还好说，ESLint 的 --fix 能自动补分号、改引号、调整缩进。但逻辑错误呢？比如事件监听绑错了元素，或者异步回调里 this 指向乱了。这种得靠 Jest 或者 Mocha 写测试来兜底。我自己的习惯是，拿到一个坏掉的页面，先跑一遍 npx eslint . --fix，再手动过一遍核心交互。有次一个轮播图不动，查了半天发现是 setInterval 的延迟参数写成了字符串 "3000"——浏览器居然不报错，只是默默用 0 毫秒疯狂切换。这种坑，再智能的修复软件也猜不到。

还有一类工具专门对付兼容性。比如 PostCSS 配 autoprefixer，自动给 CSS 属性加浏览器前缀。现在 flex 和 grid 的兼容问题少了，但前几年做 IE 适配的时候，这玩意儿救过不少命。另一个冷门但好用的是 HTML5 Shiv，让老 IE 认识 <header>、<section> 这些新标签。不过现在 IE 都进坟墓了，这些工具慢慢成了历史遗物。我硬盘里还存着 2014 年下的一个 ie-css3.htc，当年为了让圆角在 IE8 里显示，折腾了整整一个下午。现在回头看，那种修复更像是在跟浏览器打架。

说回朋友的页面。我最后没用什么“一键修复”软件。Tidy 跑了一遍 HTML，Stylelint 修了 CSS 语法，剩下的布局问题——那个挤成一团的导航栏——其实是 flex 容器的 flex-wrap 被误删了。手动加回去，刷新，一切正常。整个过程花了不到二十分钟，其中十五分钟在找问题，五分钟在改代码。工具帮了忙，但真正“修复”网页的，还是得靠人眼和人脑。那些宣称能全自动搞定一切的软件，要么是噱头，要么会在你看不见的地方埋下新雷。

所以如果你问我推荐哪个，我会说：装个 Tidy 和 ESLint，配好 Stylelint，剩下的靠自己。网页修复这件事，工具是螺丝刀，不是魔法棒。

(责任编辑：百科)