移動端網頁調試方案

移動端調試方案

• 移動端調試方案
  • 頁面容器
    • 移動設備上的各類瀏覽器
    • 各種app內的webview
  • debug方案
    • Android端
    • iOS端
    • 跨平臺
      • 抓包工具Charles
      • 調試工具weinre
    • 其餘方案
    • 附錄：ES6標準兼容狀況

頁面容器

移動設備上的各類瀏覽器

chrome、safari、firefox、samsung browser

各種app內的webview

不一樣平臺實現不同

1. iOS平臺
   iOS 8.0之前的UIWebView，如今（2019年）基本被淘汰，不用管。
   iOS 8.0及之後的WKWebView，主流應用內均使用它做爲容器展現html
   
2. Android平臺
   WebView實現通常爲Android WebView，部分手機廠商會默認設置成chrome實現，差異不是很大。
   
3. 微信平臺

微信iOS端是採用wkwebkit進行渲染的，Android平臺採用的是x5內核

debug方案

Android端

因爲移動端網頁開發不能直接打開developer tools，致使咱們調試起來稍微麻煩。好在咱們有解決方案：
Remote Devices
谷歌爲咱們提供的開發利器，讓咱們能夠在電腦端使用developer tools進行elements檢查和network監測，很是方便快捷。
使用方式：

1. app容器須要進行以下設置，chrome、samsung瀏覽器不用，默認就能打開

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
       WebView.setWebContentsDebuggingEnabled(true);
   }

2. 手機打開usb調試

3. 手機和電腦經過數據線鏈接，經過命令行執行，顯示如圖以後，表示成功鏈接

   adb devices

4. 而後從chrome瀏覽器F12找到Remote devices

5. inspect你想要監聽的頁面，以下

iOS端

使用Safari自帶的開發者工具

1. 首先是iOS設備點擊設置->Safari->高級設置->打開web檢查器

2. 若是是app容器，使用webview加載頁面，那麼app容器須要是開發包，apple store上的正式包是不行的。

跨平臺

抓包工具Charles

經過網絡代理進行設備網絡請求的監聽，注意https須要設置證書，而且就算設置了證書，tls1.2以上的post請求也沒法監聽，只能監聽tls1.2如下的，還有就是如今不少app基於https的，當它判斷你的證書自定義的時候，會拋出異常沒法進行api請求，請自行判斷。

1. 設備和電腦連到同一局域網，在Android設備中點擊wifi詳情，進入高級設置裏設置網絡代理，iOS設備點擊wifi詳情，點擊配置代理選擇手動。

2. 代理主機名爲你的筆記本在局域網下的ip地址，端口號在charles軟件中proxy->proxy settings中設置

3. 代理設置好後Android設備可能須要關閉wifi再從新打開wifi代理才能生效，而且第一次代理charles軟件須要點擊allow。

4. https證書安裝：Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice，它會指導你用手機下載一個charles自定義的https證書而後安裝。

調試工具weinre

因爲某些app並無打開remote debug，而咱們又要內嵌本身的頁面進行調試，抓包只能檢測網絡請求。因此這個工具就有了使用場景。它可以檢測elements並查看js輸出信息。
使用方法：

1. 經過npm安裝weinre

   npm -g install weinre
   weinre --boundHost 192.168.1.194 --httpPort 9090

2. 在你要調試的頁面中插入js腳本,anonymous是appid，你能夠自定義

   <script src="http://m.kuaijiajin.club:9090/target/target-script-min.js#anonymous" ></script>

3. 在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