使用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

在須要調試的網頁中加入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 列表（調試目標列表）

到此，你就能夠方便的查看Elements， Resource, Console, Timeline 等面板了。