怎么一边打字一边看到 HTML 改动？

用一个自带实时预览的编辑器打开文件。你改代码也好、改页面也好，渲染出来的结果当场就更新——不用保存，不用切到浏览器，不用刷新。单个 .html 文件，这一套不需要构建步骤，也不需要本地服务器；一个跑在浏览器里的可视化编辑器，会在你干活时把真页面实时渲染出来，所以每个改动都立刻显示在你代码旁边。

有没有带实时预览的 HTML 编辑器？

有，而且好几个。VS Code 这类代码编辑器靠一个扩展加上实时预览，浏览器里的可视化编辑器则默认就把页面摆在代码旁边。HTML Tweak 就是个免费的：它打开你现成的 .html 文件，把可视页面和代码并排放，让两边保持同步，还不用注册——你一编辑，预览就跟着你打字更新。

为什么改了 HTML 非得一直刷新才能看到？

因为在浏览器里打开一个文件，看到的是一张定格的快照——浏览器不盯着这个文件，只有你刷新时它才重新读一遍。你要是在另一个程序里改了文件、保存、再切回来，就得刷新才能载入新版本。一个带实时预览的编辑器把这步拿掉了：它跟着你打字渲染页面，也就没什么可刷新的了。

不用本地服务器和构建，能预览 HTML 改动吗？

能。单个 .html 文件，用不着开发服务器，用不着打包器，也用不着热重载工具——那些是给框架项目的。一个跑在浏览器里的可视化编辑器，打开文件，在你编辑时实时渲染，全程都在浏览器里。HTML Tweak 就这么干：一张页面，没有构建，而且在 Chrome 或 Edge 里，它能把改动直接写回你的文件。

HTML 页面怎么在手机上预览？

既然你的实时预览就是真浏览器里的真页面，不用额外装软件，你就能查手机和平板的宽度。把浏览器窗口拖窄，或者打开浏览器自带的响应式模式，挑一个宽度。留意溢出的文字、换行的按钮、还有冲出屏幕的图片。一张在笔记本上看着没错的页面，换个更小的宽度照样会坏，所以发布前先查一遍。

怎么实时预览 HTML 改动

给一个按钮改一下内边距。保存。切回浏览器，刷新，凑近看看成没成。没成——于是把数值挪一格，保存，切换，刷新。再来一遍。就这么一套四拍子的来回，你能耗掉半个上午，末了那个按钮还是差着两个像素。

办法早就不新鲜了——实时预览——我也不会假装是我发明的；能做的编辑器一大把，我在别处比过几个免费的 HTML 编辑器。所以这不是替哪个工具吆喝。我想说的是，那套小来回，花掉的远不止它看上去的那几秒。

循环慢倒在其次，黏手才要命

刷新这套动作，坑你的不只是秒数。它坑掉的，是你手里正攥着的那根线。

每一次 alt-tab 切走再重载，你就丢了位置——滚到哪儿了，下一步想试什么那个还没成形的念头，眼睛刚才盯着的那个点。结果隔了四步才冒出来，就渐渐跟引发它的那个改动脱了钩。于是你不再折腾了。一个颜色，飞快试五个版本，本该几乎是零成本。可每试一个都要保存-切换-刷新，你就劝退了自己四回，将就用第一个。

实时预览把这条缝合到零。你打字，渲染好的页面就动。改动和结果并排摆着，中间没有延迟。而且对一个朴素的 .html 文件来说，底下没有任何机械——不用起本地服务器，不用跑构建，也没有一个监听任务在终端里嗡嗡转。编辑器就在浏览器里渲染那张真页面，每敲一个键就重绘一次。

框架项目是另一码事。一个 React 或 Next 应用确实需要带热重载的开发服务器，那也是干那活儿的对的工具。但你不该为了在单页上看一个标题变个样，就得先把它支起来。

一刷新就全忘光的那种实时预览

这里得提个醒，因为它几乎人人都要栽一次。

在 Chrome 里打开一个页面，右键，选「检查」，你就能在 DevTools 里直接改 HTML，眼看着它实时变。看着像是答案。其实不是。那些改动只活在那一个标签页里——一刷新就没了，也从没碰过你磁盘上的文件。DevTools 是一种你留不住的实时预览。拿它戳一戳页面、看看某个改动长什么样，好用得很；可要让那个改动落定，它没用。你想把改动存下来，就得要一个会写回文件的编辑器，而不是一块一重载就把你的活儿扔掉的浏览器面板。

