【小技巧】AS手动实现无线真机调试

其实无线真机调试很简单，走一遍流程就能学会并且记住，无需插件，无需Root，使用插件反而会将这个流程复杂化。
先放上纯流程版，方便通篇阅读之后的快速查阅，接下来还提供详细版以供参考。
默认读者可以成功真机调试，控制台使用 cmd 或者AS的 Terminal 均可。

由于公司电脑配置较低，虚拟机运行缓慢，所以我一直倾向于真机调试，但是有线调试空间局限性很大，经常在测试上线的几天身后围一屁股人（小公司没有版本管理跟自动编译），很不方便，无线调试就是一个很好的解决方案。

很多人倾向与使用AS插件，但是实践证明手动连接更加方便灵活，插件在某些意义上复杂了这个流程。

首先，你得有一个能正常有线调试的手机，还得有一根数据线，因为未Root的手机需要用电脑的ADB来来打开TCP模式并且绑定端口。
真机用线连电脑，打开Terminal（其实我更习惯用cmd），键入 adb devices ，这个命令会输出所有连接到这台电脑上的设备，每个设备有一个独一无二的序列号。见图1。

此时，我电脑上连接了一台设备，连接方式为有线。

在确定你的手机与电脑成功联机之后，输入命令 adb tcpip 5555 ，这个命令的作用是打开手机的TCP模式，并且将其绑定到5555接口。其中，5555端口是一个习惯使用的端口，就像MySql一般使用3306端口一样，也可以随意指定，只要不产生端口冲突即可。

这条命令执行后没有任何输出，但是手机会出现一次，类似于与电脑断线并且重新插线的反应，代表执行成功。
打开成功之后，就可以拔掉手机数据线了。

接下来执行连接命令，但是首先我们需要进入手机WIFI网络详情，找到此时手机WIFI中的IP地址。接下来就可以执行连接命令了，连接命令为 adb connect 手机IP地址:TCP绑定的端口 。
例如，我手机的IP地址是1921681246，之前TCP模式绑定的端口为5555，此时我需要执行的连接命令为 adb connect 1921681246:5555 。

此时控制台输出connected to 1921681246:5555，表示无线连接成功。

TCP模式一旦开启，只在手机重启时才会关闭，关闭后如果还需使用需要重新开启。断网重连，换WIFI，不会关闭，只要保持手机电脑在统一WIFI下就不需要重新开启。
不过如果手机一旦断网，或者切换WIFI，与电脑的无线连接会立即断开，如果需要重新连接，重新执行一次 adb connect 命令就好。
之前说过，使用插件反而会将这个流程复杂化，是因为这个过程本来就很简单，就是几个命令的事情，这个功能是AS原生支持的，使用插件的话，如果断网或者换WIFI，插件会认为手机的TCP模式已经关闭，需要重新用线连接一次电脑，来开启TCP模式。（也可能是我用的插件不够智能？）

PS：如果执行 adb connect 命令时候，出现 由于目标计算机积极拒绝，无法连接 的提示，检查一下TCP模式是否开启，端口号是否正确。

有线与无线连接，调试方式没有差别，点击编译器上的绿色箭头 Run app 即可。
如果无线调试时候OFFLINE了，关掉手机无线网络，重新连接一次，然后重新执行 adb connect 命令即可，就像有线调试时那样。

之前检查连接的时候，使用过一个 adb devices 命令，可以得到一个已连接设备的序列号表，一次连接多台设备跟连接一台设备流程类似，通过序列号指定设备即可。

如图4，此时我的电脑通过有线接入两台设备，通过无线接入一台设备。

此时如果直接执行大部分adb命令，比如开启TCP模式，都会得到一个异常提醒，多于一个设备。如图5。

这种情况下，只要指定设备序列号就可以正常执行。
例如，需要进行TCP模式开启， adb -s f87c75bb tcpip 5555 ，但是与电脑建立连接的 adb connect 命令不需要加序列号，因为IP地址本来就相当于是序列号了。

PS：手机有线连接与无线连接都与一台电脑进行连接的话，会被识别为两台设备。就像笔记本的有线网卡与无线网卡互相独立。但这种连接没有意义，所以推荐无线连接完成之后就把线拔了把。

1、一台PC、一台手机

很显然首先你得需要一台 PC 机，一台手机， 并把它们连上同一个网段的网络（推荐做法，也可以 USB 连接调试，详见 UC浏览器开发者版 ）。

2、PC、移动端文件安装

毫无疑问，移动端需要安装 UC 浏览器开发者版 。而 PC 端需要安装 ADB工具，是个压缩文件，解压后双击 exe 文件就 OK 了。

3、调试

准备工作完成，接下去就是激动人心的调试环节了！

首先在移动端打开安装的浏览器，打开需要调试的页面。

接着我们打开 PC 端的 chrome 浏览器（Safari 也可以，建议 chrome），在地址栏输入 手机IP+:9998 ，比如我的是 >

接着点击任一你需要调试的网页，此时浏览器的 url 会发生变化，手机那边会跳出对话框如下，点确定就 ok 了。

接着会出现 chrome 调试面板（不知道是什么版本的，反正很古老！）如果没出来，耐心等一会。

接着就进入调试模式了，你会发现手机屏幕的左上角多了个小把手。nice！接下去就可以像 PC 端一样调试了，需要注意的是，如果你想刷新页面重新发送请求，要在手机上刷新！这个时候，也可以愉快地进行 js 调试了，爽歪歪！

我打开了百度首页，鼠标移到 PC 端 Elements 面板上的搜索框代码部分，手机端就会有响应了！

PS：在我的机器上 chrome 面板（Elements 模块）展开不好用，需要双击，而且双击展开后就关不上了。

UC 浏览器开发者版调试也有两个明显的缺点：

仅支持安卓机

无法做到浏览器兼容（比如程序只在 Safari 上出了问题）

使用grunt+bower+webstorm作为前端开发工具，在开发移动端的时候，怎么才能直接在真机上进行页面调试？
举个例子就是在IDE里写html，手机上也会同步展示。
-------分隔线------
在各位大神的推荐下使用了browser-sync，发现真是神器啊，现在使用grunt-watch + browser-sync 可以实现了实时编译。这里有个前端大牛裙前面是五五二中间是就一二后面是思五五连起来可以了，不是来学习请不要加了
在使用的过程中发现了一个问题，就是使用ip在本机是可以访问的
>

1、首先在电脑上打开360极速浏览器，其他浏览器也大同小异，在一个网页中“右键--审查元素”。

2、在d出的窗口中，在右下角找到setting按键，进入设置界面。

3、在settings中，找到overrides，并点击，勾选Enable和User-Agent选项。

4、然后选择相应需要用到的手机系统与相应的设备，进行模拟。

5、然后再下拉，这里可以设置屏幕的分辨率，字体的大小比例等。

6、设置好，来访问一下手机样式的网站，打开百度手机站，访问后，可以看到和手机样式一致，无论大小与排版都与手机浏览器一样。

---