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