混合開發使用Chrome Inspect調試WebView預覽手機界面和定位元素

使用Chrome Inspect調試混合應用可以幫助我們排查問題。例如定位元素，快速修改CSS樣式並實時查看效果。其實微信開發也是一種混合開發模式，微信可以看做一個原生的Android App搭配了一個JS運行環境（WebView），然後大家就可以愉快地使用Web前端技術（Html/Css/Js）開發微信網頁、小程式了。

Google提供的調試Android上WebView的步驟：

1. 開啟手機上的USB調試功能
2. 打開Chrome瀏覽器，地址欄輸入：Chrome://inspect，回車
3. Chrome會自動檢測手機上打開的App，併列出可調試的WebView頁面
4. 點擊Inspect。出現空白頁面的話，查看此處解決方法。

預覽方法：

chrome版本號30左右的沒有預覽界面，其他版本的見下圖

點擊箭頭或放大鏡圖標，然後在界面上點一下想要定位的元素即可！

確實沒法預覽？

先試試這裡的方法

還可以這樣：關閉預覽，手機經過Html元素時，手機上相應的元素會高亮顯示，定位元素也很快。