Skip to content

第 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)→ 详细测试 → 兼容性 → 响应式 → 异常场景

💬 给清秀留言