移动端网页调试

自 2019.05.22 日离职以来，自己在家浪了两天。然后发现，浪也该浪够了，该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容。

还有还有，有哪位大佬推荐下前端开发的工作吗，base广州啊，不胜感激～关于我请戳blog下的resume.png

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

使用 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 设备上的网页。但是这种方法在使用前，需要简单设置以下内容：

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

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

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

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

嗯～Apple 那么强势，我安卓表示不服移动端web页面横向看，也要来自己的一套。

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

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

优点：简单、跨平台

缺点：只支持 Android 4+

使用 Weinre 远程调试

Weinre的 github 仓库地址是，在其 README.md里面有详细的介绍。

Weinre来源于 WebInspectorRemote，是一个远程页面调试工具，功能和 Firebug、WebKitInspector类似，可以帮助我们在 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。

参考