点哪个，就落到它的代码上

这套循环，一半是看见改动。另一半，是找到该在哪儿改。

那种感觉你熟。预览不对劲——那个标题字号错了——你就开始滚代码，在四十个长得都差不多的标签里，翻那个对的。这一翻，是笔单独的税，还是笔悄没声的税。

一个双向的编辑器，把它取消了。在预览里点那个元素，它背后的代码就亮起来。HTML Tweak 管这叫「点击定位」——点页面上那个标题，编辑器就跳到它那一行，把它标出来。它两个方向都走。在代码里打字，预览跟着更新；在预览里点一下，代码跟着走。可视的页面和源码并排摆着，永远在说同一件事。要是并排不合你口味，你可以把它们上下叠，或者藏掉一个，只在代码里、或者只在页面上做——看你眼前这个改动要哪种。

眯着眼硬看的那部分，大半就此收场。你不用再在「哪儿看着别扭」和「它在文件里的哪儿」之间来回翻译了。它们是同一个点击。

同一张页面，放到手机宽度

一张页面，在你笔记本上看着收工了，到手机上却能散架。

这一条，刷新循环藏得最深——因为你只在一个尺寸上测，就是你正巧坐在它跟前的那块屏。然后页面发出去，到了窄屏上，导航换行，一个标题冲出边界，两栏本该并排的，堆成了一团乱。

既然实时预览就是真浏览器里的真页面，你不用另装什么，就能查那些小尺寸。把窗口拖窄，看什么会重排。或者打开你浏览器自带的响应式模式——在 Chrome 和 Edge 里，它是 DevTools 里的那条设备工具栏——一档一档过手机、平板、桌面的宽度。你要找的，是溢出框外的文字、折成两行的按钮，还有任何越过屏幕边缘的东西。趁早在这儿、在你桌前逮住它，别等三天后客户甩给你一张截图。

六步走到实时预览

下面是整趟流程，从头到尾。要是连把文件打开都让你没底，我把打开 HTML 文件的几种办法另写过一篇。

在一个页面和代码一起显示的可视化编辑器里，打开你的 .html 文件。在 HTML Tweak 里，你直接从电脑上打开它——什么都不上传。
把两块面板并排摆好，好让你一眼看到两边。
开始改。改页面上的字，或者改代码里的一个标签——哪一边都会把另一边实时更新，跟着你打字走，中间没有保存再刷新。
预览里想改什么就点什么，让「点击定位」把你送到它的代码上。
拖窄了查一遍。把窗口收进来，或者用浏览器自带的响应式模式，确认布局在手机上撑得住。
保存。在 Chrome 或 Edge 里，改动直接写回你的原文件；别的浏览器，你会拿到一份改好的副本下载下来。不管哪种，都没有构建，也不用注册。

会让预览骗你的那些小事

实时预览把你的文件照得很近——但没到分毫不差。有那么几样东西，能让它给你看一个不太真的样子，趁其中一个还没害你搭进一个钟头，值得先知道。

缓存里的旧 CSS 或旧图。 你的页面要是引了一张样式表或一张图，浏览器有时会攥着一份旧的不放。你的 HTML 实时在更，可一张过期的背景图却能一直赖着。对底下那张页面来一次硬刷新——Ctrl+Shift+R——就把它清掉了。
一辈子只在一个宽度上测。 上面我说过，它到现在还是最常见的漏。笔记本上完美，手机上就烂。把拖窄了查这一步，养成习惯，别当事后补的一手。
把预览和存下来的文件搞混。 实时视图，你一打字它就照出你的改动。磁盘上那个文件，只有你保存了才变。不保存就关掉，页面照旧留着它的老内容，管你有没有实时预览。
去够一个你根本用不上的构建工具。 一个 .html 文件，不想要开发服务器，不想要打包器，也不想要热重载插件。为看一个颜色变一下，那是一大堆配置。留给真正的项目用吧。

眼下正好有张页面开着，还有个改动，你一遍遍刷新就为看它成没成？用实时预览打开它，看它跟着你打字动起来——刷新键，这下午可以歇了。