chrome inspect 远程调测:Chrome on Android之一 普通调试

本文PC环境:

Chrome: 版本 33.0.1750.22 dev

MAC OS:OS X 10.9.1

特别注意:Chrome DevToolsl使用时会联接到appspot.com,而此网址被墙,以下教程需要先在本机使用翻--墙代理,否则在chrome://inspect中无法点击网页的inspect链接打开Deleloper Tools。

Mac上使用goagent教程:http://maolihui.com/goagent-mac-detail.html

其他操作系统如何使用goagent请自行google

  • 对于web页面的:Android 4.0+ ,并在Android设备上安装chrome浏览器。
  • 对于Android Apps:Android 4.4+ 和调试做需要的网页视图配置
  • USB线用于接入你的Android设备
  • 开发设备上需安装Chrome32 以后的版本
  • 在中国你还需要FQ

不使用代理的方式(这个IP没被封),在hosts配置:203.208.46.178 chrome-devtools-frontend.appspot.com

前置条件:

1、PC(MAC\WINDOWS\LINUX)上安装Chrome 31或以上版本。

2、如果是Windows,需先安装USB设备驱动程序,用来连接安卓移动手机或PAD,对于MAC、LINUX则已安装好。(Windows上可安装碗豆夹或手机助手,用USB连接线接上手机后,会自动检测并安装相应的USB设备驱动程序)

3、成功进行翻--墙,能在Chrome打开appspot.com即可。

远程调试概述

网页内容在移动设备上的用户体验与PC的相比有很大的区别。Google Chrome DevTools 有一整套已经熟悉的工具允许用来 inspect, debug, 以及 analyze 在移动设备上的网页,这意味着可以使用PC上的Chrome DevTools来调试一个移动设备上打开的页面。

只要移动设备通过 USB 连接到PC,就可以开始调试,可以查看甚至修改HTML,script和CSS,直到得到一个在所有移动设备上表现完美的没有 bug 的页面。

在开始调试之前,需要做以下准备:

o一台安装了Chrome 31或更新版本的 Android 手机或平板。(Beta版本V32需要ADB-free connectivity)(实测30版本也是可用的,再老版本没试过)

o一条 USB 连接线(Windows用户还需要先安装相应的USB设备驱动程序)。

oPC上已安装31或更新版本的Chrome,并且翻--墙成功能正常访问www.appspot.com。

1. 启用移动设备上的USB调试功能

为了能通过 USB 进行调试,需要设置Android移动设备为开发环境。

启用USB调试:

o在大多数运行Android 3.2或更早版本的设备中,可以找到以下选项“设置” > “应用” > “开发环境”。不过Chrome好像只能在4.0以上android中才能使用,所以这个不用管了。

o在Android 4.0和4.1版本中,是“设置” > “开发者选项”。

o在Android 4.2及以后,开发者选项默认被隐藏。前往“设置” > “关于手机”,根据提示点击版本号7次,直到开启“开发者选项”。返回上一屏查找“开发者选项”。

2.1 通过USB直连移动设备

Chrome M32及以上(指PC):

对于这些Chrome版本,DevTools对连接的设备支持 native USB debugging。不再需要通过配置ADB或ADB plugin查看移动设备上的Chrome和WebView连接实例(老版本的方式)。

在Chrome中访问 about:inspect ,并且检查“Discover USB Devices”已勾选。

注:此说明适用于Mac以及ChromeOS台式机, Windows用户还需要安装设备驱动程序,以使设备之间进行通信。

注:PC Chrome和移动设备之间的这种USB直接方式可能会中断一个”ADB连接”,你可能会试图重建立连接。如果因为其他原因需要使用`ADB`命令,在执行`adb devices`之前,取消选中的“Discover USB Devices”复选框,拔出设备,并插回。

Chrome M31和更早:(指PC)

旧版本的Chrome仍然需要ADB Chrome扩展,以便远程调试设备。(不推荐使用,不在本文介绍范围)

2.2、连接到移动设备

用USB连接线将移动设备连接到PC。

当移动设备连接到PC上,可能会在移动设备上看到在PC的设备请求权限USB调试警报。为了避免每次调试时都看到此警示,检查总是允许从这台计算机,然后单击确定。

在移动设备上,启动Chrome。打开“设置” > “高级” > “开发工具”,确认启动USB网页调试,如图所示(高版本不用设置,也没此设置项):

现在PC打开Chrome,“Chrome菜单>工具>检查设备”,看到所有连接的设备,界面如下:

如果没有此菜单是因为Chrome版本原因,也可以在PC上Chrome地址栏输入 about:inspect 进入。


 此页面会显示每个连接的设备及其选项卡。可以同时连接多个设备,以及在不同设备中打开不同版本的Chrome,可调试WebViews也是出现在页面下方。

查找感兴趣的标签,然后单击inspect链接,就可以打开DevTools。在此界面也可以重新载入页面,页面放置在最前面,或者关闭。最后,可以通过一个文本输入框在设备上打开新链接。

故障排除:

在设备上检查开发人员选项→USB调试被勾选。

如果希望使用native USB debugging功能,检查使用的是Chrome为32或更高版本。

如果已打开USB调试,但 about:inspect 没有显示所期望的设备,请检查 Discover USB devices是否被勾选。如果有勾选,请拔出设备,并尝试撤消USB authorizations的开发人员选项,并重试。

