网页修改工具

改个网页上的网页字，居然要装一个几十兆的修改软件，这事本身就挺离谱的工具。前阵子帮朋友调一个落地页的网页文案，对方发来截图，修改说标题字号太小、工具按钮颜色偏暗、网页底下那行免责声明最好删掉。修改我打开浏览器开发者工具，工具右键检查元素，网页三分钟改完，修改截图发回去。工具朋友愣了半天，网页问用的修改什么插件。我说没插件，工具浏览器自带的。

很多人不知道，按 F12 或者右键“检查”，就能直接编辑当前页面的 HTML 和 CSS。改完刷新就还原，不会动到服务器上的文件。这个功能本来是给开发者调试用的，但拿来应付临时的文案预览、排版对比，比装一堆“网页修改器”实在得多。Chrome、Edge、Firefox 都支持，连 Safari 也有，只是入口藏得深一点。

当然，开发者工具只适合自己看。你要把改好的页面发给别人，或者保存下来，就得换工具。我常用的组合是 Tampermonkey 加一段自己写的脚本。Tampermonkey 是个浏览器扩展，装好之后可以往任意网页里注入 JavaScript。比如某个后台系统的表格列宽固定死了，看着难受，写三行代码把 table-layout 改成 auto，刷新即生效，永久保存。这比每次手动改强太多。

要是改的东西不涉及逻辑，纯粹是样式，Stylus 更省事。它只管 CSS，你给某个域名写规则，它自动应用。我拿它干过一件事：把某阅读网站的正文字体从宋体换成思源黑体，行高从 1.5 调到 1.8，背景色改成 #f5f0e8。写一次，以后每次打开都是这个效果。Stylus 的规则是存在本地的，不依赖网络，也不怕网站改版——改版了大不了再调一次。

说到改版，有个坑得提一下。用浏览器扩展改页面，本质上是在原页面加载完之后再动手。如果网站本身是动态渲染的，比如 React 或 Vue 写的单页应用，你的修改可能被后续的 DOM 更新冲掉。解决办法是用 MutationObserver 监听节点变化，或者在脚本里加延时。Tampermonkey 的 @run-at document-idle 有时候也不够，得配合 setInterval 轮询。这事没有银弹，得看具体页面怎么写的。

还有一类需求是批量改。比如公司内网有几十个页面，每个都要把页脚的年份从 2023 改成 2024。手动一个个改不现实。这种场景适合用 Greasemonkey 的 @match 通配符，写一条规则覆盖整个域名，脚本里遍历所有 footer 元素，替换文本内容。一次编写，全站生效。我见过有人拿这个思路给内部 Wiki 加暗色模式，效果比官方主题还好。

工具本身不复杂，复杂的是判断什么时候该用哪个。临时看一眼，开发者工具足够。长期生效，Tampermonkey 或 Stylus。要跟别人共享修改结果，直接存成 HTML 文件发过去最稳妥。别为了改一行字去装一个带界面的“网页修改大师”，那东西往往还捆绑广告。浏览器自带的、开源的、自己写几行代码的，反而更可靠。

最后说个真事。有个做运营的同事，每天要复制某个后台的数据到 Excel，格式乱得一塌糊涂。我帮她写了个 Tampermonkey 脚本，在页面上加一个“复制为表格”的按钮，点一下就把数据整理成 TSV 格式进剪贴板。她用了半年，直到系统升级换了前端框架，脚本失效。她又来找我，我说这次得用 MutationObserver 重写。她叹了口气，说能不能直接让开发改。我说能，但你得排期。她想了想，说那你还是写吧。