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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM