在 iOS 12 中，蘋果正式棄用 UIWebView，改成 WKWebView，參考[官方聲明](https://developer.apple.com/documentation/webkit/replacing_uiwebview_in_your_app)。   后者在性能、穩定性、功能方面有很大提升，并且與 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](https://github.com/Tencent/vConsole)腳本，生成一個控制臺。 :-:    還有一個[PageSpy](https://github.com/HuolalaTech/page-spy-web)是一款適用于遠程 Web 項目調試的工具（可在異地調試），需要在頁面注入腳本，并且還需要在服務器中部署一套控制臺系統。 :-:  **2）抓包工具**   或者借助[Charles](https://www.charlesproxy.com/)、[Fiddler](https://www.telerik.com/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 那些事](https://juejin.cn/post/7056680479436570631) [Web 瀏覽器相關的一些概念](https://keqingrong.cn/blog/2019-11-24-concepts-related-to-web-browsers/) [小米手機開發者選項在哪？](https://blog.csdn.net/shujuwa_data/article/details/124978906) [Chrome遠程調試](https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Use-Tools/remote-debugging.md) [MIUI 更新 WebView 組件](https://www.manshaoco.com/765.html) ***** > 原文出處： [博客園-前端利器躬行記](https://www.cnblogs.com/strick/category/1472499.html) [知乎專欄-前端利器躬行記](https://zhuanlan.zhihu.com/pwtool) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。