在 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 按鈕。
在點擊後，就能正式出現完整的調試窗口，左邊是網頁，右邊是控制檯。
當有一端移動網頁時，另一端也能看到在移動，兩者實現了同步。
參考資料：