如何在Chrome上运行Android设备实现移动前端远程调试的方案

作者:课课家教育更新于： 2016-04-21 14:35:25

　   想要调试移动端页面，首先要使用Chrome浏览器的远程调试功能，而使用该功能需要先有FQ才可以，FQ是什么？就好比VPN软件工具，具有翻墙用的软件工具。因为在国内是使用不了谷歌Chrome浏览器的，所以FQ就有了用武之地了。而Chrome是由Google开发的一款设计简单、高效的web浏览工具，该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面(GUI)。

      一.背景

　　一般情况下，我们调试移动端页面最常用的方法是切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果

　　但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢chrome做到了

　　二.功能

　　我们先看下最终想要达到的效果

　　上图的左边是pc端的chrome浏览器，右边是手机上的chrome 然后可以看到当鼠标移动到某个div上时 手机上的这个区域高亮显示 跟pc上调试某段代码效果一样 你可以修改代码 并直接在手机上反馈修改结果

　　三，准备

　　为了完成这一亮骚的移动调试功能我们需要以下准备工作

　　1.pc端安装最新的chrome

　　2.手机端安装最新的chrome (Android机)

　　3.USB连接线

　　(感觉是不是too simple)

　　Tip:之前的的chrome如果要实现这种调试需要安装一个ADB插件(需要FQ) 但是最新的chrome已经直接支持对Android的识别 所以也不用再在chrome上安装ADB插件了 但需要下载最新的chrome

　　四：步骤

　　下来我们逐步完成

　　1.假设你已经在电脑上下载了最新的chrome 也在手机上下载了最新的chrome

　　2.USB设置 在你的手机里打开"设置"->"开发人员工具"->"USB调试" 打开USB调试。 因为Android手机型号众多 很多人找不到"USB调试这个选项在哪" 而且大多数手机"开发者选项"默认是影藏的，你需要看下自己的手机说明然后将手机调到"开发者模式" 就可以找到 "USB调试了"

　　3.假设你已经将手机设置为"USB调试"打开的状态 将手机连接到电脑 手机会弹出是否链接 点击确定

　　4.打开电脑的chrome 在地址栏输入 chrome://inspect 选中 Discover USB devices 可以检测到你的设备 可以看到监测到我的设备是M351 魅族X3

　　5.打开手机上的chrome

　　上图可以看到手机上chrome打开的页面 此时我手机上的chrome没打开任何网页 历史记录也么有 如果我们在手机 chrome浏览器输入www.cnblogs.com 可以看到下图 ，也可以通过 inspect里chrome后面那个输入框直接打开某个链接

　　6.点击inspect 如下图 就看到了文章开始一样的效果 此时就是可以审查手机页面上的元素了

　　7.可以点击弹出的审查元素框右上角的方形小图标切换到视图模式 这时会把你手机打开的页面拉到pc上显示

　　五：总结

　　到这移动端远程调试的内容就基本介绍完了，罗列一下整个流程 ：pc端和Android手机端都下载最新的chrome ，在手机设置里将"USB调试"打开 链接到电脑，打开电脑chrome 输入chrome://inspect 打开手机chrome输入你想调试的页面 点击inspect 开始调试 ,整个调试的过程都是需要FQ才可以支持的哦 。

     综上文，简单介绍一下调试移动端页面和功能，以及远程调试前需要做的准备，详细说明了在Chrome上运行Android设备实现移动前端远程调试需要的步骤，如上面小结步骤流程的说明，如果有兴趣学习移动端远程调试的朋友可要好好肚肚上文咯。