• 钉钉开发笔记(六)使用Google浏览器做真机页面调试


    注:

    参考文献:https://developers.google.com/web/

    部分字段为翻译文献,水平有限,如有错误敬请指正


    步骤1:

    从Windows,Mac或Linux计算机远程调试Android设备上的实时内容。本教程将教您如何:

    设置您的Android设备进行远程调试,并从开发机器中发现它。
    从您的开发机器检查和调试Android设备上的实时内容。
    将来自Android设备的内容屏幕截图到开发机器上的DevTools实例。

    要求

    Chrome 32或更高版本安装在您的开发机器上。
    USB驱动程序安装在您的开发机器上,如果您使用的是Windows。确保设备管理器报告正确的USB驱动程序。
    用于将Android设备连接到开发机的USB电缆。
    Android 4.0或更高版本。
    Chrome Android版已安装在您的Android设备上。
    步骤1:探索您的Android装置

    • 在Android设备上,选择设置 > 开发者选项 > 启用USB调试。默认情况下,在Android 4.2及更高版本中隐藏开发者选项。请参阅启用设备上开发人员选项 以了解如何启用它。
    • 在开发机器上,打开Chrome。您应该使用自己的某个Google帐户登录Chrome。远程调试在隐身模式或访客模式下不工作 。
    • 打开DevTools。
    • 在DevTools中,单击主菜单, 主菜单 然后选择更多工具 > 远程设备。

    • 在DevTools中,如果显示另一个选项卡,请单击“ 设置”选项卡。
    • 确保启用Discover USB设备。
    • 使用USB电缆将Android设备直接连接到开发机器。不要使用任何中间USB集线器。如果这是您第一次将Android设备连接到此开发机器,您的设备会显示在“ 未知”下,其下方显示“ 待批准 ”文字。

    • 如果您的设备显示为未知在Android设备上接受允许USB调试权限提示。未知将替换为您的Android设备的型号名称。绿色圆圈和已连接文本表示您已设置为从开发机器远程调试Android设备。

    注意:如果您在发现过程中遇到任何问题,可以通过在Android设备上选择设置 > 开发人员选项 > 撤消USB调试授权来重新启动它。

    步骤2:从开发机器调试Android设备上的内容

    • 如果您尚未在Android设备上打开Chrome,请立即打开。
    • 返回DevTools,单击与设备型号名称匹配的选项卡。在此页面顶部,您会看到Android设备的型号名称,后面是其序列号。在下面,您可以看到在设备上运行的Chrome版本,版本号在括号中。每个打开的Chrome标签都有自己的部分。您可以从此部分与该选项卡进行交互。如果有任何使用WebView的应用程序,您还会看到每个应用程序的一个部分。下面的截图没有打开任何选项卡或WebViews。

    • 在“ 新建”选项卡旁边,输入URL,然后单击“ 打开”。该页面会在Android设备上的新标签页上打开。
    • 点击您刚刚打开的网址旁边的“ 检查”。将打开一个新的DevTools实例。在Android设备上运行的Chrome版本决定在开发机器上打开的DevTools的版本。因此,如果您的Android设备运行的是一个非常老的Chrome版本,DevTools实例可能看起来与以前不同。

    更多操作:重新加载,聚焦或关闭标签页

    • 单击要重新加载,聚焦或关闭的选项卡旁边的更多选项 更多的选择。

    检查元素

    • 转到DevTools实例的“ 元素”面板,将鼠标悬停在某个元素上以在Android设备的视口中将其突出显示。
    • 您也可以点按Android设备屏幕上的元素,然后在“ 元素”面板中将其选中 。单击您的DevTools实例上的选择元素 选择元素,然后点击Android设备屏幕上的元素。请注意,选择元素 在第一次触摸后被禁用,因此您需要在每次要使用此功能时重新启用它。

    PS:从Android设备到开发机的屏幕录像

    • 单击切换屏幕录像 切换屏幕录像 可在DevTools实例中查看Android设备的内容。
    • 您可以通过多种方式与screencast进行交互:
    • 点击会翻译成触碰,在设备上触发正确的触摸事件。
    • 计算机上的按键被发送到设备。
    • 要模拟捏合手势,请Shift在拖动时按住。
    • 要滚动,请使用触控板或鼠标滚轮,或使用鼠标指针滑动。
    • 关于屏幕录像的一些注意事项:
    • 屏幕录像仅显示页面内容。截屏的透明部分表示设备界面,例如Chrome浏览器多功能框,Android状态栏或Android键盘。
    • 屏幕录像对帧速率有负面影响。在测量卷轴或动画时停用屏幕播放功能,以便更准确地了解您的网页的效果。
    • 如果您的Android设备屏幕锁定,您的screencast的内容消失。解锁Android设备屏幕以自动恢复屏幕录像。

     

  • 相关阅读:
    休息一会。。。。。。
    iPhone开发之webview 拖动和显示本地图片的几组代码
    Android 防止手机休眠
    Android数据存储SQLite 事务操作
    解决png图片在IE6下的透明问题
    教你如何在博客园放“可运行"代码
    弹出层原理
    右键集成JS文件压缩 YUI Compressor
    原来window.event快达到全浏览器支持了
    QWrap入门指南
  • 原文地址:https://www.cnblogs.com/tig666666/p/6395053.html
Copyright © 2020-2023  润新知