如何进行本地网页的测试考试题
把HTML文件往浏览器里一拖，何进看到页面正常渲染，行本不少人就以为测试结束了。地网这远远不够。测试本地测试考的考试是你能不能在脱离服务器环境的情况下，把交互、何进存储、行本路径这些坑一个个踩明白。地网
先搞清楚“本地”到底意味着什么
双击打开一个.html文件，测试地址栏显示的考试是file:///C:/Users/...，这就是何进最典型的本地环境。它和http://localhost有本质区别——没有HTTP协议头，行本没有同源策略的地网正常运作，fetch和XMLHttpRequest请求本地JSON文件时大概率会被CORS拦截。测试我见过有人写了个读取data.json的考试页面，本地双击打开死活加载不出来，换成VS Code的Live Server插件立刻正常。这不是代码写错了，是协议变了。
所以测试第一步：明确你的页面是否需要发起网络请求。如果纯静态展示，file://够用；一旦涉及数据加载、模块导入（type="module"的script标签在file://下同样会被拦），就必须起一个本地服务器。Python自带的python -m http.server 8000，或者Node的npx serve，一行命令的事。
路径问题比你想的更普遍
绝对路径/css/style.css在本地服务器下指向localhost:8000/css/style.css，没问题。但如果你把文件发给别人，对方直接双击打开，这个路径会指向磁盘根目录，样式全丢。相对路径./css/style.css更安全，但要注意层级关系。有个同学做课程作业，页面在pages/about.html，引用了../images/logo.png，本地服务器跑得好好的，打包交上去老师直接打开about.html，图片裂了——因为老师没走服务器，..的解析基准变成了file://的根。
测试时把控制台打开，切到Network面板，看每个资源的加载状态。404的一眼就能揪出来。
交互和存储别只点两下就完事
表单验证、按钮点击、DOM更新，这些在本地环境下和线上没有区别，但localStorage和sessionStorage有坑。file://协议下，不同浏览器对本地存储的处理不一致。Chrome允许file://使用localStorage，但每个文件被视为独立源；Firefox某些版本直接禁用。你写的“记住用户偏好”功能，在自己电脑上好好的，换台机器就失效了。
更稳妥的做法是测试时用本地服务器，保证协议一致。另外记得测localStorage满了怎么办——虽然本地测试很少触发5MB上限，但你可以手动在控制台执行localStorage.setItem('test', new Array(6*1024*1024).join('a'))，看看代码有没有做异常捕获。没做？那线上遇到用户存了大量数据时就会白屏。
响应式和兼容性得亲自试
浏览器DevTools的设备模拟功能很好用，但它模拟不了真实触摸事件和移动端浏览器的怪异行为。本地测试时至少用Chrome、Firefox、Edge各开一遍。我遇到过input type="date"在Chrome里正常显示日期选择器，Firefox里变成纯文本框，用户根本不知道要输什么格式。这种问题在本地就能发现，不用等到上线。
还有details和summary标签的默认箭头样式，Safari和Chrome渲染差异明显。本地测试时把系统字体调大、浏览器缩放调到150%，看看布局会不会崩。这些细节花不了几分钟，但能省掉后面大量返工。
写个检查清单比凭感觉靠谱
我的习惯是每次本地测试前打开一个checklist.md，逐项打勾：控制台无报错、Network无404、所有链接可点击、表单空提交有提示、刷新后状态保持符合预期、缩放窗口布局不错乱、至少两个浏览器表现一致。清单不长，但能挡住八成低级问题。
本地测试不是走形式。它是你上线前最后一道能完全掌控环境的关卡。把file://和http://localhost的区别吃透，把路径和存储的坑提前填上，比事后在线上抓瞎强得多。