移动端开发真机调试神器

前言：博主翻山越岭，找了好久的真机调试， 从老古董，weinre，到微信开发者工具，到最后的browser-sync，最后这个工具真的是眼前一亮～

本文默认前提：你已会使用gulp，npm，而且环境已经搭好

1.npm init

找到目录中的 package.json， 在文件中添加相关依赖包

"dependencies": {

  "async-each-series": "^1.1.0",

  "connect-history-api-fallback": "^1.3.0",

  "weinre": "^2.0.0-pre-I0Z7U9OV"

}

2.npm install

安装相关依赖文件

3.新建gulpfile.js文件，添加下面相关代码

引入组件

var browserSync = require('browser-sync').create();  //自动同步

添加任务

gulp.task('browser-sync',function () {

    var files = [

        '**/*.html',

        '**/*.css',

        '**/*.js'

    ];

//代理模式（本地服务器）

    browserSync.init(files,{

        proxy: 'http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index',  //此处根据项目实际目录填写

    });

//本地静态文件

//     browserSync.init(files, {

//         server: {

//             baseDir: './src'   //该路径到html的文件夹目录

//         }

//     });

});

4.打开终端，在项目目录下输入命令 gulp browser-sync，出现如下形式

此时浏览器会自动打开 http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index 的页面，这与上面gulpfile.js设置的同样。

在手机（真机），只须要输入命令行中的 External 的网址便可看到要调试的页面了。并且，这个是多个浏览器统一的，你在电脑上滑动，点击，手机上都会执行相应的效果。同理，手机上的操做，电脑也会执行相应的效果。

注意：若是是用webstom自带的服务器开的网站的话，webstom还须要设置一下，勾选如下内容［使用webstom打开的页面默认为服务器打开的页面］

5.调试：

在浏览器打开 http://localhost:3001，进入到如下页面

勾选，remote debugger，以后点击 opens in a new tab，便可跳转到 weinre 页面。在weinre上审查元素的时候，手机上都会有相应的变化。

这里要注意一点：待调试页面要先启动后，再勾选 remote debugger，不然会因为获取不到而没法调试。

通过以上5个步骤，就能够在真机上调试了～