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

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

下面以真机Nexus 7平板、打开预装的google浏览器应用程序首页为例:(真机用数据线连接上电脑并打开开发者选项允许USB调试或adb调试)
运用Chrome浏览器ADB插件获取页面元素_第3张图片
打开win下google浏览器ADB插件-View Inspection Targets
运用Chrome浏览器ADB插件获取页面元素_第4张图片
即可看到当前已连接的设备信息、web应用的页面信息
运用Chrome浏览器ADB插件获取页面元素_第5张图片
单击inspect,将展示界面元素信息
这时,你可能会出现如下空白的问题
运用Chrome浏览器ADB插件获取页面元素_第6张图片
解决方案: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
运用Chrome浏览器ADB插件获取页面元素_第7张图片
运用Chrome浏览器ADB插件获取页面元素_第8张图片
但在保存时可能会提示如下,导致无法修改hosts成功
运用Chrome浏览器ADB插件获取页面元素_第9张图片
解决方法是将hosts文件复制一份到桌面进行修改后,再复制回它原来的文件夹下,此时会提示是否替换以及管理员才有此权限,是否继续,选择【继续】即可。

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

你可能感兴趣的:(Android,chrome,插件,web应用,获取页面元素)