运用weinre 长途调试挪动装备上的网页

weinre简介

weinre 是一款类似于firebug 和Web Inspector的网页调试东西, 它的不同之处在于能够用于举行长途调试,比方调试手机上面的网页。

weinre的装置

weinre是用node编写的,能够用npm来举行装置(条件是您的机械上已装了node)

npm install -g weinre

Mac 和Linux下引荐运用

sudo npm install -g weinre 

怎样运转?

运转weinre之前,起首须要相识三个专有名词

Debug Server: 布置weinre的那台服务器
Debug Client: Web Inspector 界面,重要用来展现页面元素和控制台面板。
Debug Target: 你想要调试的网页,通常是位于手机上的网页。

装置完成后在termial中运转以下敕令

weinre --httpPort=8081 --boundHost=znchen.waijule.cn //你本身Debug Server的域名, 也能够运用ip地点)

想相识更多weinre的设置启动项能够经由过程 weinre –help 敕令来检察

也能够在HOME目录下建立 .weinre/server.properties 文件

boundHost:    znchen.waijule.cn
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

如许能够直接运转weinre 敕令,它会自动读取server.properties 内里的设置项。

翻开浏览器, 输入 http://znchen.waijule.cn:8081
《运用weinre 长途调试挪动装备上的网页》

在须要调试的网页中到场Target Script

<script src="http://znchen.waijule.cn:8081/target/target-script-min.js#anonymous" />

翻开debug client 界面

http://znchen.waijule.cn:8081/client/#anonymous

用手机装备翻开待调试的网页,这时候你能够在 debug client界面上清楚的看到 Targets 列表(调试目的列表)

《运用weinre 长途调试挪动装备上的网页》

到此,你就能够轻易的检察Elements, Resource, Console, Timeline 等面板了。

    原文作者:陈再宁
    原文地址: https://segmentfault.com/a/1190000008154704
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