运用Chrome浏览器ADB插件获取页面元素

适用于:基于浏览器的Web应用(hybird app:混合模式移动应用)
Win 10下Chrome版本:59.0.3071.86(正式版本) (64 位)
这里写图片描述
进入 Chrome网上应用店
https://chrome.google.com/webstore/category/extensions
这里写图片描述
添加至CHROME,将会在Chrome浏览器工具条上显示对应的图标
这里写图片描述

下面以真机Nexus 7平板、打开预装的google浏览器应用程序首页为例:(真机用数据线连接上电脑并打开开发者选项允许USB调试或adb调试)
这里写图片描述
打开win下google浏览器ADB插件-View Inspection Targets
这里写图片描述
即可看到当前已连接的设备信息、web应用的页面信息
这里写图片描述
单击inspect,将展示界面元素信息
这时,你可能会出现如下空白的问题
这里写图片描述
解决方案:1、翻墙;2、修改host
打开C:\Windows\System32\drivers\etc\hosts文件,添加:
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com
这里写图片描述
这里写图片描述
但在保存时可能会提示如下,导致无法修改hosts成功
这里写图片描述
解决方法是将hosts文件复制一份到桌面进行修改后,再复制回它原来的文件夹下,此时会提示是否替换以及管理员才有此权限,是否继续,选择【继续】即可。

重新点击 inspect按钮,就能成功显示界面元素了
这里写图片描述
当你鼠标放置到上面的代码上,随着你鼠标移动,,可看到真机上的google浏览器,相应地会选择一个“显示块”。当你点击有关内容时,inspect上也会相应地刷新。
参考文章:
http://wiki.jikexueyuan.com/project/chrome-devtools/remote-debugging-on-android.html

猜你喜欢

转载自blog.csdn.net/weixin_38256474/article/details/72901829
今日推荐