菜单

weinre 调试移动端

2018年11月15日 - CSS/CSS3

挪前端调试页面–weinre

2015/07/30 · HTML5 ·
weinre,
调试

原文出处:manbetx2.0手机版
涂根华的博客   

一样:远程调式工具—weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用就是是一定给chrome的查处元素一样,界面及用法也基本一样,无非不同之是:weinre适合当动端页面调试,比如手机访问页面的上,我们得行使chrome浏览器查看页面的html元素和css代码,我们可对之开展更改,然后以手机端不需要刷新,立即可以视成效;在动端调式html和css比较好。目前weiner也披露暨npm上,我们好采取npm进行安装;npm如下: https://www.npmjs.com/package/weinre

二: 安装weinre

npm install -g weinre

1
npm install -g weinre

manbetx2.0手机版 1

设置收尾后,需要在本土开启一个监听服务器,比如我今天的IP地址是:172.16.28.162

现在亟需实践如下命令:

weinre –boundHost 172.16.28.162

足开本地监听服务器如下:

manbetx2.0手机版 2

假若上面网址 http://172.16.28.162:8080  weinre默认使用8080端口,我们为得使如下命令进行重复改端口号;如下命令:

manbetx2.0手机版 3

其三: 访问weinre及以页面上调用

开辟浏览器,访问如下地址: 172.16.28.162:8081 如下:

manbetx2.0手机版 4

倘齐截图页面;我们需要在调式的页面被入远程调式所急需之JS代码即可,比如达图截图的结尾一词JS代码:

JavaScript

<script src=”http://172.16.28.162:8081/target/target-script-min.js\#anonymous"&gt;&lt;/script&gt;

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

引入到得远距离调式页面即可;

咱俩现在先访问页面 http://172.16.28.162:8081;如下所示:

manbetx2.0手机版 5

今我们延续以我手机来访问我本机上之网页后,在查阅刚点击进入后底页面显示如下:

manbetx2.0手机版 6

如下:

manbetx2.0手机版 7

而weinre可以一本万利我们调式HTML元素及css代码,至于JS,我们得运用Fiddler替换即可满足前端在倒端基本调式了;

四:多用户

Weinre的默认使用着,都是为此anonymous作为id的;

照上面的代码引用:

JavaScript

<script src=”http://172.16.28.162:8081/target/target-script-min.js\#anonymous"&gt;&lt;/script&gt;

1
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

然如果多单用户以调式各自的页面会出题目,weinre使用多用户机制解决拖欠问题。Weinre默认支持多用户的,这样一个局域网同事只待平等贵微机及安weinre即可,不欲每个人犹安,多个用户以使用时,每个用户使用好的id来区分,每个用户调式信息可以独自,不见面相互影响;

操作如下:

manbetx2.0手机版 8

manbetx2.0手机版 9

然后继续刷新设备受到的页面,然后于电脑端就可以看到如下信:

manbetx2.0手机版 10

即使可展开多用户调式了;

2 赞 2 收藏
评论

manbetx2.0手机版 11

weinre 安装

npm install weinre -g

weinre 三特别服务

1.调节服务器(Debug Server)

这是一个HTTP服务器,你能从weinre-node运行。这个HTTP服务会被Debug Client和Debug Target调用。

2.调试客户端(Debug Client)

这个是一个Web Inspector用户界面(类似于Firefox's Firebug、chrome's web Isnspector);它包含常用的Elements、Resoureces、Network、TimeLine和Console面板,此外它还有一个Remote面板。

3.调剂目标(Debug Target)

 这是你想要进行调试的web页面。这个名字(Debug Target)也用于表示运行调试页面的设备

其中Debug Client和Debug Target是依据HTTP通过XMLHttpRequest(XHR)与Debug
Server进行通信。通常Debug Client和Debug Server运行在桌面上,而Debug
Target运行于倒装备受到。不过只要吃Debug
Target起作用,需要往调节页面被流入Debug Server提供的JavaScript代码片段。

起先服务

weinre –boundHost [ip] –httpPort [port]

调节目标

以待吃调剂的骨子里页面在代码

<script src="http://172.16.193.4:8001/target/target-script-min.js#anonymous"></script>

调节客户端

浏览器被开辟http://172.16.193.4:8001/client,进行调节

参考:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图