移动端web开发调试工具——Vorlon.JS上手教程

版权声明: https://blog.csdn.net/qq_30868289/article/details/79995652

问题提出:

在移动端页面的日常开发中常常会碰到这样一个问题,页面在Chrome的Device模式下显示正常,但在移动端浏览器或者内嵌到APP里就会出现样式问题或者Js代码问题,但是移动端上没有类似Chrome的开发者调试工具,只能通过尝试修改,重复发布版本来检查问题,或者写一大堆alert弹窗来调试。这种方法不但繁琐,而且收效甚微。

解决方案:

Vorlon.js可以帮助开发者加载、检查、测试及调试任何设备上使用Web浏览器运行的JavaScript代码。它可以连接游戏控制台、移动设备、甚至是接入IoT的冰箱,连接的设备数量最多可达50台。开发者可以在其中一台或所有设备上运行JavaScript代码。借助vorlon.js,开发团队还可以一起调试,每个人编写的代码都对所有人可见。Vorlon.js开发团队遵循的一个基本原则是:不引入特定于浏览器的原生代码和依赖,设备上只需要运行JavaScript、HTML、CSS。

Vorlon.js基于node.js和socket.io构建,本身就是一个小型的Web服务器(node.js服务器),可以从本机运行,也可以安装在一台服务器上,供整个团队使用。该服务器托管着“仪表盘(dashboard)”页面和一个使用socket.io连接该页面及各种设备的服务。它还提供了一个包含所有插件客户端代码的页面。这些代码负责与客户端设备及仪表盘页面通信。连接的设备必须引用该页面。

使用方法:

下面介绍Vorlon.JS的使用方法

1、安装Vorlon.JS

npm install vorlon -g

2、启动Vorlon.JS服务

安装完成后,输入命令“vorlon”启动Vorlon.JS服务。
这里写图片描述

3、在需要调试的页面插入JS代码

Vorlon.JS服务启动后,在调试页面插入JavaScript代码。IP_address使用本地ip地址。格式如下:

<script src="http://[IP_address]:1337/vorlon.js"></script>

注:本地ip地址可在命令窗口中输入ipconfig获取。
这里写图片描述

4、手机端设置http代理

把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题。
这里写图片描述

5、进入调试

在浏览器中打开地址http://localhost:1337。页面如图
这里写图片描述

Vorlon.js具有可扩展性,开发者可以通过插件增加客户端和仪表盘功能。每个插件都分成客户端和仪表盘端两部分。前者用于捕获信息及同设备交互;后者用于在仪表盘页面中生成命令面板。Vorlon.js本身自带了如下三个插件:

Console:该插件有两个功能:一是在仪表盘页面中显示console.log()、console.warn()或console.error()日志,指导调试;二是允许开发者输入代码同远程页面交互;
DOM Exploer:展示远程页面的DOM;
Modernizr:借助Modernizr展示受支持的浏览器特性。
开发者也可以构建自己的插件,具体过程参见这里

猜你喜欢

转载自blog.csdn.net/qq_30868289/article/details/79995652