遠程調試工具：Weinre

jopen 10年前發布 | 19K 次閱讀 Weinre Android開發 移動開發

如今人們也越來越習慣在手機上瀏覽網頁，而在手機上這些針對桌面瀏覽器設計的網頁經常慘不忍睹。Web應用開發者需要針對手機進行界面的重新設計，但是手機上并沒有稱心如意的調試工具（如Firebug、web inspector），重新設計界面的工作往往事半功倍。本文介紹的調試工具Weinre 就是解決這一問題的優秀調試工具。

Weinre是什么？

Weinre代表Web Inspector Remote，是一種遠程調試工具。舉個例子，在電腦上可以即時 的更改手機上對應網頁的頁面元素、樣式表，或是查看Javascript變量，同時還可以看到手機上頁面的錯誤和警告信息. 下圖所示中的例子，通過在console中運行“document.body.style.backgroundcolor = 'green';” 即時改變了手機上網頁的背景色。該項目是 Apache Cordova 的一部分。

遠程調試工具：Weinre

圖1: 桌面的debug客戶端與手機上的對應頁面

運行原理

Weinre作為一種遠程調試工具，在結構上分為三層：

  • 目標頁面（target）：被調試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；

  • Debug客戶端（client）：本地的Web Inspector調試客戶端；

  • Debug服務端（agent）：一個HTTP Server，為目標頁面與Debug客戶端建立通信。

遠程調試工具：Weinre

獲取Weinre

在任何的支持 Node.js 環境的系統下通過包管理器（npm）即可安裝Weinre 

npm install -g weinre

使用Weinre進行遠程調試

1 啟動 WeinreDe bug 服務端 

weinre --httpPort 8080 --boundHost -all-

2 通過PC瀏覽器（WebKit內核）打開 WeinreDe bug 客戶端 

Open in your pc browser http://localhost[Your IP]:8080

遠程調試工具：Weinre

3 在你需要調試的頁面加上通信用的腳本 

<script src="http://localhost[Your IP]:8080/target/target-script-min.js#anonymous"></script>

4 在手機上訪問你的測試頁面，在電腦上進入到 WeinreDe bug 客戶端 看是否通信成功，如果一切沒問題，可見到如下的頁面

Open in your pc browser http://localhost[Your IP]:8080/client/#anonymous

遠程調試工具：Weinre

5 最后跟你平時一樣實時調試你的頁面吧，是不是很爽。

項目主頁：http://www.baiduhome.net/lib/view/home/1407745205707

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！