資訊專欄INFORMATION COLUMN
摘要：移動端真機調(diào)試方法真機調(diào)試調(diào)試調(diào)試真機調(diào)試缺點必須手機和都安裝瀏覽器，其他瀏覽器無效。優(yōu)點簡單快捷方法手機端下載好瀏覽器，使用連接到，打開手機的調(diào)試模式。這時候，在調(diào)試的時候，移動端的頁面也同步更新。
移動端真機調(diào)試方法
chrome真機調(diào)試
weinre調(diào)試
spy-debugger調(diào)試
chrome真機調(diào)試缺點：
必須手機和pc都安裝chrome瀏覽器，其他瀏覽器無效。
優(yōu)點：
簡單快捷
方法：
手機端下載好chrome瀏覽器，使用USB連接到PC，打開手機的USB調(diào)試模式。
然后在PC端打開chrome瀏覽器，在地址欄輸入：chrome://inspect. 勾選"discovery usb device"。
然后在手機端瀏覽網(wǎng)頁，就可以看到如下的頁面，
點擊inspect，進行調(diào)試。
ps：如果手機端是IOS則需要在MAC下操作才可以。Windows只能抓到安卓手機wenire真機調(diào)試
缺點：
無法打斷點
優(yōu)點：
weinre調(diào)試方式，安裝和適用不復雜，適用于全平臺的調(diào)試，即任何手機的任何瀏覽器皆可以調(diào)試，不過需要手機和電腦在同一個網(wǎng)段下。*
方法：
全局安裝：
npm install – g weinre
局部安裝：
npm install weinre
啟動：
weinre --httpPort 8090 --boundHost -all-
weinew啟動參數(shù)說明
httpPort：設置Wninre使用的端口號，默認是8080。
boundHost：[hostname | Ip | -all-]: 默認是 ‘localhost’。
debug [true | false]：這個選項與–verbose類似， 會輸出更多的信息。默認為false。
readTimeout [seconds]：Server發(fā)送信息到Target/Client的超時時間， 默認為5s。
deathTimeout [seconds]：默認為3倍的readTimeout， 如果頁面超過這個時間都沒有任何響應， 那么就會斷開連接。
控制臺啟動截圖：
啟動了weinre之后，我們在瀏覽器中輸入localhost:8090.顯示如下界面，表示已經(jīng)啟動成功。
點擊"debug client user interface"，進入調(diào)試頁面。
當前的targets中內(nèi)容為空。
現(xiàn)在，我們需要做另外一點操作，在我們要調(diào)試的頁面中，增加一個腳本。
其中需要把localhost改成自己本機的IP地址
targets已經(jīng)不為none，已經(jīng)能捕捉到嵌入腳本的頁面。
這時，我們就可以點擊Elements進行調(diào)試。
這時候，在調(diào)試的時候，移動端的頁面也同步更新。修改樣式時，會在手機端即時生效，并且也可以查看控制臺信息，唯一一點就是，不能進行斷點調(diào)試。
最后，在調(diào)試結(jié)束之后，別忘記刪除嵌入的script。spy-debugger真機調(diào)試
優(yōu)點：
方便，功能齊全
缺點：
安裝稍微復雜一點
特點：
頁面調(diào)試＋抓包
操作簡單
支持HTTPS。
spy-debugger內(nèi)部集成了weinre、node-mitmproxy、AnyProxy。
自動忽略原生App發(fā)起的https請求，只攔截webview發(fā)起的https請求。對使用了SSL pinning技術(shù)的原生App不造成任何影響。
可以配合其它代理工具一起使用(默認使用AnyProxy)
方法：
TODO。。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103137.html
摘要：移動端調(diào)試困難很多時候，我們在進行移動端開發(fā)時，都是先在端使用手機模擬器進行調(diào)試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現(xiàn)問題，皆大歡喜。 移動端調(diào)試困難 很多時候，我們在進行移動端開發(fā)時，都是先在PC端使用手機模擬器進行調(diào)試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現(xiàn)問題，皆大歡喜。但是一旦出現(xiàn)問題，我們就很難解決，因為缺乏可視化...
摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據(jù)具體的環(huán)境再選擇更為合適的調(diào)試方法。 本文首次發(fā)表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言 在開發(fā)中前端免不了要進行移動端的開發(fā)，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態(tài)欄和底部的菜單欄，特別是在qq內(nèi)置瀏覽器中打開，差...
摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現(xiàn)了觸手可及的夢想，用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習； 一：微信小程序的特點 張小龍：張小龍全面闡述小程...
閱讀 3815·2021-11-24 09:39
閱讀 1948·2021-11-16 11:45
閱讀 668·2021-11-16 11:45
閱讀 1131·2021-10-11 10:58
閱讀 2570·2021-09-09 11:51
閱讀 1996·2019-08-30 15:54
閱讀 757·2019-08-29 13:13
閱讀 3518·2019-08-26 12:18
