青草青在线,色婷婷狠狠,天堂俺去俺来也,成人国产精品秘欧美高清,国产精品国内自产拍,亚洲男女免费啪啪视频,在线观看AV热码,亚洲每日在线

文章來源：http://jartto.wang/2018/11/01/mobile-debug/

隨著移動設(shè)備的高速發(fā)展，H5 開發(fā)也成為了 F2E 不可或缺的能力。而移動開發(fā)的重中之重就是掌握調(diào)試技巧，修 Bug 于無形。

一、概要

因為移動端操作系統(tǒng)分為 iOS 和 Android 兩派，所以本文的調(diào)試技巧也會按照不同的系統(tǒng)來區(qū)分。尋找最合適高效的方式，才能讓你事半功倍。

文章會列舉目前適合移動端調(diào)試的多種方案，快來選擇你的最佳實踐吧！

二、iOS 設(shè)備

Safari：iphone 調(diào)試利器，查錯改樣式首選，需要我們做如下設(shè)置：

瀏覽器設(shè)置：Safari - 偏好設(shè)置 - 高級 - 勾選「在菜單欄中顯示開發(fā)」菜單
iphone 設(shè)置：設(shè)置 - Safari - 高級 - 打開 Web 檢查器

大功告成，這時候通過手機的 Safari 來打開 H5 頁面，我們通過瀏覽器開發(fā)選項可以看到：

iOS 模擬器：不需要真機，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁面。

首先下載 Xcode ，運行項目，選擇模擬器 iphonex，編譯后就會打開模擬器，如下：

可以看到 H5 已經(jīng)在「殼子」中運行起來了，下來就可以嘗試調(diào)用 Webview 的方法，和「殼子」交互了。更多的調(diào)試技巧可以參考文章：iOS 模擬器調(diào)試。

具體的調(diào)試功能還是依賴瀏覽器的開發(fā)選項，與上無異，就不贅述了。

三、抓包

Charles：Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況。

Charles 抓包首先需要配置手機代理，Wifi - 配置代理（IP 地址） - 手動，如下圖：

配置好手機代理，這時候打開 Charles ，就會收到確認提醒，選擇允許。接下來就可以捕獲手機的請求了，但是這些都是常規(guī)操作，我們來點高級的。

有意思的是：我們可以用本地文件來替換線上文件，方便調(diào)試，遠程定位線上問題。

選擇 Structure，找到需要替換的文件，右鍵菜單 - Map Local，如下圖：

這時候就會打開一個彈窗，填寫具體的配置：

OK，大功告成，快去改動本地文件吧，從此再也不怕線上調(diào)試了。需要注意的是如果抓取 HTTPS 請求，要安裝信任證書，下文會詳細說明。

與之相應(yīng)的是 Windows 平臺的 Fiddler，功能大致相似，這里就不細說了。

四、Spy-Debugger

spy-debugger：移動端調(diào)試的利器，便捷的遠程調(diào)試手機頁面、抓包工具。

我們先來安裝：

>?sudo?npm?install?spy-debugger?-g

啟動命令：

>?spy-debugger

這時候，控制臺會打印出如下信息，說明服務(wù)已經(jīng)啟動了：

正在啟動代理
本機在當前網(wǎng)絡(luò)下的IP地址為：10.200.24.46
node-mitmproxy啟動端口:?9888
瀏覽器打開?--->?http://127.0.0.1:50389

最后一步，設(shè)置手機代理：10.200.24.46，端口號：9888。補充說明一下：

Android 設(shè)置代理步驟：設(shè)置 - WLAN - 長按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級 - 代理設(shè)置 - 手動
iOS 設(shè)置代理步驟：設(shè)置 - 無線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP 代理手動

接下來，嘗試一下抓包：

再打開調(diào)試頁面：

HTTPS 抓包，需要安裝根證書，下文會詳細說明。

五、Whistle

上面推薦了一款操作簡單的調(diào)試利器，升級一下，看看更加強大的調(diào)試工具 whistle。

