如何通过Chrome远程调试android设备上的Web网站
网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用。有需要的朋友也可以参考。先上一张图,看看PC端chrome上调试的效果:

左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面。
下面再说一下环境配置:
1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验。安装chrome版本为58.0.3029.83;
2.PC端,win7 64位系统,安装chrome版本为 59.0.3071.86(正式版本) (64 位)。
其实这些都不是重点,下面说一下最折腾人的地方,就是手机插上usb线之后,驱动的问题。开始一直提示adb驱动失败,找不到adb驱动程序。网上找了一大堆的文章,都无法解决问题。
现将驱动分享到这里,链接地址为:http://pan.baidu.com/s/1qYdPQGk 密码:ksw7 ,大家可以直接下载解压缩后,在设备管理器下面,找到驱动失败黄色感叹号的那一项,右键更新驱动程序,选择解压缩后的文件夹,下一步之后自动完成驱动安装。
好了,到了这里,算是成功了一般。好家伙,就这个,耽搁了我半天时间。
接下来,就是需要配置手机usb调试和PC端chrome设置了。
开启 Android 设备的 USB 调试

具体如何打开开发人员选项,大家可百度了,也可以参考这里:http://jingyan.baidu.com/article/ca41422fe156241eae99eda5.html
还有就是USB连接方式,我这里选择的是PC助手,其他的机型可能叫法不一样,大家可以都试试。

这里设置好之后,手机端基本上不需要再设置什么了。接下来回到PC端。
打开chrome浏览器,F12打开开发人员工具,按照下图红色圈中的方式操作即可:

由于我这里已经和设备连接成功过,所以在右侧Remote devices中,有显示设备名称:CHM-CL00,并且设备状态是Connected。如果是第一次连接,或者没有连接成功,会是以下内容:

这个时候,一般来说,在手机上会有一个是否允许USB调试的提示。如果没有此提示,请多次尝试拔掉usb连接线,重新插上,也可以按照官方的操作方式,撤销USB调试授权,然后拔掉usb连接线,重新插上试试看。
以下是usb调试授权提示:

确定授权后,在开发人员工具右边,remote device中,就会显示设备连接成功了:

好了,接下来就是开始调试了。
点击Connected选项卡,会在右边显示设备名称,以及移动设备中chrome的版本号。如下图所示:

在New tab后面的文本框中,输入我们需要调试的网站网址,例如:http://www.baidu.com,然后点击open按钮,此时,百度的网址会出现在“打开新的标签页”的下方。

此时,在手机端打开chrome浏览器,http://www.baidu.com网站已被自动打开。此时,我们在PC端开发人员工具,Remote devices的Connected选项卡中,点击http://www.baidu.com网址后面的Inspect按钮,会打开一个新的窗口,该窗口即为我们一开始看到的远程调试android设备的界面。
好了,到此设置大功告成了,接下来就是调试了。
祝各位顺利配置成功!
最后,奉上官网的配置设置,需要FQ哦,大家都懂的。
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?refresh=1
如何通过Chrome远程调试android设备上的Web网站的更多相关文章
- 在桌面chrome中调试android设备中的web页面
		准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer ... 
- 远程调试 Android 设备使用入门(谷歌翻译版)
		移动前端调试方案(Android + Chrome 实现远程调试) 目录 要求 第 1 步:发现您的 Android 设备 第 2 步:从您的开发计算机调试 Android 设备上的内容. 更多操作: ... 
- 使用 桌面的 chrome 远程调试 Android 的页面
		手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌 ... 
- 使用Chrome(PC)调试移动设备上的网页
		最早开始调试移动端网页时,本人都是采取PC上改几行代码,手机上刷新一下看效果这种笨方法来开发的,效率低而且容易让人抓狂.最近偶然发现原来可以使用PC上的浏览器来调试移动设备,不由得感叹相逢恨晚. 工具 ... 
- Chrome远程调试Android上Chrome的页面
		下载最新的google chrome canary 手机chrome开启usb网页调试,如图所示: 在终端运行 ? SHELL adb forward tcp:9222 localabstract:c ... 
- 远程调试Android手机上网页的记录
		1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ... 
- android:如何通过chrome远程调试APP中的webView的h5代码
		今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chro ... 
- 使用chrome远程调试设备及调试模拟器设备
		使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统 ... 
- 理解WebKit和Chromium: 调试Android系统上的Chromium
		转载请注明原文地址:http://blog.csdn.net/milado_nju 1. Android上的调试技术 在Android系统上,开发人员能够使用两种不同的语言来开发应用程序,一种是Jav ... 
随机推荐
- Qt 按名称查找子节点
			TreeItem* TreeModel::GetItem(QStringList& list, TreeItem* parent ,int deep) { ).toString()) { if ... 
- 大量数据的excel导出
			对于大型excel的创建且不会内存溢出的,就只有SXSSFWorkbook了.它的原理很简单,用硬盘空间换内存(就像hash map用空间换时间一样). private void writeToAla ... 
- python第三方库------jieba库(中文分词)
			jieba“结巴”中文分词:做最好的 Python 中文分词组件 github:https://github.com/fxsjy/jieba 特点支持三种分词模式: 精确模式,试图将句子最精确地切开, ... 
- python练习小文章-文本爬虫
			一入“程”门深四海...... 有学习就得有练习,我来练一个文本爬虫,代码直接写到下面,抓取的是网页图片,简单好学,适合新手练习. 话不多说直接上干货! 1. 目标网址:https://www.jik ... 
- K2 BPM获评“表现强劲”_2019 Forrester 报告_全球领先的工作流引擎
			3月12日,在Forrester Research发布的报告<Forrester Wave:2019年第一季度广泛部署数字流程自动化(DPA)>中,K2获评“表现强劲”. 此次共有10项评 ... 
- 【转载】Druid 介绍及配置
			原文链接:https://www.cnblogs.com/niejunlei/p/5977895.html 1. Druid是什么? Druid是Java语言中最好的数据库连接池.Druid能够提供强 ... 
- GCP 谷歌云平台申请教程
			最近为了学个国外的课程,想要用谷歌云平台的GPU,谷歌云平台,新注册,赠送300美金,免费用一年.注册的时候发现,必须要有国外的信用卡,网上搜索,并试了几个解决方案. 1.不用信用卡,能不能申请成功? ... 
- Android系统中是否开启定位及定位模式的判断
			1.关于Android系统中不同的定位模式 Android系统中包括3中定位模式: 使用GPS.WLAN和移动网络 使用WLAN和移动网络 仅使用GPS 截图 特点 同时使用GPS.WIFI及基站 ... 
- d3js可视化策略
			d3js是数据驱动图形的思路.基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据.大概思路步骤如下: 一.适配数据格式 这一步主要是为第二部服务,第一步的结果作为第二部的入参. 比如,画层级 ... 
- js问题解决——cannot read property style of undefind
			当遇到cannot read property style of undefine的问题如下: 那就说明你设定的这个变量名为空 比如我在文档里写的属性名为list_box 但是我获取的属性名称写错了 ... 
