移动端网页调试

[reng99]

在家屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容。

在这个5g到来的时代，移动互联网继续横行，前端的开发工作和移动端更加紧密了，但是移动端调试着实让人尴尬。化解尴尬的方法介绍下下面这几种，有补充的欢迎留言👏

使用Chrome Develop Tool调试

作为一个前端开发工程师，没下载个谷歌浏览器都不好意思说自己是混这行的了。在移动开发的过程中，我们是可以使用桌面浏览器（推荐谷歌）进行调试的。尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。

Chrome自带的Developer Tool对于调试移动端网页来说非常方便，可以通过调整下表所示的几个属性来调整页面。

属性名	功能
User Agent	设置当前模拟设备的用户代理(UA)
Device metrices	设置页面的大小，默认值是模拟设置的大小
Emulate touch events	模拟触摸屏事件
Fit in window	页面大小是否会根据窗口大小进行适配

优点：无须额外的成本，方便快捷。

缺点：仅仅用来模拟，并不能完全代表移动设备的真实状况。

使用IOS Safari + Mac OS Safari配合调试

这个方法对用MAC来办公的伙伴就比较友好了～

Apple允许开发者通过数据线连接的方式，在Mac OS的Safari里面调试iOS设备上的网页。但是这种方法在使用前，需要简单设置以下内容：

• 在iOS设备上，打开Safari的Web检查器，选择设置 -> Safari -> 高级 -> Web检查器命令。（用到JavaScript的话，顺便在Web检查器同级上开启吧）
• 在计算机上的Safari启用开发菜单，选择偏好设置 -> 高级 -> 在菜单栏中显示'开发'菜单命令。

当需要调试手机页面的时候，将设备与计算机通过数据线连接后，在Safari菜单开发栏下选择当前手机运行的页面即可。

优点：可以完全在真机设备上调试网页，无论是HTML和CSS，还是脚本和请求，都和在桌面浏览器一样，最重要的是当前调试的是在真实环境下的页面。

缺点：必须是iOS + Mac OS的组合，只能调试iOS设备的页面，不适用于Andriod设备。

使用Android Chrome + 桌面Chrome配合调试

嗯～Apple那么强势，我安卓表示不服，也要来自己的一套。

Google Chrome DevTools通过USB数据线直接调试手机上的网页。

只需要准备下面几个步骤：

• 在Andriod"开发者"选项里打开USB调试模式。
• 插上USB数据线。
• 在Chrome菜单里选择"工具"选项，继续选择检查设备选项，即可列出所有连接的设备。

优点：简单、跨平台

缺点：只支持Android 4+

使用Weinre远程调试

Weinre的github仓库地址是https://github.com/nupthale/weinre，在其README.md里面有详细的介绍。

Weinre来源于Web Inspector Remote，是一个远程页面调试工具，功能和Firebug、WebKit Inspector类似，可以帮助我们在PC端远程调试运行在移动设备浏览器内的Web页面或应用，能够即时调试DOM元素、CSS样式和JavaScript等。

Weinre为了能够同步桌面的调试客户端和移动设备上的调试目的，需要你搭建一个调试服务器(Debug Server)，通过这台调试服务器，可以在调试目标(Debug Target)和桌面调试客户端(Debug Client)之间建立一个同步的连接。详细的搭建见Weinre仓库的README.md介绍。囧，步骤有点多，不想码字了😳

优点：同时支持iOS设备和Android设备，并且能直接对手机上的页面进行调试，无须安装客户端。

缺点：需要对HTML页面有改动的权限，因为是远程连接的原因，可能网络连接速度会影响调试的响应。

当看到优点是不是很激动，在真机上可以调试iOS和Android设备的网页耶✌️

使用vConsole调试

由腾讯出品的vConsole调试工具，在调试移动端的时候非常有效，而且其使用方法也是简单。

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

上面的使用方法介绍了其中一种而已。当然了，引入的vConsole也要看下环境啊，线上环境的时候还是要判断下的，别等到上线的时候忘记移除vConsole了，被怼就尴尬😅。

优点：使用简单，能方便查看所需调试的面板信息

缺点：不支持UI的调试

后话

嗯，调试工具各有千秋，还有调试工具但是未介绍到的有Charles抓包工具，postman接口调试工具等。

参考

• 《在你身边 为你设计》
• 移动端调试痛点？——送你五款前端开发利器