调试应用:

例如,查看所选中页面中的元素,在移动设备上的Chrome中这个元素对应的页面结构会立即高亮显示。

同样,在DevTools的控制台中编写脚本或者执行命令,都会影响移动设备中检查的页面。也可以使用所有其他面板,例如Timeline和Profiles。

注意:

o你可能会注意到在远程调试过程中你可访问与你的PC上的版本不同的DevTools。这是因为工具会同步Android设备上使用的Chrome版本。

o因为我们通过USB连接PC,所以你可以让你的设备处于一个真实的网络中,并且在Network面板中查看真实网络条件下的网络瀑布流。

o移动设备上的硬件运行你的网页通常会比PC更慢,因此使用Timeline面板来分析如何优化渲染和CPU来达到最佳效果。

o如果在PC上运行一个web服务器,并且网络限制阻止你的移动设备向这台服务器发送请求,请参看reverse port forwarding。

oChrome浏览器在远程调试时会阻止移动设备屏幕进入休眠状态。虽然有用,但会使设备安全性降低。

Screencast:

Screencast可以把移动设备的屏幕映射体验到PC。这可以让你不用来回在移动设备和PC DevTools之间切换。目前, Chrome for Android Beta版(M32)支持此功能。

点击PC DevTools工具栏上图标打开screencast面板,在PC上显示移动设备的屏幕。当浏览,点击,滚动,screencast面板将显示移动设备上的实时视图。

当在使用screencast功能时,可以控制移动设备上chrome的前进和后退按钮,重新载入,并可直接更改URL并载入。

与screencast互动:

可以通过多种方式与移动设备的screencast互动。

PC键盘上的按键动作将被发送到移动设备

点击将被发送到移动设备作为适当的触摸事件。

滚动鼠标滚轮,触控板。

选择工具栏上“放大镜”或按Command+ Shift+ C可检查元素

注:截屏功能会反复捕捉设备,以便实时取得移动设备的截图,但会有性能开销。如果你正在测试性能敏感的情况,可以禁止截屏。

时间: 2024-10-08 10:44:38

chrome inspect 远程调测:Chrome on Android之一 普通调试的相关文章

chrome://inspect 移动前端调试方案(Android + Chrome 实现远程调试)

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

Android手机上chrome进行远程调试的步骤

1 手机先开启USB调试功能 2 用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 3 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备 4 在移动设备上弹出的是否允许远程调试上,选择“允许” 5 在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试 参考: https://github.com/jieyou/remote_inspect

移动前端调试方案(Android + Chrome 实现远程调试)

一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个

强制开启android webview debug模式使用Chrome inspect

一.普通h5页面手机端调试 此种方式最简单,在安卓手机中安装安卓版 chrome,USB 连接 PC,然后在 PC 的 chrome 浏览器中打开 chrome://inspect 即可. 三.基于webkit核心的webview端调试 从 Android 4.4 开始,webkit是支持远程调试的,不过需要将app的debug模式打开,可以使用如下代码:WebView.setWebContentsDebuggingEnabled(true); 由于大部分 App 的 debug 模式是关闭的,

Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)

调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能. Google提供的调试Android上WebView的步骤: 开启手机上的USB调试功能 打开Chrome浏览器,地址栏输入:Chrome://inspect,回车 Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图: 点击Inspect,弹出开发者工具进行调试 问题就出现在这里,对于国内的程序猿来说,由于

使用Chrome Inspect调试WebApp

作者:zhanhailiang 日期:2015-03-10 在PC上有大量的开发调试工作,但是针对需要在移动设备上调试的页面,目前缺乏有效的工具,只能通过PC来模拟测试,为此Chrome支持远程调试Android设备,详情请见Remote Debugging on Android with Chrome. 安装步骤 开启移动设备开发者选项,若和笔者一样使用M4,可参见小米4如何进入开发者选项: 在PC上安装OEM USB Drivers,官方安装教程:OEM USB Drivers,下载路径:l

chrome浏览器使用chrome://inspect调试app 网页,打开空白的问题

使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 那就在C:\Windows\System32\drivers\etc\hosts文件加入 61.91.161.217 chrome-devtools-frontend.appspot.com61.91.161.217 chrometophone.appspot.com

移动前端页面与Chrome的远程真机调试

一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久以前,我的做法是:在PC上用Chrome移动模拟器调试好后,基本OK,再把相关文件传到手机上,在真机上测试以防特殊问题出现. 这个主要有两个缺点:一是传来传去的麻烦,数据量大的那就更麻烦了:二是只能显示地看着页面测试,不能做到真正的调试,测试出现问题了又得重新传. 现在,我的做法是:用PC端的Chr

chrome浏览器远程调试移动端Web页面

1.Android系统的移动设备 a.开启 USB调试模式:具体设置请自行百度: b.用USB数据线连接手机设备,并同意这台计算机进行USB调试: c.在浏览器地址栏输入chrome://inspect 或者about:inspec:可以显示出设备的名称,在下图中 '2013023' 即为设备名称: d.在浏览器中随意打开一个页面或者在app中打开一个webview的页面,出现如下图所示 点击 inspect 即可调试 提示:再调试webview里的页面的时候,若无法显示出webview中打开页