whistle：基于 Node 實現(xiàn)的跨平臺 Web 調(diào)試代理工具。

whistle(讀音[?w?s?l]，拼音[wēisǒu])是基于 Node實現(xiàn)的跨平臺抓包調(diào)試代理工具，有以下基本功能：

查看 HTTP、HTTPS請求響應(yīng)內(nèi)容
查看 WebSocket、Socket 收發(fā)的幀數(shù)據(jù)
設(shè)置請求 hosts、上游 http/socks 代理
修改請求 url 、方法、頭部、內(nèi)容
修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換
修改 WebSocket 或 Socket 收發(fā)的幀數(shù)據(jù)
內(nèi)置調(diào)試移動端頁面的 weinre 和 log
作為 HTTP 代理或反向代理
支持用 Node 編寫插件擴展功能

大致了解后，我們來嘗試安裝：

sudo npm install -g whistle

淘寶鏡像：npm install whistle -g –registry=https://registry.npm.taobao.org

whistle 安裝完成后，執(zhí)行命令 whistle help 或 w2 help，查看 whistle 的幫助信息：

run???????Start?a?front?service
start?????Start?a?background?service
stop??????Stop?current?background?service
restart???Restart?current?background?service
help??????Display?help?information

這里只列出部分命令，更多請 w2 help 查看。

看到上面的操作，我們何不試試縮寫 w2 start 來啟動服務(wù)：

w2 start

看到如下的輸出，說明服務(wù)已經(jīng)正常啟動了：

這時候在瀏覽器打開鏈接，同時手機上配置代理（同 Charles），接下來就可以愉快的調(diào)試了。值得注意的是，whistle 的功能遠非如此，更多的擴展請移步官網(wǎng)文檔，貼張圖先預(yù)覽下：

記得開啟攔截 HTTPS：勾選 Capture HTTPS CONNECTs

六、安裝 HTTPS 證書

對于 Charles，按照如下操作安裝證書：

help-SSL?-?Proxying?-?install?Charles?root

彈出安裝證書的提示框：

按照提示去手機瀏覽器打開：chls.pro/ssl，安裝信任證書即可。

對于 spy-debugger，HTTPS 抓包，需要安裝根證書，選擇 RootCA，掃描二維碼按照提示信任證書。安裝證書的時候需要注意以下幾件事情：

1.手機必須先設(shè)置完代理后再通過(非微信)手機瀏覽器訪問 http://s.xxx (地址二維碼)安裝證書；
2.手機首次調(diào)試需要安裝證書，已安裝了證書的手機無需重復(fù)安裝；
3.手機和 PC 保持在同一網(wǎng)絡(luò)下（比如同時連到一個 WIFI 下）；

切記：移動設(shè)備和 PC 必須在一個 WIFI 下。

七、真機調(diào)試

上面說了很多，但是實際開發(fā)過程中，我們不會等上線了才去驗證兼容性，所以你可能需要提前「真機調(diào)試」。這里提供兩種方式：

Chrome Remote Devices：依賴 Chrome 來進行遠程調(diào)試，適合安卓手機。

首先，開啟 Android 手機的「開發(fā)者選項」，勾選「USB 調(diào)試」。
然后，Chrome 中輸入：chrome://inspect，進入調(diào)試頁面。

很全面的一篇文章，可以參考：Chrome 遠程調(diào)試。

localhost 轉(zhuǎn) ip，掃描二維碼手機顯示，這個比較簡單。

可以在瀏覽器安裝一個 Chrome 插件，用于將當前頁面鏈接轉(zhuǎn)換成二維碼，這樣就能邊開發(fā)邊真機預(yù)覽，非常方便。

八、調(diào)試工具

這里推薦一款調(diào)試工具：vConsole，一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板。安裝很簡單：

npm install vconsole

如果未使用 AMD/CMD 規(guī)范，可直接在 HTML 中引入 vConsole 模塊。為了便于后續(xù)擴展，建議在中引入：

