混合開發使用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元素時，手機上相應的元素會高亮顯示，定位元素也很快。