为什么 HTML 改了，浏览器里却不显示

有回这事儿卡了我整整十分钟。我在下载文件夹里存着一个文件，刷新的却是另一个标签页——那页是从桌面打开的。名字一样，内容一样，两个不同的文件，我一直在改的，是那份没人看的副本。这种事，十有八九就这么来的。HTML 改了不显示，问题几乎从不在代码——是缓存旧了、文件根本没存上、后缀悄悄成了 .html.txt、改动卡在开发者工具里，或者浏览器读的，压根是另一份副本。下面是我每次都会过一遍的清单，最容易抓到的排在最前。

六十秒排查清单

动手改之前，先把这张清单从头看到尾。多数时候，答案已经躺在里面了。

• 你没存。 改动还在编辑器里，压根没写进磁盘。
• 你看的是另一份副本。 标签页指向了别的文件夹，或者一个线上版本——不是你改的那个文件。
• 浏览器把它缓存了。 它从内存里端出旧页面、旧 CSS，而不是重新读文件。
• 文件后缀错了。 index.html.txt 看着没问题，行为却跟纯文本一样。
• 你只在开发者工具里改了。 那些改动活在标签页里，一刷新就没。
• 另一条 CSS 规则压过了你的。 你的改动确实在——只是输了层叠这场架。

接下来是修法，按我实际会排查的顺序来。

其实你根本没存上

先从最蠢的可能查起，因为它最常见。看一眼编辑器的标签——上面要是有个圆点或星号，那就是「未保存」的记号，你在改动落盘之前就去刷浏览器了。Ctrl+S。好了。

同一个毛病，还有个更闷声的版本：存错了地方。编辑器把「副本存到了」你没料到的角落，或者文件开了两份，浏览器读的，是你从没动过的那个原件。这就直接引出下一条。

你改的是一个文件，看的是另一个

这是上一条的双胞胎，藏得还更深。文件同时开在两处——比方说两个不同的文件夹，或者一份本地副本加一个线上版本——你勤勤恳恳改着这一份，浏览器给你看的却是那一份。

看地址栏。本地文件会显示一条 file:/// 路径，带完整位置，它得跟你刚改的文件一字不差地对上。要是你弄的是一个真在跑的站点——挂在 localhost 上，或者早就部署到了某处——那又多一层。刷本地文件，看不到服务器上的改动；刷线上网址，看不到本地的。先弄清你改的到底是哪一份，再让浏览器精确指向那一份。

浏览器端给你的，是昨天那张页面

浏览器会把页面、图片，尤其是 CSS，在本地存一份，省得每次访问都重新下。多数日子，这是帮忙。可你正在改的时候，它就是那个当面撒谎的——随手一刷，它可能把缓存版塞给你，而不去重读文件。

修法是硬刷新，等于告诉浏览器：把你那份扔了，全部重新去取。Windows 和 Linux 上 Ctrl+Shift+R，Mac 上 Cmd+Shift+R。Windows 上 Ctrl+F5 也行。CSS 是这里最阴的一环——你的 HTML 文字更新了，样式却没动，因为那张外链样式表是单独被缓存的。一次硬刷新，两样一起清。要是它还死攥着不放，打开开发者工具，开着的状态下，右键点刷新按钮，选「清空缓存并硬性重新加载」。这一下，页面什么都不给你留。

你的文件，悄没声成了 .txt

先说怎么修，再说为什么。存之前把「保存类型」改成「所有文件」，或者给名字套上引号——"index.html"——再打开「显示文件扩展名」，好让你看清真正的结尾。坑你的，是记事本的默认行为。你在改 index.html，点了另存为，对话框却当它是纯文本文档，顺手给你缀上 .txt，你就这么揣着 index.html.txt 走了——浏览器把它当文字读，而旁边那个真正的 .html，一动没动。这一条坑到的人，比清单上其它任何一条都多，我在怎么编辑一个 HTML 文件里讲得更细。

你只在开发者工具里改了

要是你一直在右键点页面、选「检查」，然后把改动敲进元素面板或样式面板——那些改动不是真的，至少不是算数的那种真。开发者工具里的改动，活在标签页的内存里。拿它在实时页面上试个效果，很好用；可它从不碰磁盘上的文件，你一刷新，它转眼就没。

所以改动消失，一点不奇怪。刷新，干的正是「把它扔掉」这件事。想让它留下，就把管用的那段从开发者工具里拷出来，粘进你真正的文件，然后保存。开发者工具是张草稿纸，你在上面涂涂看效果。文件才是正本。两者之中，只有一个会留住你写的东西。

是另一条规则，赢了这场架

有时候改动确确实实在文件里，存了，也没走缓存——可就是纹丝不动。十有八九，是 CSS 在压 CSS。你给一个段落设了颜色，但样式表更靠下的一个更具体的选择器，或者直接贴在元素上的一个行内样式，又或者谁随手丢下的一个 !important，把你比下去了。先看的是特指度——一个更精准的选择器，不管它在文件里排在哪，都赢；只有当两条规则特指度相同，才轮到靠后那条胜出。这是层叠在照规矩办事——只不过办的不是你心里那件事。

开发者工具会把这一切摊开给你看。检查那个元素，打开样式面板，输掉的那条规则就在那儿，身上划着一道删除线。划掉你规则的那个，就是你要改的、或者要写得比它更具体的。这一招，永远比瞎猜强。

一个实时编辑器，怎么把这些大半绕开

回头看那张清单，留意大半条目共有的东西。保存、切到浏览器、刷新——编辑和看见之间的那道小缝，正是缓存钻进来的地方、错文件溜进来的地方、.txt 藏身的地方。把这道缝合上，这些麻烦大半就压根发生不了。

这就是我做那个工具——HTML Tweak——的想法。你打开自己的 .html 文件，渲染出来的页面和代码并排摆着，边改边同步——动一边，另一边跟着动，中间没有「存一下再刷一下」那套。没有缓存副本要跟你较劲，因为你看的就是文件本身；你敲进去的东西，也不会卡在某个一刷新就忘的面板里。在 Chrome 或 Edge 里，它直接存回文件；别的浏览器，下载一份改好的副本。它跑不了多文件的 React 或 Next 项目——它是为收尾一个单独页面做的——但就这件事而言，「怎么不显示」这个问题，基本就不再冒出来了。

所以下次页面赖着不动，从头把清单过一遍——几乎总是缓存的锅，几乎从不是你眼花。要是你压根不想玩「存一下刷一下」这场轮盘赌，HTML Tweak 就是让你边打字，边看着文件变。