移動端H5測試調試利器 chrome://inspect/#devices


使用 chrome://inspect/#devices,可以使安卓手機里的WebView也能和chrome一樣審查元素,調試和測試移動端H5頁面.

 

我使用的是三星S6 (該功能支持安卓系統4.4及以上機型),電腦是win 7 系統,以下幾步就可以輕松使用瀏覽器內置的功能調試移動端網頁了:

1. 確保手機開啟調試模式連接電腦,手機設置里面,開發者模式、USB調試均處於開啟狀態;

2. 手機上打開一個網頁,只要是webview形式的網頁應該都是可以的;

3.電腦上安裝連接手機的驅動,cmd命令輸入:adb devices  如下圖已顯示設備信息,即代表手機已成功連接電腦;

4.電腦chrome瀏覽器地址欄輸入:chrome://inspect/#devices ,會看到如下圖的情況(上面會看到你所連接的設備的名稱和信息,下面就是當前設備上可以用於在電腦上調試的頁面的信息,地址、標題、網頁大小。。。,如果沒有顯示設備信息,則表示沒有連接好,可以插拔手機或關閉調試模式重開一下);

5.找到你准備調試的那個,並且確保手機上的那個頁面也是處於激活狀態的,然后點擊藍色的 inspect 鏈接,會彈出一個新的窗口,如下圖;

注:若出現按inspect后,發現h5頁面出不來,一直顯示空白。……需要翻牆服務(免費的推薦藍燈)

 偶十月份發現安裝的藍燈突然用不了了,重新安裝了最新版本的,又可繼續用了,可以去這查看下載:https://github.com/getlantern/lantern

6.熟悉的界面出現了,接下來你應該知道怎么用了!

檢查元素↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

 

 控制台↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


查看網絡情況↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

機型適配調試↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 


免責聲明!

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



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