钉钉开发笔记(六)使用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设备屏幕以自动恢复屏幕录像。