【轉】使用weinre遠程調試手機網頁

本調試方式須要wifi環境和webkit瀏覽器。

weiner主頁：http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

1、配置調試服務器

（一）、nodejs搭建調試服務器（以windows爲例）

一、安裝node.js安裝

程序下載：http://nodejs.org/#download
本文安裝在「F:/nodejs/」目錄。

二、測試安裝是否成功

打開CMD，切換到nodejs所在的安裝目錄。輸入以下命令測試node.js和npm是否安裝成功。默認windows最新安裝包，會包含npm，若是npm沒有安裝，請手動安裝。

C:\Users\jason>f:
F:\>cd nodejs
F:\nodejs>node -v
v0.10.0
F:\nodejs>npm -v
1.2.14

三、使用npm安裝weinre,在node.js安裝目錄輸入如下命令

npm install weinre

四、啓動weinre服務器

node.exe node_modules\weinre\weinre --boundHost -all-

在windows下，系統防火牆可能會彈出是否容許其訪問網絡的提示，點擊充許便可。

五、瀏覽器打開

http://localhost:8080

若是訪問正常，說明服務器已配置成功。

（二）、直接使用phoneGap的調試服務器
若是以爲服務器配置麻煩，也可使用phoneGap現成的調試服務器。
phoneGap調試服務器地址：http://debug.phonegap.com/（至關於本機安裝的http://localhost:8080）

2、weinre使用方法

一、需調試的頁面加入JS腳本

如：

<script src="http://你的調試服務器地址/target/target-script-min.js#anonymous"></script>

1.1使用收穫夾快速添加調試腳本到須要調試的頁面。

將如下代碼添加到書籤，訪問須要調試的頁面時，訪問一下書籤，便可以經過JS將調試腳本添加到當前頁面，但部份瀏覽器不支持！

javascript:(function(e){e.setAttribute("src","http://你的調試服務器地址/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

二、在PC端使用webkit瀏覽器打開控制檯

http://10.18.252.111:8080/client/#anonymous

#後面爲識別碼

tips：識別碼僅僅是爲了識別多個需調試的項目時使用，可供多用戶操做。

在控制檯，你就能夠輕鬆的調試手機網頁了！

 

原文連接：http://www.2fz1.com/?p=396