移動端開發真機調試神器

前言：博主翻山越嶺，找了好久的真機調試， 從老古董，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個步驟，就能夠在真機上調試了～