第 11 课：集成移动端调试工具

背景

随着移动互联网的普及，Web 前端开发者的工作发生了根本的变化，开发的东西基本上以纯移动端页面、微信生态的 H5、APP 混合的 H5 页面为主。在 PC 时代给开发者带来巨大帮助的调试工具，如 Chrome 的调试器、火狐的调试器，在移动互联时代有点力不从心了。为了与移动 Web 开发相配套，移动端的调试工具是开发者最渴望拥有的武器。

远程调试工具

从移动端的 Web 开发诞生至今，也相继出现了很多调试工具。每一种工具的出现，无一不在丰富开发手段和方便前端开发者。我们来简单认识一下各式各样的调试工具。

模拟调试器

在 PC 浏览器的调试器中，模拟页面在各种移动设备上的表现。开发者在开发阶段可以方便地在 PC 的浏览器上进行调试，开发调试效率很高，但缺点也是显而易见的，毕竟只是模拟，有时候在模拟器上表现是正常的，实际到了真机上去看是有问题的。这类工具在主流的浏览器的调试器中都有提供，尤其以 Chrome 提供的最为强大。

真机调试器

为了方便调试移动页面在真实设备上的效果，Android 和 iOS 分别在各自的系统下提供了自己的远程真机调试方案。对于 Android 设备，Chrome DevTools 提供了远程调试功能，通过 USB 数据线将设备和电脑连接，Android 设备上开启 USB 调试模式，即可在 PC 端的 Chrome 浏览器中实时调试真机上的页面。iOS 设备与 Android 设备类似，也是通过配置 iOS 设备和 Safari 的调试模式，在 PC 上远程调试 iOS 设备上的页面。

真机调试虽然对页面在真实设备上的表现进行调试，但是需要进行配置，有一定的配置成本，并且无法调试内嵌在微信或者 APP 中的页面。

跨平台 Web 调试代理工