在 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 就行了。不清楚是哪儿的问题。

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