移動端網頁調試方案
- 2019 年 10 月 3 日
- 筆記
移動端調試方案
頁面容器
移動設備上的各種瀏覽器
chrome、safari、firefox、samsung browser
各類app內的webview
不同平台實現不一樣
- iOS平台
iOS 8.0以前的UIWebView，現在（2019年）基本被淘汰，不用管。
iOS 8.0及以後的WKWebView，主流應用內均使用它作為容器展示html - Android平台
WebView實現一般為Android WebView，部分手機廠商會默認設置成chrome實現，差別不是很大。 - 微信平台
微信iOS端是採用wkwebkit進行渲染的，Android平台採用的是x5內核
debug方案
Android端
由於移動端網頁開發不能直接打開developer tools，導致我們調試起來稍微麻煩。好在我們有解決方案：
Remote Devices
Google為我們提供的開發利器，讓我們可以在電腦端使用developer tools進行elements檢查和network監測，非常方便快捷。
使用方式：
-
app容器需要進行如下設置，chrome、samsung瀏覽器不用，默認就能打開
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } -
手機打開usb調試
-
手機和電腦通過數據線連接，通過命令行執行，顯示如圖之後，表示成功連接
adb devices
-
然後從chrome瀏覽器F12找到Remote devices
-
inspect你想要監聽的頁面，如下
iOS端
使用Safari自帶的開發者工具
- 首先是iOS設備點擊設置->Safari->高級設置->打開web檢查器
-
如果是app容器，使用webview載入頁面，那麼app容器需要是開發包，apple store上的正式包是不行的。
跨平台
抓包工具Charles
通過網路代理進行設備網路請求的監聽，注意https需要設置證書，並且就算設置了證書，tls1.2以上的post請求也無法監聽，只能監聽tls1.2以下的，還有就是現在很多app基於https的，當它判斷你的證書自定義的時候，會拋出異常無法進行api請求，請自行判斷。
- 設備和電腦連到同一區域網，在Android設備中點擊wifi詳情，進入高級設置里設置網路代理，iOS設備點擊wifi詳情，點擊配置代理選擇手動。
-
代理主機名為你的筆記型電腦在區域網下的ip地址，埠號在charles軟體中proxy->proxy settings中設置
-
代理設置好後Android設備可能需要關閉wifi再重新打開wifi代理才能生效，並且第一次代理charles軟體需要點擊allow。
-
https證書安裝：Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice，它會指導你用手機下載一個charles自定義的https證書然後安裝。
調試工具weinre
由於某些app並沒有打開remote debug，而我們又要內嵌自己的頁面進行調試，抓包只能檢測網路請求。所以這個工具就有了使用場景。它能夠檢測elements並查看js輸出資訊。
使用方法：
-
通過npm安裝weinre
npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090 -
在你要調試的頁面中插入js腳本,anonymous是appid，你可以自定義
<script src="http://m.kuaijiajin.club:9090/target/target-script-min.js#anonymous" ></script> -
在chrome瀏覽器中打開地址，選擇elements和console監測頁面
其他方案
總的來說，這幾種方案覆蓋了大部分使用場景，開發過程中問題不大。如果還有別的要排查的，總體來說不外乎加日誌、加alert等等，最優解是自帶的web檢查器，不過還是結合著用吧，非常方便。
當然，還有一些很好用的調試工具像騰訊出品的vConsole也不錯，自己看著選擇吧。
還有，如app容器是你自己開發的，Android studio是會在log里列印出console資訊的。
附錄：ES6標準兼容情況
我們簡單分下情況：
一般來說你需要用到的大部分ES6特性。 在Android 6.0或iOS 10.0以上均已實現隨便用，這以下就要注意兼容性問題了。 其中一些基礎特性，Android 5.1就已經支援了。
我的部落格即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3hape0w9ueqsk
