移动端开发真机调试神器

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

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

1.npm init

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

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

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

  • 引入组件
  • 添加任务

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个步骤,就可以在真机上调试了~

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

打赏作者

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

任选一种支付方式

2 11 收藏 3 评论

关于作者:陈被单

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

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部