移动端网页调试
banner
自2019.05.22日离职以来，自己在家浪了两天。然后发现，浪也该浪够了，该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容。
还有还有，有哪位大佬推荐下前端开发的工作吗，base广州啊，不胜感激～关于我请戳blog下的resume.png😄
在这个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接口调试工具等。
哈哈哈，有哪位大佬推荐下前端开发的岗位吗？base广州，关于我请戳blog下的resume.png。
qiaoba
参考
- 《在你身边 为你设计》
- 移动端调试痛点？——送你五款前端开发利器
