使用Chrome DevTools調(diào)試安卓設(shè)備WebView頁(yè)面

為什么

給前端工程師調(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è)面

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,324評(píng)論 25贊 708
  • 年紀(jì)大了，才發(fā)現(xiàn)這些道理都是真的 2018-01-24 悠悠魂2 來(lái)源：儒風(fēng)大家 當(dāng)年多少荒唐事，如今都成下酒菜。...
    套馬地漢紙閱讀 211評(píng)論 0贊 1
  • 停止呼喊吧 在這洶涌的海面 聲音在狂風(fēng)中 散落 扁舟在波浪中 穿梭 頭頂是深邃的藍(lán)色 卻不是天空 大海在痛苦 呻吟...
    遷于喬木閱讀 352評(píng)論 0贊 0
  • 今天是我來(lái)到簡(jiǎn)書(shū)的第一天，一天的忙碌，只有晚上有些時(shí)間來(lái)寫(xiě)寫(xiě)我知道的真實(shí)的故事?？赡苊總€(gè)人對(duì)于外婆都有不同的感覺(jué)，...
    關(guān)心不亂閱讀 626評(píng)論 5贊 6
  • 人生就是一場(chǎng)旅途，在旅途中我們會(huì)遇到各種的事情，不管怎樣，我們都會(huì)老去，可是如果我們沒(méi)有精彩的奮斗，就會(huì)感覺(jué)這場(chǎng)旅...
    一顆有趣的豆閱讀 245評(píng)論 2贊 1

友情鏈接更多精彩內(nèi)容