移动端真机调试终极利器-BrowserSync(使用方法)
1. 安装 Node.js
BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js
安装适用于Mac OS,Windows和Linux。
2. 安装 BrowserSync
您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:
npm install -g browser-sync
您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。
当然您也可以结合gulpjs
或gruntjs
构建工具来使用,在您需要构建的项目里运行下面的命令:
npm install --save-dev browser-sync
3. 启动 BrowserSync
一个基本用途是,如果您只希望在对某个css
文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
静态网站
如果您想要监听.css
文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html
文件
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
我们做了一个静态例子的示范,您可以下载示例包,文件您可以解压任何盘符的任何目录下,不能是中文路径。打开您的命令行工具,进入到BrowsersyncExample目录下,运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。你也可以查看Browsersync静态示例视频
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
四、调试
我们在PC的浏览器中打开http://localhost:3001,这个端口为3001的URL是BrowserSync的操作界面:
界面操作简洁易懂。我们着重关注的是Remote Debug这一项,默认它的所有选项都是关闭的。我们开启Remote Debugger (weinre)
这一项,然后点击出现的红色字:Access remote debugger (opens in a new tab),就会打开weinre的控制台界面:
这个界面上会列出当前连接在BrowserSync上的客户端,我们可以选择一个目标(target)来调试,因为我们的微信浏览器访问的是外部链接,即http://192.168.0.141:3000,所以我们点击图中Targets下的第一个link。点击后link会变为绿色,表示当前已经可以对这个客户端进行调试了。此时我们点到顶端的Elements选项卡上,就会看到微信浏览器里网页的HTML结构。鼠标移动到div上的时候,浏览器里的相应的元素就会高亮起来:
此时能做的事情就可想而知了。
需要注意的是,要先打开自己的项目页面,再打开Remote Debugger,这样才能列出当前已经连接的客户端。否则的话,即使项目页面和BrowserSync是连接状态,Remote Debugger也会出现捕捉不到的情况。因此,可能需要关闭再重新开启Remote Debugger进行调试。
移动端真机调试终极利器-BrowserSync(使用方法)的更多相关文章
- 移动端真机调试--weinre
一.安装 首先确保你的电脑上有node环境,然后使用cnpm或npm 安装 windows下 npm install weinre -g --registry=https://registry.npm ...
- 移动端真机调试抓包,fiddler web debugger
小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler
- 运用node真机调试移动web项目
很多时候我们对移动端进行测试的时候,有pc端的测试,也有真机上的测试,pc的测试就不多说了,因为其实基本上大家都懂的.真机测试上也有几种方法,这里就推荐三种: 移动端真机调试方法 chrome真机调试 ...
- uni-app真机调试报错request:fail abort解决方法
Android端真机调试访问本地接口数据时报错:request:fail abort 报错代码 onLoad: function(e) { uni.request({ url: 'http://loc ...
- Android+Chrome 真机调试H5页面实践
前言 使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起. ...
- 网页真机调试之Browsersync简介
以前的调试方式 修改完项目文件(html.js.css等)后保存,在浏览器刷新页面查看修改后的效果 本地开启一个 tomcat 服务,修改文件后保存刷新页面,移动端或其他 pc 则需要输入 ip + ...
- 如何实用便捷的在本地真机调试WEB端HTML5网页
先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...
- 移动端真机debug调试神器 vConsole学习(一)之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- 使用未付费的账号真机调试 iOS 程序,过几天后程序一打开就会闪退
使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退. 解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...
随机推荐
- 关于java中分割字符串
例子:String path = "123.456.789"; 如果要使用“.”将path分割成String[], path.split("//."); or ...
- SpringMVC 使用验证框架 Bean Validation(上)
SpringMVC 使用验证框架 Bean Validation(上) 对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证. ...
- mybatis pagehelper分页插件使用
使用过mybatis的人都知道,mybatis本身就很小且简单,sql写在xml里,统一管理和优化.缺点当然也有,比如我们使用过程中,要使用到分页,如果用最原始的方式的话,1.查询分页数据,2.获取分 ...
- vba文件对比并高亮显示
每月月底要和人事要离职人员名单,并账号列表里删除已经离职人员的账号,如下代码通过将账号列表与人事发来的离职清单进行对比,高亮找出离职人员的账号,并进行删除. Sub DeleteMain() Dim ...
- AOP打印请求日志,打印返回值
@Aspect // 申明是个spring管理的bean @Component @Slf4j public class LogAspectServiceApi { private JSONObject ...
- 《Linux就该这么学》第九天课程
这次课程主要学了如何分区以及RAID技术 有扩展分区:扩展分区可以指定sdb*中的*(1~4)为多少,则其他三个为主分区,扩展分区中的逻辑分区sdb*(*从5开始)无扩展分区:四个皆为主分区 RAID ...
- CentOs7安装PHP
来源:https://jingyan.baidu.com/article/2d5afd692df18d85a3e28e4c.html 一.下载源码 1.cd /usr/local/src/ 2. 执行 ...
- OpenCV图像分割2
1.GrubCut算法 2.K-means聚类算法 3.分水岭算法
- 2019swpuj2ee作业2--HTTP协议
简介: HTTP协议:超文本传输协议.它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器.在七层模型中属于应用层.是一种请求/响应式的协议. 主要特点: (1)支持客户端/服 ...
- elasticsearch之入门hello(java)一
1.书写pom.xml文件 <dependencies> <dependency> <groupId>org.elasticsearch</groupId&g ...