在 iOS 12 中，蘋果正式棄用 UIWebView，改成 WKWebView，參考官方聲明。

　　后者在性能、穩定性、功能方面有很大提升，并且與 Safari 具有相同的 JavaScript 引擎（JavaScriptCore）。

　　從 Android 4.4 開始，增加 Chromium WebView，用來取代 Android WebKit WebView。

　　從 Android 5.0 開始，Chromium WebView 支持以 Android System WebView App 的形式在應用商店中下載，可獨立升級。

　　Android 可以在 App 中集成其他 WebView 組件，例如如 TBS X5 內核的 WebView，或者集成其他 JavaScript 引擎（默認采用 V8 引擎），例如為 React Native 專門優化的 Hermes。

　　而 iOS 上就只能使用系統內置的 WebView。由此可知，iOS 和 Android 對于 CSS 和 JavaScript 的支持度各不相同，在研發時需要注意兼容性。

一、調試的困難

　　在客戶端中調試網頁，不像在 PC 的瀏覽器有那么完善的控制臺，對于網頁的各方面都能一目了然。

　　

1）注入腳本

　　若要調試此類頁面，需要些方法，比較常見的有在頁面中加入 vConsole 腳本，生成一個控制臺。

　　

　　PageSpy 是一款適用于遠程 Web 項目調試的工具（可在異地調試），需要在頁面注入腳本，并且還需要在服務器中部署一套控制臺系統。

　　

2）抓包工具

　　或者借助 Charles、Fiddler 這類抓包工具來查看網絡通信、映射本地腳本等。

　　

　　不過在 Android 6.0 之后，不會信任從抓包工具導出的根證書，這就導致無法在抓包工具中瀏覽 HTTPS 通信，不過 iOS 沒有這方面的限制。

　　而網頁中的某些業務可能需要借助客戶端的能力（JSBridge）才能完成，但這塊無法在 PC 瀏覽器中實現。

　　由此可見，需要有種辦法能夠調試 iOS 和 Android 兩種客戶端中的網頁。

二、iOS

　　iOS 的調試比較簡單，可以借助 Safari 瀏覽器實現。

1）顯示開發

　　首先顯示 Safari 瀏覽器的“開發”菜單。

　　以 macOS 為例，偏好設置 > 高級，然后勾選“在菜單欄中顯示開發菜單”。

　　

2）開啟調試

　　然后是開啟 iPhone 的 Safari 調試模式，設置 > Safari瀏覽器 > 高級 > 網頁檢查器 > 啟用。

　　

3）兩端聯調

　　現在就可以開始調試了，將手機用數據線與電腦連接。

　　在訪問頁面后，選中開發菜單，找到對應的手機，就能看到訪問中的網頁地址。

　　

4）調試窗口

　　點擊頁碼地址，進入調試窗口，常規的諸如網絡、元素等調試模塊都有。

　　

　　除了能映射客戶端 WebView 中的網頁之外，Safari 瀏覽器中的頁面也能同步映射到調試窗口。

三、Android

　　Android 配置調試的過程比較波折，可以借助 Chrome 瀏覽器實現。

1）顯示開發者選項

　　首先需要在手機中顯示開發者選項，默認是隱藏的，各款手機的開啟過程可能略有不同。

　　以小米為例，我的設備 > 全部參數與信息 > MIUI版本，點擊 5~8 下，就會有一個開發者模式開啟的提示。

　　

2）開啟 USB 調試

　　然后進入更多設置，翻到最后就能看到開發者選項菜單，進入后，開啟 USB 調試。

　　

3）Chrome Inspect

　　接著打開電腦的 Chrome 瀏覽器，輸入 chrome://inspect。

　　

　　現在可以在客戶端中訪問網頁，下圖的 WebView 表示客戶端環境，點擊 inspect。

　　

　　應該是彈出控制臺，但是卻發生了錯誤，提示 HTTP/1.1 404 Not Found。

　　

　　這是因為 Android System WebView 的版本低于電腦 Chrome 瀏覽器的版本，前者是 117，而后者是 120。

　　

　　如果移動端的 Chrome 瀏覽器版本較低，那么在調試時，也會出現同樣的問題。

　　若未出現上述異常，可直接跳過下一節的版本升級。

4）版本升級

　　兩者的解決辦法都是升級，一個是升級 Android System WebView，另一個是升級 Chrome 瀏覽器。

　　而 Android System WebView 需要到 Google Play Store 中更新。

　　由于圖中已經是最新版本，因此沒有顯示更新按鈕。

　　

　　在更新成功后，以小米為例，在開發者選項中，選中 WebView 實現，就能看到當前版本。

　　

5）調試窗口

　　重新訪問網頁，提示 Remote browser is newer than client browser. Try `inspect fallback` if inspection fails。

　　也就是說，客戶端的版本高于電腦瀏覽器，那么可以點擊 inspect fallbak 按鈕。

　　

　　在點擊后，就能正式出現完整的調試窗口，左邊是網頁，右邊是控制臺。

　　當有一端移動網頁時，另一端也能看到在移動，兩者實現了同步。

　　

 

 

參考資料：

iOS UIWebView與WKWebView 那些事

Web 瀏覽器相關的一些概念

小米手機開發者選項在哪？

Chrome遠程調試

MIUI 更新 WebView 組件