Android 裝置WebView遠端除錯
宣告：本文主要介紹chrome 的inspect 實現的遠端除錯。要求 Android 4.4 (KitKat) 以上並能開啟webview渲染，chrome 版本 32++(建議最新版本)。大部分內容來自谷歌開發者網站，部分圖片來自老版本的chrome，但大體上一樣。
如果低於上面的硬體要求可以通過weinre來除錯，詳情見文章。https://segmentfault.com/a/1190000002608608
一、Android 與chrome連線設定
本文內容
- 設定您的 Android 裝置進行遠端除錯，並從開發計算機上發現Android裝置。
- 從您的開發計算機檢查和除錯 Android
- 將 Android 裝置上的內容抓屏到您的開發計算機上的 DevTools 例項中。
基礎要求：
開發計算機上已安裝 Chrome 32 或更高版本。
開發計算機上已安裝 USB 驅動程式（如果您使用 Windows）。 確保裝置管理器報告正確的 USB 驅動程式
擁有一根可以將您的 Android 裝置連線至開發計算機的 USB 電纜。
Android 4.2 或更高版本。
您的 Android 裝置上已安裝 Chrome（Android 版）。
1 、發現您的 Android 裝置
- 1、在您的 Android 裝置上，選擇 Settings> Developer Options > Enable USB Debugging。 在執行 Android 4.2 及更新版本的裝置上，Developer options 預設情況下處於隱藏狀態。 請參閱啟用裝置上的開發者選項以瞭解如何啟用它。
- 2、在您的開發計算機上開啟 Chrome。 遠端除錯在隱身模式或訪客模式下無法執行，每個品牌的手機有略微差異。
- 3、開啟 DevTools ( 使用 快捷鍵 Ctrl+Shift+I / F12 (Windows) 或 Cmd+Opt+I (Mac) )。
- 4、在 DevTools 中，點選 Main Menu 主選單，然後選擇 More tools> Remote devices，快捷方式在位址列中輸入
chrome://inspect/#devices。
- 5、在 DevTools 中，點選 Settings 標籤（如果正在顯示另一個標籤）。
- 6、確保已啟用 Discover USB devices。
- 7、使用一根 USB 電纜將 Android 裝置直接連線到您的開發計算機。 請勿使用任何中間 USB 集線器。如果這是您首次將您的 Android 裝置連線到此開發計算機，您的裝置將顯示在 Unknown 中，其下面具有文字 Pending Authorization。
- 8、如果您的裝置顯示為 Unknown，則在 Android 裝置上接受 Allow USB Debugging 許可權提示。 Unknown 被替換為您的 Android 裝置的型號名稱。 綠色圓圈和 Connected 文字表示您已大功告成，可以從開發計算機遠端除錯您的 Android 裝置。
注：如果您在發現流程中遇到任何問題，您可以通過在 Android 裝置上選擇 Settings > Developer Options > Revoke USB Debugging Authorizations 重啟該流程。
2 、從您的開發計算機除錯 Android 裝置上的內容。
- 1、如果您尚未在 Android 裝置上開啟 Chrome，則現在開啟它。
- 2、返回 DevTools，點選與裝置的型號名稱匹配的標籤。 在此頁面的頂部，您會看到 Android 裝置的型號名稱，後面緊跟著其序列號。 在型號名稱下面，您可以看到在裝置上執行的 Chrome 的版本，版本號在括號裡。每個開啟的 Chrome 標籤都會有自己的區域。您可以從此區域與該標籤互動。 如果有任何使用 WebView 的應用，您也會看到針對每個應用的區域。 下面的螢幕截圖沒有任何開啟的標籤或 WebViews。
- 3、在 New tab 旁輸入一個網址，然後點選 Open。此頁面將在 Android 裝置上的新標籤中開啟。
- 4、點選您剛剛開啟的網址旁的 Inspect。這將開啟一個新的 DevTools 例項。 您的 Android 裝置上執行的 Chrome 的版本決定在開發計算機上開啟的 DevTools 的版本。因此，如果您的 Android 裝置正在執行一個非常舊的 Chrome 版本，則 DevTools 例項看上去可能與您常用的例項有很大的差別。
3、其他更多操作
1、重新載入、聚焦或關閉一個標籤
點選 inspect 標籤可以檢視頁面DOM內容以及可以除錯頁面
2、檢查元素
轉到您的 DevTools 例項的 Elements 面板，將滑鼠懸停在一個元素上以在 Android 裝置的視口中突出顯示它。
您還可以在 Android 裝置螢幕上點按一個元素，以在 Elements 面板中選中它。 點選您的 DevTools 例項上的 Select Element Select
4、Android 裝置到開發計算機的抓屏
點按 Toggle Screencast ![Toggle Screencast][screencast]{:.devtools-inline} 以在您的 DevTools 例項中檢視 Android 裝置的內容。
您可以通過多種方式與抓屏互動：
- 將點選轉變為點按，在裝置上觸發適當的觸控事件。
- 將計算機上的按鍵傳送至裝置。
- 要模擬雙指張合手勢，請按住 Shift 拖動。
- 要滾動，請使用您的觸控板或滑鼠滾輪，或者使用您的滑鼠指標拋式滾動。
關於抓屏的一些注意事項：
- 抓屏僅顯示頁面內容。抓屏的透明部分表示裝置介面，如 Chrome 多功能框、Android 狀態列或 Android 鍵盤。
- 抓屏會對幀率產生負面影響。在測量滾動或動畫時停用抓屏，以更準確地瞭解頁面的效能。
- 如果您的 Android 裝置螢幕鎖定，您的抓屏內容將消失。 將您的 Android 裝置螢幕解鎖可自動恢復抓屏。
三、訪問本地伺服器
- 利用埠轉發，您可以在 Android 裝置上檢視開發計算機網路伺服器中的內容。
- 如果您的網路伺服器正在使用自定義域名，您可以將 Android 裝置設定為訪問位於具有自定義域名對映的網域中的內容。
設定埠轉發
埠轉發使您的 Android 裝置可以訪問在開發計算機網路伺服器上託管的內容。 埠轉發通過在對映到開發計算機上 TCP 埠的 Android 裝置上建立偵聽 TCP 埠的方式工作。埠之間的流量通過 Android 裝置與開發計算機之間的 USB 連線傳輸，所以連線並不取決於您的網路配置。
要啟用埠轉發，請執行以下操作：
- 在您的開發計算機與 Android 裝置之間設定遠端除錯。 完成後，您應在 Inspect Devices 對話方塊的左側選單中看到 Android 裝置，還應看到 Connected 狀態指示器。
- 在 DevTools 的 Inspect Devices 對話方塊中，啟用 Port forwarding。
- 點選 Add rule。
操作步驟
1. 在左側的 Device port 文字欄位中，輸入 Android 裝置上您想要從其訪問網站的 localhost 埠號。例如，如果您想要從 localhost:8000 訪問網站，則應輸入 8000。
2. 在右側的 Local address 文字欄位中，輸入開發計算機網路伺服器上執行的您的網站的 IP 地址或主機名，後面緊跟埠號。例如，如果您的網站在 localhost:8080上執行，則應輸入 localhost:8080。
3. 點選 Add。埠轉發已設定完畢。您可以在該裝置位於 Inspect Devices 對話方塊內的標籤上看到埠轉發的狀態指示器。
要檢視內容，請在您的 Android 裝置上開啟 Chrome，然後轉至您在 Device port 中指定的 localhost 埠。 例如，如果您在欄位中輸入了 8000，則應轉至 localhost:8000。
對映到自定義本地域名
利用自定義域名對映，您可以在 Android 裝置上檢視當前使用自定義域名的開發計算機上網路伺服器中的內容。
例如，假設您的網站使用僅在白名單網域 chrome.devtools 上執行的第三方 JavaScript 庫。 因此，您可以在開發計算機上的 hosts 檔案中建立條目，將此網域對映到 localhost（如 127.0.0.1 chrome.devtools）。設定自定義域名對映和埠轉發後，您將能夠在 Android 裝置上檢視網站，網址為 chrome.devtools。
為代理伺服器設定埠轉發
要對映自定義域名，您必須在開發計算機上執行代理伺服器。 代理伺服器示例包括 Charles、Squid 和 Fiddler。
要為代理設定埠轉發，請執行以下操作：
- 執行代理伺服器並記下其正在使用的埠。注：代理伺服器和您的網路伺服器必須在不同的埠上執行。
- 為您的 Android 裝置設定埠轉發。在 local address 欄位中，輸入 localhost:，後面緊跟執行代理伺服器的埠。例如，如果代理伺服器在埠 8000 上執行，您應輸入 localhost:8000。 在 device port 欄位中，輸入您想要使 Android 裝置在其上面偵聽的埠號，如 3333。
在您的裝置上配置代理設定
接下來，您需要配置 Android 裝置，以便與代理伺服器進行通訊。
- 在您的 Android 裝置上，轉至 Settings > Wi-Fi。
- 長按您當前連線到的網路的名稱。 注：代理設定的適用範圍為單個網路。
- 點按 Modify network。
- 點按 Advanced options。將會顯示代理設定。
- 點按 Proxy 選單，然後選擇 Manual。
- 在 Proxy hostname 欄位中，輸入 localhost。
- 在 Proxy port 欄位中，輸入您在前一部分中為 device port 輸入的埠號。
- 點按 Save。
進行這些設定後，您的裝置會將所有請求轉發給開發計算機上的代理。 代理會代表您的裝置發出請求，這樣就可以正確解析對自定義本地域名的請求。
現在，您可以在 Android 裝置上訪問自定義域名，就像您在開發計算機上訪問一樣。
如果您的網路伺服器正在非標準埠上執行，從 Android 裝置請求內容時請務必指定埠。例如，如果網路伺服器正在埠 7331 上使用自定義域名 chrome.devtools，您從 Android 裝置上檢視網站時應使用網址 chrome.devtools:7331。
提示：要恢復正常瀏覽，與開發計算機斷開連線後請務必在您的 Android 裝置上還原代理設定。
三、原生Android應用中WebView設定
目標：
Android應用WebView啟用 WebView 除錯
條件：
- 在 Android 4.4 (KitKat) 或更高版本中，使用 DevTools 可以在原生 Android 應用中除錯 WebView 內容。
- 在您的原生 Android 應用中啟用 WebView 除錯；在 Chrome DevTools 中除錯 WebView。
- 通過 chrome://inspect 訪問已啟用除錯的 WebView 列表。
- 除錯 WebView 與通過遠端除錯除錯網頁相同。
配置 WebViews 進行除錯
必須從您的應用中啟用 WebView 除錯。要啟用 WebView 除錯，請在 WebView 類上呼叫靜態方法 setWebContentsDebuggingEnabled。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}此設定適用於應用的所有 WebView。
提示：WebView 除錯不會受應用清單中 debuggable 標誌的狀態的影響。如果您希望僅在 debuggable 為 true 時啟用 WebView 除錯，請在執行時測試標誌。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
{ WebView.setWebContentsDebuggingEnabled(true); }
}在 DevTools 中開啟 WebView
chrome://inspect 頁面將顯示您的裝置上已啟用除錯的 WebView 列表。
要開始除錯，請點選您想要除錯的 WebView 下方的 inspect。像使用遠端瀏覽器標籤一樣使用 DevTools。
與 WebView 一起列示的灰色圖形表示 WebView 的大小和相對於裝置螢幕的位置。如果您的 WebView 已設定標題，標題也會一起顯示。
故障排除
在 chrome://inspect page 上無法看到您的 WebView？
- 驗證已為您的應用啟用 WebView 除錯。
- 在裝置上，開啟應用以及您想要除錯的 WebView。然後，重新整理 chrome://inspect 頁面。
四、X5核心除錯
4.1 x5核心介紹
X5核心是騰訊QQ瀏覽器團隊基於谷歌的 Blink核心專案開發的瀏覽服務，騰訊命名為 騰訊瀏覽服務（TBS，Tencent Browsing Service），基本上騰訊系的應用都是基於此開發的，特點快速、高效、安全、相容性好。官網地址：https://x5.tencent.com/tbs/index.html
4.2 x5核心除錯
開啟除錯模式 http://debugx5.qq.com/ ，使用騰訊系應用（微信、手機qq、QQ瀏覽器、應用寶等）掃一掃下面二維碼開啟除錯模式。
1、在 資訊 下選中 TBS settings 開啟開啟TBS核心Inspector除錯功能
2、手機連結USB線，並開啟除錯模式
3、在chrome 中輸入 chrome://inspect/#devices
4.3 非X5核心除錯
4.4微信除錯
微信瀏覽器全面升級至X5 Blink核心，支援遠端除錯方法同上
微信安卓版客戶端 webview 即日起100%放量，全面升級至 X5 Blink 核心，將具有更好的 HTML5/CSS3 支援，更強大的渲染能力。
為此，微信 web 開發者工具同步推出0.5.0版本，繼支援測試號、企業號、第三方平臺開發者的使用之後，新增支援實時對映手機螢幕到 PC 或者 Mac 上，可以遠端除錯 X5 Blink 核心上的網頁。
