19939905379

网站建设 APP开发 小程序

知识

随着安卓安装在超过25亿台设备上,web工程师无法忽略针对安卓网页的优化。安卓用户选择的浏览器很可能是GoogleChrome,因为它通常是预装的,并且由于在计算机上使用Chrome,因此许多用

您当前位置>主页 > 知识 > APP开发 >

如何用Chrome开发者工具远程调试安卓上的网页

发表时间:2020-06-18 18:38

文章来源:admin

随着安卓安装在超过25亿台设备上,web工程师无法忽略针对安卓网页的优化。 安卓用户选择的浏览器很可能是 Google Chrome,因为它通常是预装的,并且由于在计算机上使用 Chrome,因此许多用户已经熟悉了它。 随着渐进式 Web 应用程序(PWA)的兴起,用户不仅期望高质量的应用程序作为原生应用程序,而且希望在其浏览器中使用。

虽然你可以调整浏览器的大小并使用浏览器开发工具,但以此方式不能模拟移动端真实的体验。例如,我遇到了一个问题,该问题导致无法在移动设备上单击某个元素,但在桌面浏览器上没问题。 台式机和移动设备上的相同浏览器可能有所不同,因为某些功能取决于它们所运行的平台。

在安卓设备上的开发者选项里开启 USB 调试用一根USB线缆连接手机和电脑。安卓手机可能会让你确认是否信任电脑。在电脑的 Chrome 浏览器上打开 chrome://inspect/#devices确认选中了 Discover USB devices 复选框如果你的应用是在本地运行,需要增加端口转发。否则安卓手机不能访问你的应用。在 Remote Target 可以找到已经连接的安卓设备,然后选择相应的页面点击 inspect 进行调试。可能需要科学上网才能看到调试弹窗。

在上面的截图中,你可以查看DOM元素,修改样式,调试JavaScript代码,模拟网络情况等等。

你可以在电脑和安卓设备上和网站互动借助 Chrome 开发者工具可以查看和调试网页对于网站和 web 应用来说性能不错。代码的改动会自动生效(通过刷新网页或者使用了热更新)。与在 Chrome 模拟设备相比,在真机上调试更加实用

由于通过流媒体传输性能可能没那么好由于这是 Chrome 的一个功能,不能用这种方式调试其他浏览器,如火狐等

如你所见,我们可以使用 Chrome 远程调试功能轻松地在安卓设备上测试网站和 web 应用。这使我们能够在将网站交付给最终用户之前在移动设备上测试它们。

相关案例查看更多