[Day 28] Device Simulation & Remote Debugging

随着网站的手机使用率越来越高，行动版网站渐渐变成标配，为了避免同时需要维护多个网站或是 SEO 被瓜分，通常会以 RWD（Responsive Web Design） 来开发行动版介面。

进行 RWD 开发时，常常会使用 Chrome DevTools 中的 Mobile viewport simulator 来模拟行动装置的萤幕宽度，然而事情没有那麽简单，即使在 Chrome DevTools 中调整完 CSS，在手机浏览器中开启网页时总会出现意料之外的破版。

除了 CSS 之外，JavaScript 在不同浏览器中的行为也是变幻莫测，最好的方式还是得真机实测，本文的将会以行动版网站开发为主，分别说明：

• Chrome DevTools 装置模拟器中重要的功能
• Android 和 iOS 的 Remote debugging
• 行动版网页测试工具

装置模拟

首先是大家熟知的 Device Toolbar，点击 DevTools 左上角的手机图示後浏览器会模拟行动版的页面宽度，工具列中可以模拟多种装置的萤幕大小例如 Moto G4、iPhone 6/7/8 Plus 等等，还有一些设定：

Throttle

点击 Online 只有两个选项，可以限制 CPU 效能和流量：

• Mid-tier mobile – Fast 3G + CPU 4x slowdown
• Low-end mobile – Slow 3G + CPU 6x slowdown

更客制化的设定只能去 Network 或是 Performance 面板，不过最重要的是此处的效能限制是相对於目前的开发环境，如果开发环境的效能比较好可能看不出什麽区别，且真实设备的硬体架构通常和开发环境差异较大。

Rotate

旋转手机的图示则是模拟直式萤幕（Portrait）和横式萤幕（Landscape），可以针对横式萤幕再精进使用者体验，另外也可以监听 orientationchange 事件在萤幕方向改变时做出反应。

Device pixel ratio（DPR）

CSS pixel 大小并不等於萤幕上真实存在的 Pixel 大小，而 DPR 就是他们之间的比例，例如 iPhone X 的 DPR 是 3，而萤幕长宽的 CSS pixels 是 375 x 812，手机的实际 Pixels 就是三倍 1125 x 2436。

行动装置萤幕虽然比较小，但通常 DPI 较高（Pixels 间的距离较小），浏览器会尽可能的显示所有内容，把 CSS Pixels 缩小到实际 Pixels，结果就是出现三倍小的页面，因此通常 HTML 会加上这一行：

 <meta name="viewport" content="width=device-width, initial-scale=1">

让浏览器维持 CSS Pixels 和 DPR，让 CSS 30px 的元素实际占了萤幕的 90 Pixels，才不会让眼睛脱窗。

Device type

预设模拟行动版设备时点击事件会变为 touch，而不是原本的 mouse，且 Scrollbar 的样式也不同，可以从选单里面在 Mobile/Desktop 和 touch/no touch 之间排列组合。

图示自动隐藏

另外要注意工具列的设定如果萤幕太窄的话会自动隐藏（用小萤幕时曾经被雷过）

Sensors

按 ESC 打开 Drawer 内的 Sensors 面板，里面有一些有趣的选项，例如 Geolocation 和 Orientation。

Geolocation

Geolocation 可以用来修改经纬度、语系、时区，另外也可以直接选择预设的地点，或是 Location unavailable，用来测试无法取得位置的情况。

Orientation

和刚刚提及的 Rotate 不同，此处的 Orientation 是指和地心引力方向的相对旋转角度，监听 deviceorientation 事件就能取得当下手机旋转的角度。

如果搭配 devicemotion 事件监听加速度就能把手机变成 Switch 摇杆，可以用手机打开 Demo 页面 Device - Orientation & Motion 页面试试看这两个事件，关於事件的介绍：Device Orientation & Motion

Rendering

Drawer 内的 Rendering 面板有另外一些画面相关的模拟功能：

• Emulate CSS media type – 可用来测试 Print media type，不需要特地按下列印、来观察结果。
• Emulate CSS media feature prefers-color-scheme – 模拟浏览器设定为深色、浅色模式，在 CSS 中可依据深浅色模式加入 Media query，例如预设深色模式：

body {
  background-color: black;
  color: white;
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

• Emulate vision deficiencies – 模拟视觉障碍如模糊、色盲。

Remote debugging

在电脑上开发完毕到手机上测试时，如果出现不预期的错误但又看不出所以然，可以利用 Remote debugging 在电脑上开启手机浏览器的 DevTools。

Android

请确保手机和电脑的 Chrome 版本相同

• 对着手机设定内的版本号码连点，直到开启开发人员选项，在选项里开启 USB 侦错。
• 接上电脑和手机，在电脑的 Chrome 网址列输入 chrome://inspect
• 手机会跳出允许 USB 侦错吗？ 当然允许
• 开启手机的 Chrome，电脑 Chrome 就会显示已开启的页面

按下 inspect 就会开启 DevTools 了，左侧显示的虽然是 Screencast，但还是能够 Inspect 元素，只是 FPS 有点低。

手机浏览器的背景颜色真的变了，只是我不知道怎麽证明。另外上方灰白处是浏览器的工具列。

iOS (Safari)

首先必须有 iPhone 和 Mac...

• 在 iPhone 进入 Safari 的设定 > Advanced，开启 Web Inspector 和 JavaScript。
• 打开 Mac 的 Safari > Preferences > Advanced，打开最下面的 Show Develop menu in menu bar。
• 同时打开两边的 Safari 後，用实体的线接上手机和电脑，这时手机会跳出 Trust This Computer? 当然选择 Trust。
• 打开 Mac Safari 的 Develop 选单就可以看到 iOS Safari 目前开启的网页，点击 sh1zuku.csie.io - demo 就会开启 Safari DevTools。

开启多个分页 Safari 地下就会有多个选项

其实跟 Chrome DevTools 还是有几分相似

测试工具

除了功能面的开发测试，还可能需行动版装置的效能优化和检查，以下列出几个好用的工具：

WebPageTest

和 Performance 面板一样，可以撷取页面载入过程的截图、效能、事件时间轴，但更厉害的是可以选择不同的地区、装置来测试页面，比起 DevTools 中只能模拟萤幕相关的属性，WebPageTest 会在实机上开启网页，显示最真实的测试结果。

此外 WebPageTest 能比较历史测试结果、一次执行多种测试、测试连续载入页面的快取、将测试整合到 CI/CD 等等，是非常全面的网页测试工具。

Mobile friendly test

输入想要测试的网址後，会显示 Googlebot 实际爬完页面的结果（会受到 robot.txt 影响），同时显示该网站在行动版装置的问题，例如内容超出萤幕、字体过小、可点击元素距离太近等等。

Credits

window.devicePixelRatio
Using the viewport meta tag to control layout on mobile browsers