H5移動端調試—weinre

Cympros 發布于2019-08-29 12:52 / 3380人閱讀

摘要：可以在上調試運行在移動端上的頁面。啟動調試客戶端在瀏覽器中打開即可啟動調試客戶端創建創建個頁面，并加入以下表示從代理服務中引入。

一、背景：

H5頁面在PC上調試起來很方便，但是在手機上卻很麻煩，此時移動端就像一個黑匣子，查看或修改DOM、CSS，localStore等變的很困難。
這個時候遠程調試就孕育而生了。

二、weinre 2.1 什么是weinre

Weinre是單詞縮寫，全稱是網頁遠程審查（Web Inspector Remote），發音同winery [?wa?n(?)ri]。可以在PC上調
試運行在移動端上的頁面。

2.2 weinre能做什么

對應上面的菜單，weinre有5大功能

Element：查看/修改dom，查看/修改 dom CSS

Resources：查看/修改 localStorage, sessionStorage

Network：查看網絡請求

Timeline：

Console：查看控制臺輸出

2.3 weinre不能做什么

JS調試

2.4 weinre原理

目標頁面（target）：被調試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；
Debug客戶端（client）：本地的Web Inspector調試客戶端；
Debug服務端（agent）：一個HTTP Server，為目標頁面與Debug客戶端建立通信（target和client不斷的向agent發生get/post請求）。

原理就是Client的任何操作命令都會發給target執行，同樣target的任何操作也會發給client執行。

2.5 搭建環境&使用 2.5.1：weinre是基于nodeJs程序，安裝weinre包

npm install -g weinre

2.5.2：啟動weinre服務（代理【agent】服務）

weinre --boundHost 10.32.69.133 --httpPort 8888

參數說明參考：http://people.apache.org/~pmu...
如果顯示下面內容則說明服務啟動了。

2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:8888

2.5.3：啟動調試客戶端

在瀏覽器中打開”http://10.32.69.133:8888“即可啟動調試客戶端

2.5.4：創建Target

創建個頁面，并加入以下JS（表示從代理服務中引入target/target-script-min.js）。

進入操作界面就可以盡情操作了。

2.6 多targets

weinre支持多targets的，不同target通過debug id區分的，target js的完整格式：
debug id參數就是用來區分各targetd ,如果不傳的話用"anonymous"代替，一般用IP地址作為debug id。

2.7 操作界面 2.7.1 Remote面板

2.7.2 Elements面板

A：查看，修改，刪除Dom元素，目前還不能增加DOM元素。
B：查看，修改，刪除Dom元素屬性，目前不支持增加DOM元素屬性。
C：查看，修改，刪除，增加 CSS屬性。

2.7.3 Resources面板

查看，修改，刪除localStorage/sessionStorage。
測試發現：不能刪除，修改，增加？？？

2.7.4 Network面板

查看XHR請求信息，雖然該面板中有各種網絡請求的類型，但是目前只能查看XHR請求記錄。

2.7.5 Timeline面板

查看target中觸發的事件時間信息（觸發事件）。目前只支持兩種事件：setTimeout/setInterval和用戶指定的事件（通過在事件處理函數中調用console.markTimeline("tag")函數指定）

2.7.6 Console面板

用來執行JS語句和表達式，以及展示console的方法輸出。

參考：

http://www.huolg.net/html5/we...
http://people.apache.org/~pmu...
weinre操作界面：http://people.apache.org/~pmu...
http://muellerware.org/papers...

云服務器 GPU云服務器移動端webrtc h5 H5移動端上傳圖片 h5調試js php 后端調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112200.html

H5移動端調試—weinre

摘要：可以在上調試運行在移動端上的頁面。啟動調試客戶端在瀏覽器中打開即可啟動調試客戶端創建創建個頁面，并加入以下表示從代理服務中引入。一、背景： H5頁面在PC上調試起來很方便，但是在手機上卻很麻煩，此時移動端就像一個黑匣子，查看或修改DOM、CSS，localStore等變的很困難。這個時候遠程調試就孕育而生了。二、weinre 2.1 什么是weinre Weinre是單詞縮寫，全稱...

X1nFLY 2019-08-20 17:41 評論0 收藏0
H5移動端調試—weinre

摘要：可以在上調試運行在移動端上的頁面。啟動調試客戶端在瀏覽器中打開即可啟動調試客戶端創建創建個頁面，并加入以下表示從代理服務中引入。一、背景： H5頁面在PC上調試起來很方便，但是在手機上卻很麻煩，此時移動端就像一個黑匣子，查看或修改DOM、CSS，localStore等變的很困難。這個時候遠程調試就孕育而生了。二、weinre 2.1 什么是weinre Weinre是單詞縮寫，全稱...

Alfred 2019-08-01 17:06 評論0 收藏0
weinre - 移動端H5開發調試神器

摘要：在做移動端開發的時候想必大家都會遇到一個問題調試，大部分情況下利用的模式都能解決，不可避免的會有極少部分機型不兼容的問題，一個個打太麻煩也不直觀。今天的主角登場了。是一個通過監聽本機及項目端口的一個監聽服務，能夠實時的和真機響應互動。在做移動端H5開發的時候想必大家都會遇到一個問題——調試，大部分情況下利用chrome的debug模式都能解決，不可避免的會有極少部分機型不兼容的問題，...

qpwoeiru96 2019-08-01 17:18 評論0 收藏0
weinre - 移動端H5開發調試神器

摘要：在做移動端開發的時候想必大家都會遇到一個問題調試，大部分情況下利用的模式都能解決，不可避免的會有極少部分機型不兼容的問題，一個個打太麻煩也不直觀。今天的主角登場了。是一個通過監聽本機及項目端口的一個監聽服務，能夠實時的和真機響應互動。在做移動端H5開發的時候想必大家都會遇到一個問題——調試，大部分情況下利用chrome的debug模式都能解決，不可避免的會有極少部分機型不兼容的問題，...

Blackjun 2019-08-20 18:29 評論0 收藏0