前端远程调试

如何调试移动端页面一直是比较头疼的事。与桌面浏览器不一样，当H5页面嵌入到app后，没法很方便地按出F12来查看元素，或者断点调试js。另外，移动端设备碎片化很是严重，iphone 4 到 iphone 6+，android 更是不用多说。本文就试着对webview的调试方面谈一谈本身的见解。

设备优先级

不得不认可，咱们不可能开发出一个页面，它能兼容全部的设备。因此，若是要跨平台调试，必须明确一个优先级。你能够从这几个方面来考虑：

• 屏幕尺寸

iphone 4 是 320 * 480；iphone 6+ 是 414 * 736。

这几个是众多屏幕尺寸中的两种，另外，若是页面是嵌在app里的，实际的 viewport 高度可能还要扣除标题栏的高度，会比你想象的还要小。开发前要明白这个页面将会在多大的屏幕上显示。

• 像素密度

设备的像素密度有不少，1:2 或 1:3 的，但如今移动端页面基本上是出2倍图，在3倍屏上也不会模糊。

由此引起的问题其实也很多。好比1像素边框的实现。

• 手机系统

android、ios、wp，以及各个系统的不一样版本，作兼容性时要作一些取舍。哪些页面是必须兼容到 android 2.3 的，哪些页面不必。由于android 2.x 和 android 4.4+ 上的调试方式是不一样的。

• 手机浏览器（UA）

别说桌面端有IE、chrome、firefox这么多浏览器，移动端更多。QQ浏览器、UC浏览器、小米浏览器等，再加上各类app自带的“扫一扫”功能打开的内嵌浏览器，好比微信、易信等。移动端兼容性并非加个"webkit"、"moz"、"ms"前缀这么简单。

当本来单纯的前端领域开始瓜分移动端市场时，前端的坑就更深了。

在开发一个页面或者功能以前，请务必考虑清楚，这个页面须要兼容到什么程度。多用用 caniuse 提早调研好。

Chrome Inspect

当你想要在真机上进行调试时，必须作好这几点：

1. 明确设备优先级。若是一开始没有作好调试 android 2.3 或者 iphone 4 系统的准备，接下来的路会很是难走。好比用了低版本系统不支持的css、js特性，后面改起来会比较麻烦。

2. 在 Chrome 自带的模拟设备上已经测试过。Chrome 的开发者工具提供了一个很是便利的功能，叫 "device mode"，按 F12，点左上角的手机图标便可开启。它能：1、篡改UA，不少服务端多是经过 UA 来判断请求来源的，会为移动设备返回不一样的页面，好比模拟iphone设备、android设备等；2、模拟请求延迟，用于查看弱网状况下页面的表现；3、屏幕尺寸；4、touch，固然触摸事件只是简单地模拟，真机上的表现会更加复杂。

3. 响应式。主要是针对屏幕尺寸和像素密度。拉伸一下浏览器，看页面是否能正常布局。

由于真机调试很是麻烦，因此能在桌面端就能调试的事情，就放到桌面端去作。

好，一旦到这里，就说明遇到了桌面端没法重现的问题。好比，图标和文字没有垂直对齐，页面压根没加载出来等。

而后开始介绍 Chrome Inspect。它只能调试 android 4.0+ 的系统，若是是 ios，在 Safari 上也有相应的工具，若是低于 android 4.0，可使用后面介绍的 Vorlon 等。

Chrome有一篇官方文档很详细地介绍了如何使用，其中的“安装”步骤就很少解释了。

对于真机，先要设置成“容许USB”调试，不一样厂商可能设置方式不一样，而后连上电脑，打开Chrome浏览器，输入 chrome://inspect，不出意外应该能看到相似于下图中的界面：

固然，你得先打开手机浏览器才行。

在上图的界面中选“inspect”，就能调出一个很熟悉的窗口。

这上面的功能和普通F12打开的开发者工具同样，一样能够审查DOM元素、断点调试js、查看网络请求等。

这个图的左上角也有一个手机图标，开启后，它能实时显示手机上的界面。

端口转发（Port Forwarding）

本地调试时，通常使用 localhost:8080 这样的地址，可是手机上却没法访问。若是手机和电脑处于一个局域网还好，用相似于 192.168.1.100:8080 这种 ip 访问也能够。若是不在一个局域网，就能够利用端口转发的功能，把手机上的 8080 端口，转到本地。

这样，在手机浏览器输入 localhost:8080，至关于访问本地服务器了。

图中，左边是手机端的端口，右边是本地端口。

我用genymotion模拟器时，端口转发的功能一直没试成功，用localhost访问时，浏览器就崩溃了，不知道什么缘由。真机上没试过。

Vorlon

Vorlon是微软开发的一款“JS注入”型调试工具。什么意思？就是必须在代码中插入一段JS脚本，与调试服务器创建一个链接，不断发送页面状态。

好比，桌面端调试时，能够看到整个DOM结构，那么经过Vorlon，它会把整个DOM结构发到服务端，而后服务端再把这个DOM结构渲染出来。再好比，调用 console.log 时，本来只是在控制台打印一段文本，而 Vorlon 会修改这个方法，它把输入的内容先发给服务端，而后服务端再输入到页面中。

具体工做流程如上图所示。

Vorlon 的通信方式是使用 Socket.io 。

那么具体怎么使用呢？

以 Node.js 环境为例：

$ npm i -g vorlon
$ vorlon

全局安装vorlon后，调用vorlon命令便可启动服务，默认监听 1337 端口。

而后，在要调试的页面，插入一段JS：

<script src="http://localhost:1337/vorlon.js"></script>

固然，既然是远程调试，就不能使用localhost，把它改为计算机的局域网ip，好比 192.168.1.100。

若是手机上打开了这张页面，那么请转到PC浏览器，输入 localhost:1337，就能看到熟悉的调试界面。

红框中是比较重要的几个地方：

• CLIENT LIST：当前调试的客户端

• Dom Explorer：审查DOM元素

• STYLES：能够实时修改元素样式

• Network Monitor：查看网络请求

• Interactive Console：查看控制台打印的日志

到这儿，彷佛发现少了点什么。没错，它不能调试js。为何？你以为 js 能够控制浏览器断点 js 吗？不行的。

以前介绍过，vorlon 的工做原理就是 js 注入，它能作到的是，经过修改原型方法，实时向服务端发送页面状态，但浏览器毕竟是有安全限制的，不少事情 js 并不能作。它依赖于浏览器提供的 api 。

其余工具

在这以前，我一直使用 weinre 在真机上进行调试，它的功能和 vorlon 如出一辙，但前者貌似不多维护了。

另外有一个叫 GhostLab 的付费软件，听说能够在android 2.x 上调试 js，若是有能力能够试一下。

在写这篇文章的过程当中，也调研了一些新奇的工具，好比 Mozilla 的 Vallence，火狐的开发者版本提供了 WebIDE 的功能，一样跟调试有关，有兴趣能够去官网研究研究。

汇总了一些工具连接：

• Vorlon: http://vorlonjs.com/

• Weinre: http://people.apache.org/~pmuellr/weinre-docs/latest/

• Chrome Remote Debug: https://developer.chrome.com/devtools/docs/remote-debugging

• Vallence: https://developer.mozilla.org/en-US/docs/Tools/Valence

• WebIDE: https://developer.mozilla.org/en/docs/Tools/WebIDE

• GhostLab: https://www.vanamco.com/ghostlab/

• JSConsole: http://jsconsole.com/

• Adobe Edge Inspect CC: http://www.adobe.com/products/edge-inspect.html