01 除錯web頁面難

接觸過app自動化的都比較清楚，如果想要對web應用或者Hybrid應用進行除錯時（獲取頁面元素資訊等等），必定繞不開的就是chrome瀏覽器的inspect功能了： 

在chrome瀏覽器URL中輸入chrome://inspect即可對移動裝置中的web頁面進行除錯。方便是方便，但是碰到的坑數不勝數： 

★  點選inspect發現載入的是空白頁面 

★  點選inspect出來的是http 404

相信大家碰到這種問題第一時間就是百度去找到解決方案：chrome使用inspect需要下載一些額外外掛。但是這些外掛都是在牆外（大家都懂得）：

★  科學上網，但是免費的工具不太穩定，穩定的又要收費！

★  下載離線開發者工具除錯包，版本多，找到一個對應版本的好難。

02 uc-devtools工具

最近筆者閒逛論壇發現一款比較不錯的工具：UC開發者工具。安利給大家 

這是它的官網：https://dev.ucweb.com/

以及工具的簡單介紹：

開發者版本 (Developer Edition) 支援 DevTools Protocol，它允許開發者使用任何相容該協議的客戶端（如 Chrome 開發者工具）進行遠端除錯。

最新版基於 Chromium 57 構建它允許開發者不再需要依賴其他工具進行除錯。

03 工具安裝及使用效果

安裝很簡單：直接點選下載安裝即可，由於是基於Chromium，所以原理其實和chrome的inspect類似，只不過不需要科學上網了！

使用步驟：

★  開啟手機/模擬器，保證能夠通過adb devices檢測到裝置（檢測不到的同學可以看下我之前寫的adb連線問題整理這篇blog）

★  開啟任意手機端瀏覽器訪問網頁或者H5頁面。 

注意：如果是app內嵌web頁面，需要開啟app的webview debug模式

★ 進行到第二步如果發現顯示不出來，可以選擇設定->本地Devtools Inspector UI資源

點選inspect之後，嗯，效果可以的，這是瀏覽器中訪問的百度首頁：

微信公眾號支援？沒問題：

小程式支援？也沒問題！

注意事項： 

★  微信內H5頁面除錯需要將除錯模式開啟

★  微信小程式除錯頁面時，需要從搜一搜->搜尋小程式入口進入