|
標(biāo)簽： 作者本人經(jīng)驗(yàn)淺薄，還望大神批評(píng)指教。
移動(dòng)端調(diào)試方法總結(jié),移動(dòng)端調(diào)試方法大致有四種：1、chorme的開發(fā)者平臺(tái)調(diào)試，2、Fildder 遠(yuǎn)程調(diào)試，3、Chrome Inspect 真機(jī)調(diào)試，4、wenwire 遠(yuǎn)程調(diào)試
1、chorme 開發(fā)者平臺(tái)(F12)
這種調(diào)試方法是在開發(fā)前期最常用的一種手段，如果對(duì)chrome開發(fā)者平臺(tái)很熟悉，開發(fā)效率那絕對(duì)是事半功倍。 chrome開發(fā)者調(diào)試常用的5部分： 1、Elements 調(diào)試樣式，打入斷點(diǎn) 2、NetWork 觀察網(wǎng)絡(luò)請(qǐng)求 3、Source 來源，主要用于js調(diào)試 4、Resources 資源，主要用于看數(shù)據(jù)存儲(chǔ)
以上每一部分的功能都十分強(qiáng)大，每一部分都可以拿出來單獨(dú)講，在這里作者就不深究了，只介紹與移動(dòng)開發(fā)相關(guān)的部分。
1、Elemnts html與Css調(diào)試
當(dāng)我們右鍵選中元素時(shí)，就可以看到如上圖所示，chorme會(huì)自動(dòng)將你選中區(qū)域的html代碼與相關(guān)的css展示出來。同時(shí)你對(duì)代碼和css的操作都是即時(shí)展現(xiàn)效果。 我們就可以在代碼部分 對(duì)代碼做增刪改的操作，如果你覺得頁面展示的樣式不對(duì)，那么在css部分做相應(yīng)調(diào)試即可。
除了可以調(diào)試代碼和css還可以打斷點(diǎn)，沒錯(cuò)！有很多斷點(diǎn)我們?cè)赟ource是無法跟進(jìn)去的，此時(shí)我們就可以直接DOM元素上打斷點(diǎn)，我們就可以監(jiān)聽到 某個(gè) DOM 被修改情況，選擇某個(gè)DOM元素，右鍵即出現(xiàn)如下圖所示：
2、NetWork 網(wǎng)絡(luò)請(qǐng)求 首先、chorme的network可以接收到所有的http請(qǐng)求。此部分功能和Fildder十分相似
我們不僅可以看到請(qǐng)求的url，請(qǐng)求的耗時(shí)，還可以看到請(qǐng)求的參數(shù)，返回（Response）的內(nèi)容，更可以詳細(xì)的看到此次請(qǐng)求的耗時(shí)（Timing）全部?jī)?nèi)容
3、Source js調(diào)試
打開source，一般我看到的就是如上圖所示，左側(cè)為腳本資源區(qū)，右側(cè)為對(duì)應(yīng)腳本的詳細(xì)內(nèi)容。 在腳本內(nèi)容區(qū)，打上你斷點(diǎn)，即可進(jìn)行js調(diào)試
4、Resource 資源
Resource 其實(shí)就是web的存儲(chǔ)，從上圖可以看出web存儲(chǔ)的方式有： 1、WebSql 2、IndexedDB 3、Local Storage 4、Session Storage 5、Cookie 6、Application Cache
我們此次開發(fā)用主要是Local Storage.右側(cè)是Local Storage的存儲(chǔ)內(nèi)容。 具體用法請(qǐng)參見http://www.w3school.com.cn/html5/html_5_webstorage.asp 開源storage處理框架https://github.com/marcuswestin/store.js
2、Fildder 移動(dòng)端遠(yuǎn)程調(diào)試
1、首先開打手機(jī)的設(shè)置-->wlan-->設(shè)置手動(dòng)代理， ip：電腦上的本機(jī)ip, ?端口號(hào)：8888（因?yàn)閒ildder默認(rèn)監(jiān)聽8888端口）
2、打開fildder,Tools-->Fildder Options ->Connections 如下圖所示：端口號(hào)為8888，并且允許遠(yuǎn)程調(diào)試。
設(shè)置完成后，就可以監(jiān)聽到我手機(jī)發(fā)出的任何請(qǐng)求了
用Fildder調(diào)試的一個(gè)好處就在于，可以攔截手機(jī)發(fā)出的請(qǐng)求，捕獲請(qǐng)求后，基于Fildder強(qiáng)大的功能，你可以捕獲到的請(qǐng)求做任何處理。
3、Chrome Inspect ?Android真機(jī)調(diào)試
我們先看下最終想要達(dá)到的效果
上圖的?左邊是pc端的chrome?瀏覽器，?右邊是手機(jī)上的chrome?然后可以看到當(dāng)鼠標(biāo)移動(dòng)到某個(gè)div上時(shí) 手機(jī)上的這個(gè)區(qū)域高亮顯示 跟pc上調(diào)試某段代碼效果一樣 你可以修改代碼 并直接在手機(jī)上反饋修改結(jié)果 準(zhǔn)備 為了完成這一亮騷的移動(dòng)調(diào)試功能我們需要以下準(zhǔn)備工作 1.pc端安裝最新的chrome 2.手機(jī)端安裝最新的chrome (?Android機(jī)?) 3.USB連接線 （感覺是不是too simple） Tip?:之前的的chrome如果要實(shí)現(xiàn)這種調(diào)試需要安裝一個(gè)?ADB插件?（需要FQ）?但是最新的chrome已經(jīng)直接支持對(duì)Android的識(shí)別 所以也不用再在chrome上安裝ADB插件了 但需要下載最新的chrome 步驟 下來我們逐步完成 1.假設(shè)你已經(jīng)在電腦上下載了最新的chrome 也在手機(jī)上下載了最新的chrome 2.USB設(shè)置 在你的手機(jī)里打開"設(shè)置"->"開發(fā)人員工具"->"USB調(diào)試" 打開USB調(diào)試。?因?yàn)锳ndroid手機(jī)型號(hào)眾多 很多人找不到"USB調(diào)試這個(gè)選項(xiàng)在哪" 而且大多數(shù)手機(jī)"開發(fā)者選項(xiàng)"默認(rèn)是影藏的，你需要看下自己的手機(jī)說明然后將手機(jī)調(diào)到"開發(fā)者模式" 就可以找到 "USB調(diào)試了"? 3.假設(shè)你已經(jīng)將手機(jī)設(shè)置為"USB調(diào)試"打開的狀態(tài) 將手機(jī)連接到電腦 手機(jī)會(huì)彈出是否鏈接 點(diǎn)擊確定 4.打開電腦的chrome 在地址欄輸入?chrome://inspect?選中?Discover USB devices?可以檢測(cè)到你的設(shè)備 可以看到監(jiān)測(cè)到我的設(shè)備是M351
5.打開手機(jī)上的chrome
上圖可以看到手機(jī)上chrome打開的頁面 此時(shí)我手機(jī)上的chrome沒打開任何網(wǎng)頁 歷史記錄也么有 如果我們?cè)谑謾C(jī)?chrome瀏覽器輸入www.baidu.com 可以看到下圖 ，也可以通過 inspect里chrome后面那個(gè)輸入框直接打開某個(gè)鏈接
6.點(diǎn)擊inspect 如下圖 就看到了文章開始一樣的效果 此時(shí)就是可以審查手機(jī)頁面上的元素了
7.可以點(diǎn)擊彈出的審查元素框右上角的方形小圖標(biāo)切換到視圖模式 這時(shí)會(huì)把你手機(jī)打開的頁面拉到pc上顯示
總結(jié) 基本上已經(jīng)愉快的完成了 總結(jié)下整個(gè)流程 ：pc端和Android手機(jī)端都下載最新的chrome ，在手機(jī)設(shè)置里將"USB調(diào)試"打開?鏈接到電腦 打開電腦chrome 輸入chrome://inspect 打開手機(jī)chrome輸入你想調(diào)試的頁面 點(diǎn)擊inspect 開始調(diào)試。
4、wenwire 遠(yuǎn)程調(diào)試 wenwire調(diào)試此次開發(fā)作者并未使用到。 移動(dòng)端開發(fā)調(diào)試方法總結(jié) 標(biāo)簽： |
|
|
