移動端所有瀏覽器頁面調試方法

xuweijian 發布于2019-08-02 14:12 / 2140人閱讀

摘要：在測試過程中，通常解決兼容性占了大部分時間，對那些手機廠商自帶瀏覽器和第三方瀏覽器深惡痛絕，為什么不使用統一標準。移動端瀏覽器調試工具頁面調試抓包工具。體驗肯定沒端瀏覽器的好，但能夠滿足大部分調試的需求。

通常在移動端頁面調試時，除了移動端chrome和safiri,幾乎對其他瀏覽器無法調試。在測試過程中，通常解決兼容性占了大部分時間，對那些手機廠商自帶瀏覽器和第三方瀏覽器深惡痛絕，為什么不使用統一標準。

spy-debugger 移動端瀏覽器調試工具

頁面調試、抓包工具。遠程調試任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，無需USB連接設備。

1.安裝

需要安裝node，在這不做介紹了，然后安裝 spy-debbugger 依賴包到全局環境。（這里使用了npm,yarn也不錯）

npm install spy-debugger -g

2.PC端運行

打開終端運行

spy-debugger

當出現下圖所示即表示在PC端運行成功，記住IP和node-mitmproxy啟動端口，后面需要使用，上圖這個樣子就成功啟動了，瀏覽器打開 http://127.0.0.1:65443，后續調試的的功能都在這個頁面上操作。

3. 設置手機端HTTP代理

首先電腦和手機保持在一個網絡下，或連接同一個wifi。然后到手機端設置所連wifi的代理。進入wlan列表，

長按或者點擊最右的箭頭（IOS是i符號），進入當前wifi詳情頁

手機滑到最下面有個代理，點開選擇為手動

然后連接電腦端的代理，就下圖中的將第2步中的IP和端口分別填入主機名和端口

4.手機端下載并安裝證書（首次使用安裝）

手機端第三方瀏覽器輸入 http://s.xxx （不要用自帶瀏覽器和微信瀏覽器），下載證書到本地。

安卓端安裝證書的兩種方式：

其一：設置——WiFi——高級設置——安裝證書

其二：設置——更多設置——系統安全——從存儲設備安裝證書

IOS端安裝證書的方式看下面鏈接就行：

https://www.jianshu.com/p/d31...

5.用手機瀏覽器訪問你要調試的頁面即可

下圖就是用手機端瀏覽器打開頁面，targets會顯示監聽到打開的頁面。

菜單欄的 Elements 、Resources、Network、Timeline、Console和chrome的開發工具項類似。

體驗肯定沒PC端瀏覽器的好，但能夠滿足大部分調試的需求。

GPU云服務器云服務器移動端頁面移動端頁面顯示移動端瀏覽器移動端html頁面

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

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

移動端所有瀏覽器頁面調試方法

摘要：在測試過程中，通常解決兼容性占了大部分時間，對那些手機廠商自帶瀏覽器和第三方瀏覽器深惡痛絕，為什么不使用統一標準。移動端瀏覽器調試工具頁面調試抓包工具。體驗肯定沒端瀏覽器的好，但能夠滿足大部分調試的需求。通常在移動端頁面調試時，除了移動端chrome和safiri,幾乎對其他瀏覽器無法調試。在測試過程中，通常解決兼容性占了大部分時間，對那些手機廠商自帶瀏覽器和第三方瀏覽器深惡痛絕，為...

betacat 2019-08-23 15:06 評論0 收藏0
9102了，你還不會移動端真機調試？

摘要：移動端調試困難很多時候，我們在進行移動端開發時，都是先在端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。移動端調試困難很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化...

lushan 2019-08-23 16:16 評論0 收藏0
前端如何高效的與后端協作開發

摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。前端如何高效的與后端協作開發 1. 前后端分離前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...

rozbo 2019-08-29 17:08 評論0 收藏0
前端如何高效的與后端協作開發

摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。前端如何高效的與后端協作開發 1. 前后端分離前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...

learning 2019-08-23 12:37 評論0 收藏0