第 6 课：怎么测一个 Web 网站

浏览器兼容、响应式、Chrome DevTools

一、5 个测试维度

功能 → 浏览器兼容 → 响应式 → 前端 Bug → 性能

二、浏览器兼容

必测： Chrome（最高）、Safari（Mac 用户）、Edge 原则： Chrome 保证功能，Safari 保证展示，Edge 快速过

常见差异： CSS 渲染、字体、某些 JS API 支持程度、第三方 Cookie 策略

三、响应式测试

覆盖 3 种尺寸：

• 手机 375px / 390px
• 平板 768px / 1024px
• 桌面 1280px / 1440px / 1920px

Chrome DevTools 的"设备模拟"一键切换。

四、前端常见 Bug

1. 样式问题 — 颜色不对、文字溢出、图片裂图
2. 数据交互 — 列表加载不出来、翻页不刷新
3. 路由白屏 — 刷新后 404、前进后退不好使
4. 空状态 — 列表为空时是空白还是"暂无数据"

五、Chrome DevTools

只需要记住 3 个面板：

• Elements：改 CSS 实时预览
• Console：看 JS 报错
• Network：看请求状态码和耗时

六、实测流程

冒烟（10min）→ 详细测试 → 兼容性 → 响应式 → 异常场景