利用Chrome开发者工具对Android移动端页面进行远程调试
本文由 小茗同学 发表于 2018-02-08 浏览(538)
最后修改 2018-08-30 标签:chrome 远程 调试

前言

曾经对这一块不知道多熟悉,一年多没接触移动端开发,竟然连远程调试怎么打开都不记得了,所以看来啊,任何东西无论多简单都要做笔记,这是这的!

下面开始

其实真的非常简单!

第一步,开启USB调试模式

这个就不用细说了,是个人都知道怎么开启。

第二步,连接手机和电脑

连上基本就不用管了,驱动都不用装,这个后面再细说。

第三步,手机使用Chrome访问任一网站

也可以不使用Chrome,但是使用Chrome最简单,我们依然再后面细说。用手机版Chrome打开某一网站,比如 https://haoji.me

第四步,电脑使用Chrome调试

打开Chrome,访问chrome://inspect/ ,不出意外的话你的手机型号就会出现在这里,使用手机版Chrome打开了某个页面的话也会出现在这里,点击inspect就可以调试了,但是第一次打开你会发现一直在转啊转,因为需要加载墙外的一些文件,所以第一次需要翻墙,以后就不需要了,具体怎么翻,我这里就不多说了,一千个哈姆雷特,有一千个翻墙方法。

打开后是这样的,至于为什么有时候Elements等面板一片空白,还在找原因中:

补充说明

关于驱动

试过很多遍确实是这样,即使adb无法正常连接手机,但是Chrome的远程调试却可以正常显示,貌似底层实现不是依赖adb,这个不太确定。而adb连接手机失败的几率就太大了,adb连接手机一般都是要求安装手机驱动的。

关于移动端使用的浏览器

移动端Chrome不需要任何设置即可开启远程调试,其它第三方浏览器(如UC、QQ浏览器)的话,貌似没听说过如何开启远程调试的,如果是自己app里面定制的webview,需要通过如下方式主动开启(默认是关闭的),一般建议用一个开关参数来控制开启与否,开发时开启,上线后关闭:

@TargetApi(Build.VERSION_CODES.KITKAT)
public void setRemoteDebug(boolean enabled)
{
	if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
	{
		// 开启Chrome远程调试功能,要求安卓版本>=4.4
		WebView.setWebContentsDebuggingEnabled(enabled);
	}
}

关于页面可以预览但无法看到代码的问题

这个还在找原因中。