开始使用Vorlon.js,好用的JavaScript远程调试和测试工具

0x00 为什么需要远程调试?

在H5的开发中可能会遇到这样的问题:

我所开发的移动端网页碰到了一个Bug,可是在Chrome模拟的手机环境中是没问题的,可是在某些手机中就是没有生效,不知道到底是因为CSS不支持还是因为JS没有执行,没有控制台打不了日志,alert信息又太有限了,愁死我了。

或者是这样的问题:

公司的手机App要给Webview添加一些接口,方便公司的活动Web页面在App中打开的时候能执行一些操作,可是我按照和IOS同学约定的接口发送请求后并没有成功执行。不知道是我JS写的有问题还是IOS那边接收有问题,没有日志,没控制台执行脚本调试,真是麻烦。

如果这个时候手机上打开的网页也有像Chrome里面一样的调试台,开发就能变得更方便了,因此才需要像Vorlon.js这样的工具,能够在电脑上远程打开手机上网页的控制台,来对手机浏览器或者WebView上的网页来进行调试。

0x01 Vorlon.js是什么?

Vorlon.js是微软在 微软Build 2015大会 上公布的一款用于JavaScript远程调试和测试的开源工具。(大牌有保障,写此文的时候版本是 0.1.0

官方网站传送门: http://www.vorlonjs.com/

An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.

官方原话是

一款基于 node.jssocket.io 的、开源的、可扩展的、平台无关的JavaScript远程调试和测试工具。

有如下优点:

0x02 Vorlon.js怎么用?

安装

$ npm install vorlon -g

启动

$ vorlon

启动完成之后就会监听两个端口: 1337(脚本和控制台)5050(代理)

开启两个功能:dashboard(控制台)Proxy(代理)

功能和使用

打开 http://localhost:1337 就能看到 dashboard 了在这里面调试已经连接上的远程网页。

Vorlon.js Dashboard

在页面中植入远程调试的js

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

然后,在手机浏览器中打开已植入脚本的网页,可以发现在Dashboard 里已经出现了连接设备的信息了。

Vorlon Connect

此时鼠标hover在DOM节点上,浏览器页面中相关的区域也会高亮就和Chrome开发者工具一样:

enter image description here

你可以尝试在Dashboard中正下方的Interactive Console的输入框中输入alert('test')尝试一下,可以看到再浏览器中的页面弹出了test的框(如果你的webview没有干掉Alert功能的话)。

使用代理(vorlon proxy)自动注入脚本并调试

Vorlon Proxy的功能是使用本地的一个接口来访问一个现存的网页,例如:我想要访问http://127.0.0.1:8080/,我可以通过

http://localhost:5050/vorlonproxy/root.html?vorlonproxytarget=http://127.0.0.1:8080/&vorlonsessionid=1270.0.1

的方式进行访问。

Vorlon Proxy会转发 http://127.0.0.1:8080/ 中的内容,并自动注入vorlon.js脚本,识别跨域资源。让你不用注入脚本也能对现有页面进行远程调试(我在手机上访问如下地址即可)。

http://(your host ip):5050/vorlonproxy/root.html?vorlonproxytarget=http://www.baidu.com/

打开 http://localhost:1337/httpproxy 就能用代理配置的自动配置,可以看到如下输入框:

enter image description here

在输入框中输入 http://127.0.0.1:8080/ 点击 Inspect with VORLON.JS(注入vorlonjs脚本) 后会弹出两个页面:一个是输入的页面的转发就是上面那个localhost:5050的页面,还有一个是这个页面的Dashboard。

0x03 Vorlon.js的局限性

虽然如上说了诸多Vorlon.js的好处,但是还是有很多问题没有解决。

Back