在 Chrome 中调试 Android 浏览器

最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友。

Chrome Developer Tools 是前端工程师必不可少的工具,它极大的提高了我们的开发调试效率。在移动开发的时代,我们也必须掌握手机浏览器在 Chrome 中调试的方法。本篇仅介绍 Android。

环境

不同的环境可能存在一些差异,我的环境是:

  • Windows 10
  • 电脑 Chrome 50.0.2661.75 m
  • Galaxy Node 3
  • Android 5.0
  • 手机 Chrome Dev 51.0.2704.10 (从豌豆荚下载的)

安装 USB driver

首先需要安装的是 USB 驱动,虽说现在大部分操作系统都可以自动安装识别手机的驱动,但是如果要用于连上电脑调试,还是得手动安装一个,我安装的是:Samsung Andorid USB Driver for Windows

其他设备也可以在这里找到对应的驱动:OEM USB Drivers

启动手机上的开发者模式

进入设置,找到开发者模式即可。但是 Android 4.2 之后的机器,开发者模式都被隐藏了,需要在关于设备中找到 Build Number,中文对应的可能是「内部版本号」,找到之后狂点它,过一会儿就会提示是否开启开发者模式了。

连接手机和电脑

连接之后,如果手机弹框询问是否允许 Debug,点击允许之后,可以跳过以下安装 ADB Server 的步骤,直接进入最后一步。

如果手机上没有弹框,八成是没有启动 ADB Server,请接着往下看。

安装 ADB Server

ADB 是 Android Debug Bridge 的简称,是 Android SDK Platform-tools 中的一个工具。根据这个 Stackoverflow 上的指南,可以只用安装 single ADB package。但是我遇到一些问题,于是我把整个 Android Studio 安装了,说不定以后要开发 Android 应用呢。

启动 ADB Server

我是直接安装的 Android Studio,于是根据这个 Stackoverflow 上的解答,找到了 adb 的地址:C:\Users\<insert username here>\AppData\Local\Android\sdk\platform-tools\adb.exe

在 cmd 中运行

cd C:\Users\<insert username here>\AppData\Local\Android\sdk\platform-tools
adb start-server

即可。

Tips:重启电脑之后,如果还需要调试,得重新执行一遍 adb start-server

在 Chrome 中调试

打开电脑中的 Chrome,浏览器中输入 chrome://inspect,进入后勾选 Discover USB devices,就可以看到手机的 Chrome 上打开的页面了。

点击 inspect,会在新窗口打开一个 Chrome Developer Tools 的页面,即可以调试了。

Tips:手机上的原生浏览器也支持在 Chrome 中调试,但是看不到预览图。

Tips:电脑上打开的 Chrome Developer Tools 的页面,是根据手机上的 Chrome 版本生成的,所以可能和电脑上的页面有点不同。

这里我遇到一个问题,www.90168.org手机中如果安装的是 Chrome,则在电脑中一点 inspect 就会闪退。后来在手机中安装了 Chrome Dev 就好了。不清楚是哪儿的问题。

最后来一个成功的截图吧!

时间: 2024-10-12 23:50:59

在 Chrome 中调试 Android 浏览器的相关文章

在桌面chrome中调试android设备中的web页面

准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer.android.com/sdk/index.html下载android-sdk开发包,安装后,执行SDK Manager.exe,安装android SDK Platform-tools工具包. 环境变量配置: 在环境变量添加path,并添加路径<sdk>/platform-tools; 添加后

在Chrome 中调试Javascript

在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript,在本篇内容中,我们讲一下如何在谷歌 Chrome中调试Javascript. Chrome 是Google 提供的一款非常优秀的浏览器,内置了开发者工具,可以方便我们对JS代码进行调试.有了使用IE来调试Javascript的经验,在使用Chrome进行调试的时候会变得很方便. 使用Chrome打开我们要调试的页面,然后使用快捷键F12打开开发者工具,当然,你也可以在工具菜单中

248 闭包:概念,作用,案例,思考题案例,chrome 中调试闭包

5.1 变量的作用域复习 变量根据作用域的不同分为两种:全局变量和局部变量. 函数内部可以使用全局变量. 函数外部不可以使用局部变量. 当函数执行完毕,本作用域内的局部变量会销毁. 5.2 什么是闭包 闭包(closure):指有权访问另一个函数作用域中的变量的函数. 简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量. [被访问的局部变量所在的函数,就是闭包函数] <!DOCTYPE html> <html lang="en"> <head&g

如何通过Chrome远程调试android设备上的Web网站

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64

使用 桌面的 chrome 远程调试 Android 的页面

手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌面端:谷歌浏览器,版本建议大于手机端的,最好使用 chrome canary USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑,并开启调试模式. 使用 android 4.2 或以上的手机可能没有调试模式选项,可以找到 “设置 > 关于手机 > 版本号(Build

Chrome 中调试Javascript

使用Chrome打开我们要调试的页面,然后使用快捷键F12打开开发者工具,当然,你也可以在工具菜单中找到.Chrome开发者工具如图: Elements选项卡是对界面上的元素进行选择的,我们要进行调试的代码在Sources 选项卡中. 打开Sources选项卡,点击左侧的小箭头打开所有资源,选择我们的页面: 我们要调试这个页面的代码,所以就打开这个页面,然后点击行号可以添加断点: 点击界面中的按钮,我们能够捕获到刚添加的断点: 添加监视的方法和在IE中的方法是一样的:选中变量,在变量上面单击,选

用Chrome devTools 调试Android手机app中的web页面。

(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手机与电脑.(3) 将手机中的 设置 - 开发人员工具 - USB调试功能打开.(4) 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上 Discover USB devices(5) 在app中访问一个web页面,对应的

如何在sublime+chrome中调试php代码?

1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.php.net/package/xdebug [5.3版及其以下的php下载地址]http://pecl.php.net/package/xdebug/2.2.7/windows 注意版本要对应,不然可能会不能用.   3.安装php xdebug扩展(即在配置php.ini文件加入以下代码) [XDe

在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题)

在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题) 今天开始起在Chrome中调试,发现问题主要出在菜单栏(layout文件)中,google了一番,查到很多原因,不过最终解决方法倒是很简单,特此分享一下: 在C:/Windows/System32/drivers/etc里边有一个hosts文件,用记事本打开,里边最后几行原来是: # localhost name resolution is handled within DNS itsel