如何进行本地网页测试

本地网页测试，何进说白了就是行本打开浏览器，输入`file://`开头的地网路径，直接看效果。页测这事我干了十几年，何进从记事本写HTML开始，行本到现在用VS Code，地网流程没变过——写代码，页测保存，何进刷新浏览器。行本就这么简单。地网 但真到了要正经测试的页测时候，光双击HTML文件是何进不够的。你会遇到跨域问题、行本接口调不通、地网Cookie失效这些破事。我吃过亏，所以现在都习惯起个本地服务器。用Python的话，一行命令的事：`python -m http.server 8000`。Node环境就装个`live-server`，还能自动刷新。这操作不是装逼，是避免“为什么我打开的页面跟别人不一样”的尴尬。 写个简单的例子。你有个`index.html`，里面用fetch请求同目录下的`data.json`。直接双击打开，控制台大概率报错——CORS策略阻止了请求。但起了本地服务器后，一切正常。这就是本地测试的第一个坑：浏览器对`file://`协议的限制比`http://`严格得多。 还有更隐蔽的问题。你改了CSS，刷新页面却看不到变化。别急着骂浏览器缓存，先检查是不是文件保存路径错了。我遇到过同事把样式写进`style.css`，但HTML里引用的是`Style.css`——Windows不区分大小写，Linux服务器区分。本地测试时一切正常，部署到线上全乱套。这种坑，只有多测才能发现。 测试时别光看页面长啥样。按F12打开开发者工具，看Console有没有报错，Network里每个请求的状态码是不是200。我习惯在Console里打点日志，确认JS逻辑执行到哪一步。有一次排查半天，发现是变量名拼错，控制台早提示了，我没看。现在我会先看Console，再看页面——顺序反了会浪费大量时间。 响应式布局也别跳过。F12里切换设备模拟，或者干脆把浏览器窗口拖窄。手机上看着正常的页面，在桌面端可能字大得离谱。我见过最夸张的情况，是某个按钮在375px宽度下完美居中，但拉到1440px就飞到左上角。本地测试时多拖几次窗口，比上线后被人吐槽强。 最后说个土办法。改完代码，按`Ctrl+Shift+R`强制刷新，清缓存。如果还不行，就开个无痕窗口——排除插件干扰。这招治好了我无数次“明明改了却不变”的焦虑。本地测试就是反复试错，工具越简单越好，关键是别偷懒。 测试完别急着关。把页面滚动一遍，点击所有按钮，提交一次表单，甚至故意输入错误数据。浏览器不会替你做这些，只有手贱多试几次，才能发现隐藏的bug。我吃过亏，所以现在每次测试都像强迫症一样把所有交互点一遍。麻烦是麻烦点，但总比用户发现强。