為什么
給前端工程師調(diào)試提供便捷,可以直接通過(guò)連接Android手機(jī)進(jìn)行WebView的網(wǎng)頁(yè)調(diào)試。
使用工具
- Opera Mobile 可以借助其推出的跨設(shè)備跨平臺(tái)桌面開(kāi)發(fā)者工具Opera Dragonfly 實(shí)現(xiàn)遠(yuǎn)程調(diào)試;
- iOS Safari 可以開(kāi)啟Web檢查器在 Mac OS X系統(tǒng)中實(shí)現(xiàn)遠(yuǎn)程調(diào)試
- Android 4+已上系統(tǒng)的 Chrome for Android可以 配合 ADB(Android Debug Bridge)實(shí)現(xiàn)桌面遠(yuǎn)程調(diào)試
- 桌面版Chrome 32+已經(jīng)支持免安裝ADB即可實(shí)現(xiàn)遠(yuǎn)程調(diào)試移動(dòng)設(shè)備頁(yè)面WebView
本篇主要說(shuō)一下Chrome RemoteDebugging 的方法,即上面所說(shuō)的第四種方式,不需要安裝ADB插件。
上圖展示

image.png
實(shí)際操作
一、手機(jī)端打開(kāi)USB調(diào)試并連接PC,點(diǎn)擊確定進(jìn)行調(diào)試

image.png
二、打開(kāi)chrome瀏覽器,輸入框下輸入chrome://inspect/#devices,看到設(shè)備
注:打開(kāi)后DevTools后,確保打鉤選中Discover USB devices

image.png
三、找到需要調(diào)試的目標(biāo)頁(yè)面,點(diǎn)擊inspect即可打開(kāi)DevTools,點(diǎn)擊reload可重新加載當(dāng)前的調(diào)試頁(yè)面