9102了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試嗎-創(chuàng)新互聯(lián)

移動(dòng)端調(diào)試?yán)щy

成都創(chuàng)新互聯(lián)公司專注于高郵企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都商城網(wǎng)站開(kāi)發(fā)。高郵網(wǎng)站建設(shè)公司,為高郵等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

很多時(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)槿狈梢暬慕缑?。不似在PC端，我們能直觀的去改變樣式，或者是進(jìn)行斷點(diǎn)調(diào)試。有時(shí)，在移動(dòng)端我們不得不借助于alert來(lái)調(diào)試，但是這樣的調(diào)試方法效率極其低下，很多時(shí)候，都是靠經(jīng)驗(yàn)，或者是靠排除法。甚至，我們不得不歸結(jié)為是瀏覽器的實(shí)現(xiàn)問(wèn)題。

那么，有什么什么方法，能夠讓我們調(diào)試移動(dòng)端的適配的時(shí)候，像調(diào)試PC端一樣直觀呢？本文旨在為你提供移動(dòng)端的調(diào)試方法，希望能夠?yàn)槟愦蜷_(kāi)新的一扇門。

本文會(huì)給出三種真機(jī)調(diào)試方法，你可以選擇自己最喜歡的一款~

移動(dòng)端真機(jī)調(diào)試方法

• chrome真機(jī)調(diào)試
• weinre調(diào)試
• spy-debugger調(diào)試

簡(jiǎn)單說(shuō)明一下每一種方式的優(yōu)缺點(diǎn)：

第一種: chrome真機(jī)調(diào)試，有一個(gè)很大的局限性就是，只能調(diào)試手機(jī)端的chrome瀏覽器，對(duì)于UC，QQ這些瀏覽器均不適用，因此在調(diào)試兼容問(wèn)題時(shí)，幫助不大，但是大的優(yōu)點(diǎn)是: 簡(jiǎn)單快捷。

第二種: weinre調(diào)試方式，安裝和適用不復(fù)雜，適用于全平臺(tái)的調(diào)試，即任何手機(jī)的任何瀏覽器皆可以調(diào)試，不過(guò)需要手機(jī)和電腦在同一個(gè)網(wǎng)段下。

第三種:spy-debugger，安裝稍微復(fù)雜一點(diǎn)，spy-debugger集成了weinre，不過(guò)還增加了抓包工具，使用最為方便。

下面我們開(kāi)始具體介紹如何使用這三種調(diào)試方法：

1.chrome真機(jī)調(diào)試

手機(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)試。(鑒于我的工作電腦是加了域的，因?yàn)椴⒉荒苁褂眠@個(gè)方式，如果有和我一樣情況的童鞋，可以考慮使用另外兩種調(diào)試方式)

2.weinre真機(jī)調(diào)試

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具，借助于網(wǎng)絡(luò)，可以在PC上直接調(diào)試運(yùn)行在移動(dòng)設(shè)備上的遠(yuǎn)程頁(yè)面。

本地服務(wù)器: 可以使用http-server、tomcat等,也可以使用編譯器集成的服務(wù)

weinre安裝

全局安裝: npm install –g weinre

局部安裝: npm install weinre

啟動(dòng): weinre --httpPort 8090 --boundHost -all-

如果是局部安裝的話，需要在前面加上 node_modules/.bin/

相信前端的童鞋都會(huì)用npm包管理工具，對(duì)于這個(gè)工具，我就不展開(kāi)了，如果沒(méi)有安裝npm的，自行安裝。

weinre啟動(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)連接。

8080端口使用情況較多，所以我選擇了指定8090端口。

啟動(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è)腳本。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

分享標(biāo)題：9102了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試嗎-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://muchs.cn/article2/dhegic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、小程序開(kāi)發(fā)、Google、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)