移動端開發真機調試 神器

前言：博主翻山越嶺，找了很久的 真機調試， 從老古董，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',  //此處根據項目實際目錄填寫 10     });
//本地靜態文件
//     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個步驟，就可以在真機上調試了～