移動端真機測試

niceforbear 發布于2019-08-23 16:32 / 2653人閱讀

摘要：移動端真機調試方法真機調試調試調試真機調試缺點必須手機和都安裝瀏覽器，其他瀏覽器無效。優點簡單快捷方法手機端下載好瀏覽器，使用連接到，打開手機的調試模式。這時候，在調試的時候，移動端的頁面也同步更新。

移動端真機調試方法

chrome真機調試

weinre調試

spy-debugger調試

chrome真機調試

缺點：
必須手機和pc都安裝chrome瀏覽器，其他瀏覽器無效。

優點：
簡單快捷

方法：

手機端下載好chrome瀏覽器，使用USB連接到PC，打開手機的USB調試模式。

然后在PC端打開chrome瀏覽器，在地址欄輸入：chrome://inspect. 勾選"discovery usb device"。

然后在手機端瀏覽網頁，就可以看到如下的頁面，

點擊inspect，進行調試。

ps：如果手機端是IOS則需要在MAC下操作才可以。Windows只能抓到安卓手機

wenire真機調試

缺點：
無法打斷點
優點：

weinre調試方式，安裝和適用不復雜，適用于全平臺的調試，即任何手機的任何瀏覽器皆可以調試，不過需要手機和電腦在同一個網段下。*

方法：
全局安裝：

npm install  – g weinre

局部安裝：

npm install weinre

啟動：

weinre  --httpPort 8090 --boundHost  -all-

weinew啟動參數說明

httpPort：設置Wninre使用的端口號，默認是8080。

boundHost：[hostname | Ip | -all-]: 默認是 ‘localhost’。

debug [true | false]：這個選項與–verbose類似，會輸出更多的信息。默認為false。

readTimeout [seconds]：Server發送信息到Target/Client的超時時間，默認為5s。

deathTimeout [seconds]：默認為3倍的readTimeout，如果頁面超過這個時間都沒有任何響應，那么就會斷開連接。

控制臺啟動截圖：

啟動了weinre之后，我們在瀏覽器中輸入localhost:8090.顯示如下界面，表示已經啟動成功。

點擊"debug client user interface"，進入調試頁面。

當前的targets中內容為空。

現在，我們需要做另外一點操作，在我們要調試的頁面中，增加一個腳本。

其中需要把localhost改成自己本機的IP地址

targets已經不為none，已經能捕捉到嵌入腳本的頁面。

這時，我們就可以點擊Elements進行調試。

這時候，在調試的時候，移動端的頁面也同步更新。修改樣式時，會在手機端即時生效，并且也可以查看控制臺信息，唯一一點就是，不能進行斷點調試。

最后，在調試結束之后，別忘記刪除嵌入的script。

spy-debugger真機調試

優點：

方便，功能齊全

缺點：

安裝稍微復雜一點

特點：

頁面調試＋抓包

操作簡單

支持HTTPS。

spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。

自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。

可以配合其它代理工具一起使用(默認使用AnyProxy)

方法：
TODO。。。

GPU云服務器云服務器 ios開發真機測試移動測試優惠移動應用測試移動app測試

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

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

9102了，你還不會移動端真機調試？

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

lushan 2019-08-23 16:16 評論0 收藏0
移動端真機調試實戰經驗

摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。本文首次發表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言在開發中前端免不了要進行移動端的開發，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態欄和底部的菜單欄，特別是在qq內置瀏覽器中打開，差...

rainyang 2019-08-20 16:21 評論0 收藏0
從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

whataa 2019-07-25 11:18 評論0 收藏0