zzijzzij亚洲日本少妇jizjiz,99久久99久久免费精品蜜桃,www.成色av久久成人,18video性欧美19sex,久久综合九色综合欧美亚洲

為用戶創(chuàng)造價(jià)值的開(kāi)發(fā)公司

始終追求工匠精神，是您靠譜的H5開(kāi)發(fā)、小程序開(kāi)發(fā)、微信開(kāi)發(fā)供應(yīng)商

藍(lán)暢首頁(yè) >> 動(dòng)態(tài)

H5開(kāi)發(fā)移動(dòng)調(diào)試全攻略，如何調(diào)試H5

時(shí)間：2019-11-23 22:53:25 | 來(lái)源：

一、概要

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

文章會(huì)列舉目前適合移動(dòng)端調(diào)試的多種方案，快來(lái)選擇你的最佳實(shí)踐吧！

二、iOS 設(shè)備

Safari：iphone 調(diào)試?yán)鳎殄e(cuò)改樣式首選，需要我們做如下設(shè)置：

  • 瀏覽器設(shè)置：Safari - 偏好設(shè)置 - 高級(jí) - 勾選「在菜單欄中顯示開(kāi)發(fā)」菜單

  • iphone 設(shè)置：設(shè)置 - Safari - 高級(jí) - 打開(kāi) Web 檢查器

大功告成，這時(shí)候通過(guò)手機(jī)的 Safari 來(lái)打開(kāi) H5 頁(yè)面，我們通過(guò)瀏覽器開(kāi)發(fā)選項(xiàng)可以看到：
safari1

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

首先下載 Xcode ，運(yùn)行項(xiàng)目，選擇模擬器 iphonex，編譯后就會(huì)打開(kāi)模擬器，如下：

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

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

三、抓包

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

Charles 抓包首先需要配置手機(jī)代理，Wifi - 配置代理（IP 地址） - 手動(dòng)，如下圖：

配置好手機(jī)代理，這時(shí)候打開(kāi) Charles ，就會(huì)收到確認(rèn)提醒，選擇允許。接下來(lái)就可以捕獲手機(jī)的請(qǐng)求了，但是這些都是常規(guī)操作，我們來(lái)點(diǎn)高級(jí)的。

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

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

這時(shí)候就會(huì)打開(kāi)一個(gè)彈窗，填寫(xiě)具體的配置：
map2

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

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

四、Spy-Debugger

spy-debugger： 移動(dòng)端調(diào)試的利器，便捷的遠(yuǎn)程調(diào)試手機(jī)頁(yè)面、抓包工具。

我們先來(lái)安裝：

> sudo npm install spy-debugger -g


啟動(dòng)命令：

> spy-debugger


這時(shí)候，控制臺(tái)會(huì)打印出如下信息，說(shuō)明服務(wù)已經(jīng)啟動(dòng)了：

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


最后一步，設(shè)置手機(jī)代理：10.200.24.46，端口號(hào)：9888。補(bǔ)充說(shuō)明一下：

  • Android 設(shè)置代理步驟：設(shè)置 - WLAN - 長(zhǎng)按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級(jí) - 代理設(shè)置 - 手動(dòng)

  • iOS 設(shè)置代理步驟：設(shè)置 - 無(wú)線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP 代理手動(dòng)

接下來(lái)，嘗試一下抓包：
page1
再打開(kāi)調(diào)試頁(yè)面：
page2

HTTPS 抓包，需要安裝根證書(shū)，下文會(huì)詳細(xì)說(shuō)明。

五、Whistle

