>

移动端开发真机调试神器,移动端开发真机调试

- 编辑:至尊游戏网站 -

移动端开发真机调试神器,移动端开发真机调试

移动端开发真机调试神器

2016/09/07 · 基础技术 · 3 评论 · 调试

本文作者: 伯乐在线 - 陈被单 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

本文默认前提:你已会使用gulp,npm,并且环境已经搭好

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

至尊游戏网站,1.npm init

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

JavaScript

"dependencies": { "async-each-series": "^1.1.0", "connect-history-api-fallback": "^1.3.0", "weinre": "^2.0.0-pre-I0Z7U9OV" }

1
2
3
4
5
"dependencies": {
  "async-each-series": "^1.1.0",
  "connect-history-api-fallback": "^1.3.0",
  "weinre": "^2.0.0-pre-I0Z7U9OV"
}

[本篇博客默认你已会使用gulp,npm~并且环境已经搭好]

2.npm install    安装相关依赖文件

 

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

  • 引入组件

JavaScript

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

1
var browserSync = require('browser-sync').create();  //自动同步
  • 添加任务

JavaScript

gulp.task('browser-sync',function () { var files = [ '**/*.html', '**/*.css', '**/*.js' ]; //代理模式(本地服务器) browserSync.init(files,{ proxy: '', //此处根据项目实际目录填写 }); //本地静态文件 // browserSync.init(files, { // server: { // baseDir: './src' //该路径到html的文件夹目录 // } // }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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的文件夹目录
//         }
//     });
});

1.npm init      

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

1 "dependencies": {
2   "async-each-series": "^1.1.0",
3   "connect-history-api-fallback": "^1.3.0",
4   "weinre": "^2.0.0-pre-I0Z7U9OV"
5 }

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

至尊游戏网站 1

此时浏览器会自动打开 的页面,这与上面gulpfile.js设置的一样。

在手机(真机),只需要输入命令行中的  External 的网址即可看到要调试的页面了。而且,这个是多个浏览器统一的,你在电脑上滑动,点击,手机上都会执行相应的效果。同理,手机上的操作,电脑也会执行相应的效果。

注意:如果是用webstom自带的服务器开的网站的话,webstom还需要设置一下,勾选以下内容[使用webstom打开的页面默认为服务器打开的页面]

至尊游戏网站 2

2.npm install    安装相关依赖文件

5.调试:

在浏览器打开  http://localhost:3001,进入到以下页面
至尊游戏网站 3

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

这里要注意一点:待调试页面要先启动后,再勾选 remote debugger,否则会由于获取不到而无法调试。

经过以上5个步骤,就可以在真机上调试了~

打赏支持我写出更多好文章,谢谢!

打赏作者

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

  • 引入组件

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

  • 添加任务

    1 gulp.task('browser-sync',function () { 2 var files = [ 3 '/*.html', 4 '/.css', 5 '**/.js' 6 ]; 7 //代理模式(本地服务器) 8 browserSync.init(files,{ 9 proxy: '', //此处根据项目实际目录填写 10 }); 11 //本地静态文件 12 // browserSync.init(files, { 13 // server: { 14 // baseDir: './src' //该路径到html的文件夹目录 15 // } 16 // }); 17 });

 

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

至尊游戏网站 4 至尊游戏网站 5

2 赞 11 收藏 3 评论

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

至尊游戏网站 6

此时浏览器会自动打开

在手机(真机),只需要输入命令行中的  External 的网址即可看到要调试的页面了

而且,这个是多个浏览器统一的,你在电脑上滑动,点击,手机上都会执行相应的效果。同理,手机上的操作,电脑也会执行相应的效果。

 

注意:如果是用webstom自带的服务器开的网站的话,webstom还需要设置一下,勾选以下内容[使用webstom打开的页面默认为服务器打开的页面]

至尊游戏网站 7

 

关于作者:陈被单

至尊游戏网站 8

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

至尊游戏网站 9

5.调试:

在浏览器打开  :3001,进入到以下页面 

 至尊游戏网站 10

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

 这里要注意一点:待调试页面要先启动后,再勾选 remote debugger,否则会由于获取不到而无法调试。

 

 经过以上5个步骤,就可以在真机上调试了~ 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文由硬件数码发布,转载请注明来源:移动端开发真机调试神器,移动端开发真机调试