一 安卓
一 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設備就可以調試了