美文网首页
Chrome DevTools调试移动设备Brower Page

Chrome DevTools调试移动设备Brower Page

作者: 小蜗牛的成长 | 来源:发表于2017-06-26 19:05 被阅读0次

最近涉及到webview页面的自动化,特意对盲区知识点做一个总结,方便以后翻阅。实际情况:appium自动化框架中,针对webview页面,需要切换至相应的context下实现对UI进行点击等操作,但用uiautomatorviewer.bat无法定位到元素

   参考网上的大神们的博客,主要使用Chrome DevTools调试webview,可总结出如下:

  • 介绍
  • 调试站点的页面
  • 调试安卓原生App中的WebView
  • 实时将安卓设备的屏幕图像同步显示到开发机器。
  • 通过端口转发(port forwarding)与虚拟主机映射(virtual host mapping)实现安卓移动设备与开发服务器进行交互调试。
  • 使用
  • chrome浏览器地址栏输入chrome://inspectabout:inspect 或在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备
  • 打开DevTools后,确保打钩选中Discover USB devices,浏览app的webview,可以看到设备浏览的页面,如图,inspect查看页面或者直接拷贝地址在浏览器打开
image.png
  • 完成以上步骤后,接下来的操作与调试网页一致,按f12进入开发模式,查看元素属性,方面UI操作
    参考博客

相关文章

  • Chrome DevTools调试移动设备Brower Page

    最近涉及到webview页面的自动化,特意对盲区知识点做一个总结,方便以后翻阅。实际情况:appium自动化框架中...

  • 推荐一款H5调试利器-Eruda

    Eruda 是一个专为前端移动端、移动端设计的调试面板,类似Chrome DevTools 的迷你版。 https...

  • 移动端布局

    一、移动端调试方法1、Chrome DevTools(谷歌浏览器)的模拟手机调试。2、搭建本地web服务器,手机和...

  • Vue.js is detected on this page.

    chrome浏览器安装插件vue Devtools后,允许vue页面没有出现vue的调试界面,把鼠标移动到vue图...

  • vue-devtools

    chrome调试插件vue-devtools安装步骤: 1.npm install vue-devtools 2....

  • Chrome DevTools 调试

    将调试阶段分为三个 评估并快速修复 还原和重现 定位根源并修复 评估并快速修复 有经验的 CSS 开发者可能都知道...

  • WebView调试

    1.在APP中启用 WebView 调试,开启调试后,Chrome DevTools才能对WebView进行远程调...

  • Vue 调试 -- vue-devtools 使用

    前言 vue-devtools 是一款 chrome 插件,用于 vue 的调试工作 安装 chrome 商店(需...

  • Laya 调试工具——Weinre

    开发游戏避免不了调试,如果游戏的运行环境是移动设备的话,安卓可以使用Chrome inspect调试,IOS如果没...

  • Vue生态系统-工具

    Devtools vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高...

网友评论

      本文标题:Chrome DevTools调试移动设备Brower Page

      本文链接:https://www.haomeiwen.com/subject/kdvjcxtx.html