移動端 h5調試技巧


一 安卓

一 chrome

1.安卓手機安裝chrome瀏覽器,手機打開開發者模式,用usb線鏈接電腦,並且允許調試。

2.電腦chrome地址欄輸入 chrome://inspect 進入后點擊 inspect 即進入調試模式(注意:第一次調試必須翻牆)。

3.調試和電腦端基本沒有差異。電腦端修改樣式等,手機立馬變化。

二 webview

1.手機必須安卓4.4+

2.安卓端必須打開允許調試的權限

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true);}

3.其余調試同一(注意:第一次調試必須翻牆

三 vconsole(任何瀏覽器 webview js調試)

1.針對安卓4.2機型。

2.用npm安裝vconsole  

npm i vconsole --save

然后在需要調試的頁面引入vconsole(用相對路徑)

<script src="./js/vconsole.min.js"></script>

3.此時代碼中用console.log()  vconsole 就會在手機頁面上加入一個div 可以看打印的數據及發送的ajax請求。

 

四 weinre(任何瀏覽器 css調試)

1.保證手機和pc(windwos在一個無線段)。

2.下載fiddler 手機設置代理到pc的ip(手機Wi-Fi設置高級選項中設置代理為手動 輸入pc ip及固定端口號8888),設置完手機可上網即設置成功,此時fideler可以抓取手機的包。

3.安裝 weinre sudo cnpm i weinre -g

4.執行 weinre -boundHost 192.168.1.103(pc無線網ip),復制如下網址到pc瀏覽器地址欄

5.將如下代碼加入到需要調試的頁面中。

6.然后手機訪問需要調試的頁面,然后pc上點擊如下

6.接着出現如下頁面

7.點擊elements后就可以愉快的調試了。

 

二 ios

一 safari瀏覽器

1.打開手機Safari瀏覽器 設置(setting)-safari-高級(advance)-打開web檢查器

2.mac電腦 Safari → 偏好設置 → 高級 → 在菜單欄中顯示“開發”菜單 

3.然后打開mac safari 開發 如圖點擊對應的ios設備就可以調試了


免責聲明!

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



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