移动端如何优雅地调试

在整个开发周期来看,有时候自测试的周期远远比构思和编码的周期还长,特别是对于踩坑比较少的人来说。所以,调试对于程序员来说再熟悉不过了,对于前端来说,由于不同浏览器的内核以及移动设备的多样性,又增加了前端调试的复杂性。那么,如何优雅地进行前端调试呢,且听下文慢慢说道。

移动端调试日益重要

说起PC端的调试,大家都很熟悉,控制台已经成为我们调试PC页面不可缺少的工具之一,在这里就不多加阐述。我们都知道,随着智能手机的兴起,移动开发成为了前端日常工作之一,同时也使得前端的开发以及调试难度上升了一个台阶。每一个手机生产商都有自己的一套标准,所以也就出现了不同的渲染情况,同时因为手机屏幕的大小不同,甚至iPad也加入了移动行列,大大增加了移动端适配开发的难度,同样地,移动端调试也成为一个难题,那么如何优雅地进行移动端调试呢,容我慢慢道来。

控制台调试移动页面

说到移动页面调试,我们首先想到的还是我们的好伙伴——控制台,相信很多同学都发现了新版的Chrome都加入了移动端模式,我们可以很轻松地在PC上访问我们的移动端页面。逻辑接口调试方面跟PC页面调试一模一样;对于样式来说,也是按照手机屏幕大小来模拟,chrome已经提供了十几种我们最常用的手机模式选择,甚至连iPad都可以选择。我们可以在chrome上模拟各种用户的操作,查看元素的样式,使得移动端的调试也可以像PC端一样优雅。在这里,就不得不安利Google Chrome Canary(金丝雀版本)了,它的功能正如它名字一样绚丽。针对移动调试来说,干净整洁的界面,多种尺寸自由切换,旋屏按钮,标尺选择等等,都能够让我们更加优雅地调试移动页面。
9.png

神器Weinre

控制台调试固然方便,但之前说过,手机厂商并没有一个统一的标准,所以这也就带来了千奇百怪的bug,下面的场景你是否很熟悉:一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。对,这些都是某某环境下才会出现的,那么你是否又回到原始的方式,每修改一次样式,用某某手机刷新一次,每出现一个逻辑问题,就alert出变量来查看是否符合预期?如果是,让我们使用Weinre来更加优雅调试移动页面吧。

Weinre是什么?Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器。也就是说,通过Weinre的服务器我们可以像控制台调试移动页面一样方便。
3.png

上面的图就是Weinre的实现原理,对于Weinre来说,分下三个部分:
1、Weinre客户端(client):本地的WebInspector(类似于控制台),远程调试客户端;
2、Weinre服务端(agent):本地的HTTPServer,为Debug目标页面与Debug客户端建立通信;
3、Weinre目标页面(target):被调试的页面,页面已嵌入weinre的远程js。

对于Weinre的安装,我们在官网可以很容易看到,Weinre是当做NodeJs应用来实现的,Weinre能够使用npm进行安装(NodeJs安装、npm换源等不在此文的讨论范围),我们使用全局安装的模式,这样就可以很方便开启Weinre服务,当然Weinre服务需要在服务器上运行,这里使用apache服务器。
5.png

安装好后,我们只需要3步就可以实现移动端的调试
1、创建Weinre服务,我们设置boundHost为all,这样就可以让所有的ip都能够访问Weinre的服务,当然你可以为了安全起见,设置可信任的ip地址:
4.png

2、接下来,我们需要打开Weinre客户端,这里说明一下,Web Inspector只兼容WebKit核心的浏览器,所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试,我们用Chrome打开localhost:8080可以看到简单的说明文档,然后里面也清晰地告诉我们使用http://localhost:8080/client/可以打开Weinre客户端,打开发现就是一个精简版的控制台,但调试的功能齐全。
10.png

3、最后面就是使测试页面能够连接上Weinre服务器,我们需要在调试页面引入js即可:
6.png

把172.20.12.174改成你apache服务器的ip地址即可。通过上面3步,调试环境已经配置完全,然后再打开你的测试页面,你会发现,这时候,你刚才打开的Weinre客户端已经可以控制测试页面了,你可以很清楚看到页面的元素、样式、资源列表等等,你在客户端控制台也可以随时改变页面的样式,你所做的每一步改变都会直接体现在移动页面上,是不是很方便便捷呢?

bookmarklet注入JS

看到这里,细心的同学可能会发现一个问题,就是Weinre只能调试我们自己开发的移动页面,因为你需要在调试页面中引入与Weinre服务器通信的js,那如果是其他的网站呢,比如百度,这时候你是不是要攻入百度的服务器强行给它页面加入通信的js呢?很明显这不可行,所以我们要换种思路想想如何将这段js注入到页面之中。

在浏览官网的时候看到可以使用bookmarklet将js注入到网站中,那么bookmarklet又是什么?bookmarklet中文就是书签的意思,我们很清楚,浏览器中的书签都是用来储存我们喜欢或者经常去的网站以方便我们下次访问,但很多人不知道,url可以是一段js代码,比如你在url中输入”javascript:alert(‘haha’);”会弹出对话框。根据这个思路,我们可以写个脚本动态创建script标签,把Weinre服务器通信的js注入到页面中,然后把这个脚本使用书签的方式保存起来,这样,如果我想调试百度的移动页面,我只需要打开百度页面后,再打开脚本书签,这样就可以把js注入到百度的移动页面,然后就可以调试百度的页面了。
7.png

代码很简单,如下:
8.png

当然,如果你怕命名污染也可以使用匿名函数运行。如果你连注入都懒得去实现的话,那么推荐browsersync,它相当于已经内嵌了Weinre,并且帮你自动注入了js,有兴趣的同学可以去看下。

结语

随着JavaScript语言的强大,前端可以做越来越多的事情,调试能力对于我们来说也越来越重要,上面只是简单地介绍了一些日常比较常用到的调试方法,还有诸如使用微信web开发者工具调试公众号请求等等无法一一详细讲述,同学们可以更加深入地研究如何更加优雅地调试。我们相信,调试能力的增强一定会带来开发效率的提升。