上面推薦了一款操作簡(jiǎn)單的調(diào)試?yán)鳎?jí)一下，看看更加強(qiáng)大的調(diào)試工具 whistle。

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


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

  1. 查看 HTTP、HTTPS請(qǐng)求響應(yīng)內(nèi)容

  2. 查看 WebSocket、Socket 收發(fā)的幀數(shù)據(jù)

  3. 設(shè)置請(qǐng)求 hosts、上游 http/socks 代理

  4. 修改請(qǐng)求 url 、方法、頭部、內(nèi)容

  5. 修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換

  6. 修改 WebSocket 或 Socket 收發(fā)的幀數(shù)據(jù)

  7. 內(nèi)置調(diào)試移動(dòng)端頁(yè)面的 weinre 和 log

  8. 作為 HTTP 代理或反向代理

  9. 支持用 Node 編寫(xiě)插件擴(kuò)展功能

大致了解后，我們來(lái)嘗試安裝：

1
sudo npm install -g whistle


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

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

1
2
3
4
5
run       Start a front service
start     Start a background service
stop      Stop current background service
restart   Restart current background service
help      Display help information


這里只列出部分命令，更多請(qǐng) w2 help 查看。

看到上面的操作，我們何不試試縮寫(xiě) w2 start 來(lái)啟動(dòng)服務(wù)：

w2 start


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

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

記得開(kāi)啟攔截 HTTPS：勾選 Capture HTTPS CONNECTs

六、安裝 HTTPS 證書(shū)

對(duì)于 Charles，按照如下操作安裝證書(shū)：

help-SSL - Proxying - install Charles root


https1

彈出安裝證書(shū)的提示框：
https2

按照提示去手機(jī)瀏覽器打開(kāi)：chls.pro/ssl，安裝信任證書(shū)即可。

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

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

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

七、真機(jī)調(diào)試

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

Chrome Remote Devices：依賴 Chrome 來(lái)進(jìn)行遠(yuǎn)程調(diào)試，適合安卓手機(jī)。


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


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

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

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

八、調(diào)試工具

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

npm install vconsole


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

1
2
3
4
5
6
<head>
<scriptsrc="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();


請(qǐng)注意，VConsole 只是 vConsole 的原型，而非一個(gè)已實(shí)例化的對(duì)象。

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

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

九、場(chǎng)景分析

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

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

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

十、白屏處理

移動(dòng)端的白屏是最頭疼的問(wèn)題，這里順帶提供幾種分析問(wèn)題的思路，以供參考。

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

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

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

4.try catch ☆☆
如果你的項(xiàng)目沒(méi)有異常監(jiān)控，那么在可疑的代碼片段中去 Try Catch 吧。

5.Debug 包 ☆☆☆
在你的項(xiàng)目中裝上 vConsole，并配合客戶端 debug 插件，360 度無(wú)死角監(jiān)控異常，這才是最有效的方式。

6.ES6 語(yǔ)法兼容 ☆
一般我們都會(huì)通過(guò) Babel 來(lái)編譯 ES6 ，但是額外的第三方類庫(kù)如果有不兼容的語(yǔ)法，低版本的移動(dòng)設(shè)備就會(huì)異常。所以，先用上文講述的調(diào)試方法，確定異常，然后去增加 polyfill 來(lái)兼容吧。



關(guān)于我們：


Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開(kāi)發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(wú)錫、廈門(mén)、重慶、西安等大中型城市及地區(qū)    為您提供：H5開(kāi)發(fā)，小程序開(kāi)發(fā)，H5外包，微信開(kāi)發(fā)，H5商城開(kāi)發(fā)，小程序商城開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)外包，H5游戲開(kāi)發(fā)，小程序開(kāi)發(fā)外包，小程序設(shè)計(jì)、APP開(kāi)發(fā)外包，UI設(shè)計(jì)，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)




本文地址：
更多內(nèi)容推薦：
專欄最新閱讀：
更多文章閱讀請(qǐng)至：技術(shù)專欄
Tips: 為您提供 微信開(kāi)發(fā)、H5開(kāi)發(fā)、微信小程序開(kāi)發(fā)、微信定制開(kāi)發(fā)、網(wǎng)站開(kāi)發(fā)、小程序商城開(kāi)發(fā)、SEO網(wǎng)站優(yōu)化、視頻后期制作等定制化開(kāi)發(fā)服務(wù)