除錯web頁面難

接觸過app自動化的同學都比較清楚，如果想要對web應用或者Hybrid應用進行除錯時（獲取頁面元素資訊等等），必定繞不開的就是chrome瀏覽器的inspect功能了：在chrome瀏覽器URL中輸入chrome://inspect即可對移動裝置中的web頁面進行除錯。方便是方便，但是碰到的坑數不勝數：

• 點選inspect發現載入的是空白頁面
• 點選inspect出來的是http 404

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

• 科學上網，但是免費的工具不太穩定，穩定的又要收費--!
• 下載離線開發者工具除錯包，版本多，找到一個對應版本的好難。

uc-devtools工具

最近筆者閒逛論壇發現一款比較不錯的工具：UC開發者工具，安利給大家
這是它的官網：https://dev.ucweb.com/
以及工具的簡單介紹：

開發者版本 (Developer Edition) 支援 DevTools Protocol，它允許開發者使用任何相容該協議的客戶端（如 Chrome 開發者工具）進行遠端除錯。最新版基於 Chromium 57 構建它允許開發者不再需要依賴其他工具進行除錯

工具安裝及使用效果

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

• 開啟手機/模擬器，保證能夠通過adb devices檢測到裝置（檢測不到的同學可以看下我之前寫的adb連線問題整理這篇blog）
• 開啟任意手機端瀏覽器訪問網頁或者H5頁面，注意：如果是app內嵌web頁面，需要開啟app的webview debug模式
• 進行到第二步如果發現顯示不出來，可以選擇設定->本地Devtools Inspector UI資源

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

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

小程式支援？也沒問題！

注意事項：

• 微信內H5頁面除錯需要將除錯模式開啟，開啟方式參考我之前的微信小程式自動化這篇blog
• 微信小程式除錯頁面時，需要從搜一搜->搜尋小程式入口進入