打开浏览器，何进按下F12，行本看到Console里一堆红色报错——这大概是地网每个做本地网页测试的人都经历过的瞬间。本地测试和线上测试最大的测试区别在于：你不需要考虑CDN、服务器缓存、何进跨域代理这些破事，行本但反过来，地网文件路径、测试端口冲突、何进浏览器安全策略会把你折腾得够呛。行本

我习惯把本地网页测试分成两个层面来看：一是地网“页面能不能跑”，二是测试“页面跑得对不对”。前者是何进基础，后者才是行本真正花时间的地方。

先解决“能不能跑”

最原始的地网方式是直接双击HTML文件。浏览器用file://协议打开，简单粗暴。但问题很快就来了——如果你用了fetch或者XMLHttpRequest去读本地JSON文件，Chrome会直接甩给你一个CORS错误。这不是你代码写错了，是浏览器不允许file://协议下的跨源请求。

解决办法有两个。一是换Firefox，它对本地文件的限制宽松一些。二是起一个本地服务器，这也是我更推荐的做法。Python自带了一个：在项目目录下敲python -m http.server 8000，然后访问localhost:8000就行。Node用户可以用npx serve，一行命令搞定。VS Code用户装个Live Server插件，右键“Open with Live Server”，改完代码自动刷新，省心。

端口冲突是另一个常见坑。8000被占了就换8080，8080被占了就换3000。有时候你忘了之前起的服务器还在后台跑，新起的服务绑不上端口，浏览器打开一看是旧页面的缓存，折腾半天才发现是这么回事。

再解决“跑得对不对”

页面能打开了，接下来才是真正的测试工作。Console面板是第一站。红色的报错必须解决，黄色的警告看情况——有些是第三方库的兼容性提示，不影响功能就先放着。

Network面板值得花时间看。我见过不少人本地开发时接口请求正常，部署到线上就挂了，原因是本地请求的是localhost:3000/api/data，上线后这个地址根本不存在。本地测试时就要留意请求URL是不是硬编码了localhost。另外注意看请求的Status Code和Response内容，有时候接口返回200但body里是{ "error": "xxx"}，光看状态码会漏掉问题。

Elements面板用来调样式。本地测试阶段改CSS可以直接在DevTools里改，满意了再写回文件。有个细节：Chrome的DevTools里修改的样式在你刷新页面后就没了，别改了半天才发现没保存到源文件。

响应式测试也别忽略。Ctrl+Shift+M切换设备模拟模式，至少过一遍手机和平板的常见尺寸。我遇到过桌面端布局完美、移动端按钮被遮住的情况，本地没测出来，上线后被用户截图发过来，挺尴尬的。

几个容易踩的坑

缓存。本地测试时浏览器缓存经常捣乱，改了JS文件刷新页面发现没变化，大概率是缓存。DevTools的Network面板勾上“Disable cache”，或者用Ctrl+Shift+R硬刷新。

路径大小写。macOS和Windows的文件系统默认不区分大小写，Linux区分。本地引用./Images/logo.png但实际文件名是images，本地能跑，部署到Linux服务器就404。写路径时养成好习惯，全小写，别用空格。

本地存储。localStorage和sessionStorage在file://协议下每个文件是独立的存储空间，换成localhost后又不一样。测试涉及本地存储的功能时，注意协议和域名是否一致。

说到底，本地测试的核心就是：起一个本地服务器，打开DevTools，把Console、Network、Elements三个面板看仔细。工具不复杂，复杂的是养成每次都认真看的习惯。

(责任编辑：知识)