<head>
??<script?src="path/to/vconsole.min.js">script>
??<script>
?var?vConsole?=?new?VConsole();
??script>
head>

如果使用了 AMD/CMD 規(guī)范，可在 module 內(nèi)使用 require() 引入模塊：

var?VConsole?=?require('path/to/vconsole.min.js');
var?vConsole?=?new?VConsole();

請注意，VConsole 只是 vConsole 的原型，而非一個已實例化的對象。

所以在手動 new 實例化之前，vConsole 不會被插入到網(wǎng)頁中。大概功能如下圖：

看起來很完美，但是有個小缺點：網(wǎng)絡(luò)請求，需要刷新頁面，可是很多內(nèi)嵌的 H5 頁面是沒有機會刷新頁面的，所以需要客戶端童鞋配合增加刷新的功能方便調(diào)試。

九、場景分析

既然移動端調(diào)試有這么多種方案，那在實際操作中，我該如何取舍？

說了這么多種方案，這里總結(jié)一下各個方案的適用場景，根據(jù)不同的場景去選擇最佳的調(diào)試方案，這樣才能更快速的輸出，Carry 全場：

1.Safari：iPhone 調(diào)試利器，查錯改樣式首選；
2.iOS 模擬器：不需要真機，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁面；
3.Charles：Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況；
4.Fiddler：適合 Windows 平臺，與 Charles 類似，查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況；
5.Spy-Debugger：移動端調(diào)試的利器，便捷的遠程調(diào)試手機頁面、抓包工具；
6.Whistle：基于 Node 實現(xiàn)的跨平臺 Web 調(diào)試代理工具；
7.Chrome Remote Devices：依賴 Chrome 來進行遠程調(diào)試，適合安卓手機遠程調(diào)試靜態(tài)頁；
8.localhost 轉(zhuǎn) ip：真機調(diào)試，適合遠程調(diào)試靜態(tài)頁面；
9.vConsole：內(nèi)置于項目，打印移動端日志，查看網(wǎng)絡(luò)請求以及查看 Cookie 和 Storage；

十、白屏處理

移動端的白屏是最頭疼的問題，這里順帶提供幾種分析問題的思路，以供參考。

1.方案分析 ☆

一般上線后出現(xiàn)問題，我們最容易想到的就是：是否是新代碼引起的問題。所以有效解決手段就是「控制變量法」。

2.代碼注釋法 ☆

莫名奇妙的白屏，適合頁面無異常日志，同時無請求發(fā)送，問題集中在單一頁面的情況。這種問題比較直觀，肯定是某一頁面出現(xiàn)了代碼異常或是無效的 return，導(dǎo)致頁面渲染終止，但并不屬于異常。這時候，「代碼注釋法」將是你的最佳選擇，逐行去注釋可以代碼，直到定位問題。

3.類庫異常，兼容問題 ☆

這種場景也會經(jīng)常遇到，我們需要用可以調(diào)試頁面異常的方式，如 Safari，Spy-Debugger，Whistle，vConsole 查看異常日志，從而迅速定位類庫位置，從而找尋替換或是兼容方案。

4.try catch ☆☆

如果你的項目沒有異常監(jiān)控，那么在可疑的代碼片段中去 Try Catch 吧。

5.Debug 包 ☆☆☆

在你的項目中裝上 [vConsole](https://link.zhihu.com/?target=http%3A//jartto.wang/2018/11/01/mobile-debug/)，并配合客戶端 debug 插件，360 度無死角監(jiān)控異常，這才是最有效的方式。

6.ES6 語法兼容 ☆

一般我們都會通過 Babel 來編譯 ES6 ，但是額外的第三方類庫如果有不兼容的語法，低版本的移動設(shè)備就會異常。所以，先用上文講述的調(diào)試方法，確定異常，然后去增加 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 來兼容吧。

學(xué)習(xí)交流
關(guān)注公眾號【前端宇宙】,每日獲取好文推薦
添加微信,入群交流

“在看和轉(zhuǎn)發(fā)”就是最大的支持

H5 移動端調(diào)試全攻略