BrowserSync前端调试工具使用
上次介绍了一款DebugGap移动端调试工具DebugGap推荐。但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便的,看到一位仁兄介绍的BrowserSync,于是看看了,感觉还行吧。它主要是用来同步更新的,比如文件修改了,浏览器会自动刷新,以及还有一点好处就是,PC,移动端都是同步的,可惜的是没有调试工具,在Chrome调试工具里面调试的不会同步更新到手机端,要是这个可以就好了。
虽然没个调试工具,但我们可以直接去修改文件,然后手机端也会自动刷新。这一点还是好的,不多说,先用一段时间看看吧。有更好的调试工具还请推荐一二。
使用起来倒是很简单。
中文网:http://www.browsersync.cn/
1. 安装 Node.js
2. 安装 BrowserSync
npm install -g browser-sync
3. 启动 BrowserSync
browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
注意这句话需要在你的根目录里面执行。很简单如果是Window的话,在你的项目里面按Shift的键会出现一个菜单,里面有一个在 '此次打开命令'。然后把这段命令输入进去就可以了。 之后我们可以看到一个这样的界面
在3000端口号里面输入你要调试的页面路径
在3001端口可以进行配置
调试的话,直接修改css 顺便介绍个二维码生成工具
http://cli.im/url
手机扫一下这个二维码就好了。
其实Chrome也有相应的二维码生成插件,你可以搜一下。
BrowserSync前端调试工具使用的更多相关文章
- 【F12】谷歌浏览器F12前端调试工具 Console
谷歌浏览器F12前端调试工具 Console 前言 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的C ...
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
- 前端调试工具(DevTools)
前端调试工具(DevTools) 开启:F12 布局 切换PC和移动端 页面元素的快速测试技巧 保持元素的hover等状态:选中当前行点击右键 元素状态改变的监控技巧 触发断点后元素状态不会再改变,可 ...
- 移动前端调试工具-Weinre真机调试
之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...
- BrowserSync(前端利器—保存代码后,自动刷新浏览器)
摘要 Browsersync能让浏览器实时.快速响应您的文件更改(HTML.JavaScript.CSS.Sass.Less.PHP.Python等)并自动刷新页面.更重要的是 Browsersync ...
- 自己开发前端调试工具:Gungnir
文章目录 1. 界面介绍 2. 项目资源管理界面 3. 文本编辑器功能 4. 代理功能 4.1. 自动下载线上文件 4.2. 使用本地已有文件 4.3. 代理整个目录 4.4. 执行文件内容后返回结果 ...
- web前端调试工具
1.firebug入门指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html 2. Console命令详解,让调试js代码变得更 ...
- BrowserSync前端同步测试工具
安装教程
- spy-debugger 前端调试工具
一站式页面调试.抓包工具.远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等).支持HTTP/HTTPS,无需USB连接设备. Language: Engl ...
随机推荐
- OpenMP之数值积分(求圆周率Pi)(sections)
// Pi.cpp : 定义控制台应用程序的入口点. //求圆周率PI #include "stdafx.h" #include <windows.h> #includ ...
- Execution Order of Event Functions
In Unity scripting, there are a number of event functions that get executed in a predetermined order ...
- LintCode 111 Climbing Stairs
这道题参考了这个网址: http://blog.csdn.net/u012490475/article/details/48845683 /* 首先考虑边界情况,当有1层时,有一种方法. 然后再看2层 ...
- 【转载】硬盘MBR详细介绍
原文地址:http://blog.chinaunix.net/uid-15007890-id-106892.html 硬盘MBR详细介绍 硬盘是现在计算机上最常用的存储器之一.我们都知道,计 ...
- chrome插件开发-消息机制中的bug与解决方案
序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...
- RHEL5.8的NFS配置文件
RHEL5.8的NFS配置文件 路径:/etc/sysconfig/nfs # # Define which protocol versions mountd # will advertise. Th ...
- 常用正则表达式-copy
匹配中文:[\u4e00-\u9fa5] 英文字母:[a-zA-Z] 数字:[0-9] 匹配中文,英文字母和数字及_: ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 同时判断输入长度:[\ ...
- C#中的线程一(委托中的异步)
C#中的线程一(委托中的异步) 一.同步委托 我们平时所用的委托以同步居多,我们编写一个方法和相关委托进行演示: publicdelegatevoid DoSomethingDelegate(stri ...
- 《你必须知道的.NET》读书笔记二:小OO有大原则
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...
- js只需5分钟创建一个跨三大平台纯原生APP
DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...