前端学习（七）页面编写——调试插件browser-sync

上一篇学习了入门的知识，但是发现调试UI组件的位置很麻烦，所以就查资料，看看有没有高效一点的方法。现在找到一些相关的方法，记录一下

选用Chrome浏览器

目前程序员开发最合适的浏览器可能还是谷歌浏览器，所以先把webstorm的more启动浏览器调整为谷歌浏览器，在setting-tools-web Browsers

安装browser-sync

该插件可以自动刷新项目修改的到网页，无需手动刷新页面，方便我们调试页面

安装

npm install  browser-sync -g

修改配置

在项目的package.json文件中，找到“scripts”，在其下面添加““watch”: “browser-sync start --proxy ‘localhost:8080’ --files ‘**/*.vue’””，如下：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "browser-sync start --proxy 'localhost:8080' --files '**/*.vue'"
  },

这里要注意：

1. 我们项目默认是使用8080端口，如果不是使用这个端口，那么这里也要记得改。
2. –files后面是要监听的文件，如果要增加，就用逗号分隔。

使用

网上很多关于这个的资料，但多数讲的不对，可能是版本更新了的原因，最后终于查到，启动步骤如下：

1. 按照正常方式先启动项目，即保证localhost:8080能正常访问我们的网页
2. 然后在项目里使用“npm run watch”去启动browser-sync，具体到webstorm就可以用terminal去执行该命令
   
3. 然后他一般会自动弹出页面“localhost:3000”，和8080一个效果，以后就在这个界面去调试，有双屏的话这个效果就很好了。还有在电脑端，移动端一起调试的时候，效果也很不错。

测试效果

我们按照步骤启动网页后，就基于我们之前的登录界面，我们在”登录”那个button那里，将“登录”两个字改为“”登录1”，然后可以看到网页中直接就变化了，不需要我们刷新网页。同理以后我们调试控件的大小和位置的时候，就方便多了。