移动端真机调试工具 Browser-sync

原创 微微微_笑 随笔 调试工具 280阅读 2017-11-09 17:25:32 举报

前言

最近做了一些移动端的项目,对移动端个方面的知识也有了更多的了解,在刚开始入手移动端项目的时候,碰到最大的难题就是移动端的调试问题,毕竟在pc上只要直接打开chrome检查元素面板就好了,而且在PC上模拟好的元素,在手机上会有很大的不同,所以要找到一个方便在移动端调试的工具变得尤为重要。由于之前试过各种工具,最后发现还是browser-sync使用起来更加的方便

BrowserSync简介

browser-sync是一个十分好用的浏览器同步测试工具,它能监听文件的更改并自动刷新页面,可以架设静态服务器,如果我们有本地服务器,它也支持使用代理的方式。当然,这些调试的设备必须在同一局域网下。

BrowserSync入门

1、安装Node.js(如果你尚未安装的话)
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来查看您的网站。
[quote]// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "*.html"[/quote]
示例:

移动端真机调试工具Browser-sync

如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.css文件
[quote]// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files ".html, css/.css"
// 如果你的文件层级比较深,您可以考虑使用 (表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "
/*.css, */.html"[/quote]
如果还有不明白的,去看一下BrowserSync静态示例的视频

动态网站
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
[quote]// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "*/.html"[/quote]
示例:

移动端真机调试工具Browser-sync
输入地址以后,显示出来的就是百度的首页啦。

4、调试
在手机端输入External的地址,再在浏览器中打开http://localhost:3001,进入到以下页面:

移动端真机调试工具Browser-sync

勾选Remote Debugger,再点击opens in a new tab,跳转至该页面:

移动端真机调试工具Browser-sync

点击Targets下的第一条,也就是最新的。再点击顶部Elements就可以看到页面的dom结构及其样式了

移动端真机调试工具Browser-sync
我们在weinre上审查元素的时候,手机上也会有相应的变化。
这里需要注意的是:待调试页面要先打开,然后再勾选remote debugger,否则是无法获取到页面的元素的,从而就无法调试。

更多关于BrowserSync的介绍以及说明,敬请移步BrowserSync官网BrowserSync中文网

End......

如有不当之处敬请指出

个人gitHub地址:https://github.com/qingtan99

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复