拓展

巧用 Chrome 插件

Vue.js devtools 是 Vue 官方发布的一款调试 Vue 项目的插件，支持数据模拟与调试。相信从事过 Vue 项目开发的同学都已经把它收入在自己的工具库中
Vue Performance Devtool 可以分析页面中各个组件的性能情况，从而在其基础上可以有针对性的对组件的代码进行优化。打开 Chrome 控制台选择 Vue Performance 的 tab 进行组件的性能观察。
Web Developer 是一款强大的用于操作网页中各项资源与浏览器的插件，比如一键禁用 JS、编辑 CSS、清除 Cookie 等。虽然说一些功能我们也可以在 Chrome 控制台实现，但其提供的快捷键能够十分方便的让我们在页面中操作某些资源。
Google PageSpeed Insights API Extension 专注于改进网页性能的开发者工具，它主要具有以下两个优势：真实的网页运行速度 及 优化建议。可以直接下载 Chrome 插件 Google PageSpeed Insights API Extension 来对当前访问网址进行测试和分析
FeHelper 是百度 FE 团队开发的一款前端工具集插件，包含代码压缩／性能检测／字符串编解码等功能，能够帮助完成一些琐碎的开发任务
Can I Use 是 https://caniuse.com/ 网页版的插件。可以使用其来查看某一特性的浏览器支持程度，确保主流浏览器的支持

JSONView ：一款可以将后台返回的 JSON 字符串数据自动格式化成规范 JSON 格式的插件
WhatFont：一款可以显示浏览器中选择文字的字体类型／字号／颜色的插件
The QR Code Extension：一款允许当前页面生成二维码，并使用网络摄像头扫描二维码的插件
Wappalyzer：一款查看当前网站使用的前后端技术的插件，帮助学习和认识优秀网站的技术选型
Mobile/Responsive Web Design Tester：一款用于测试页面在不同机型下呈现的插件
Resolution Test：一款用于测试页面在不同分辨率下呈现的插件

分析包文件

推荐使用 webpack-bundle-analyzer webpack 插件来进行包文件的分析。首先作为一款需要内置在代码中的开发分析工具，需要安装并在 webpack 的 plugins 中添加该插件：

shell

#  安装命令
yarn add webpack-bundle-analyzer --dev

javascript

/* vue.config.js */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const isPro = process.env.NODE_ENV === 'production'

module.exports = {

  configureWebpack: config => {
    if (isPro) {
      return {
        plugins: [

          // 使用包分析工具
          new BundleAnalyzerPlugin()
        ]
      }
    }
  },
}

使用好 webpack-bundle-analyzer 工具我们可以快速的找到需要合并的模块，解决文件冗余，为资源优化提供可行性方案。

调试移动端页面

除了 Chrome 插件及打包分析工具的介绍外，我们再来了解下移动端页面的调试工具。相比 PC 端调试，移动端调试可能稍微复杂一点，但是只要熟练的使用好 “工具” 这一东西，我们同样可以在移动端的世界中游刃有余。

作为一名 Mac 及 iOS 用户，这里我主要介绍在 iPhone 手机中调试页面的方法，当然最后也会简单介绍一下 Android 手机页面的调试方法。

准备工具：iPhone 手机一部、数据线一条、Mac 电脑一台。在满足以上要求后需要把手机通过数据线连接上 Mac 电脑，连接完毕后便可以进行如下步骤的设置：

打开苹果手机的 Web 检查器 （设置 > Safari浏览器 > 高级 > Web检查器），一般情况下默认是开启的
打开 Mac 上的 Safari 的 “开发”菜单，一般情况下默认是开启的
在手机 Safari 浏览器中打开你需要调试的页面
在 Mac Safari 浏览器中选择你需要调试的页面（开发 > 你的 iPhone > 你的页面地址）
点击地址后弹出如图所示的控制台，你便可以在该控制台中进行调试

Iconfont 图标库

Iconfont 是阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。设计师将图标上传到 Iconfont 平台，用户可以自定义下载多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

在 Iconfont 首页，点击图标库来进行图标的搜索。进入对应的图标库后，可以选择对应的图标加入购物车，同时购物车会更新添加后的图标数量。

选择完成后，为了使图标便于今后管理，可以新建一个项目并将图标移入项目中。在项目中便可以进行图标的添加、删除和下载等操作。这里采用将图标下载到本地的方式进行使用，当然也可以使用在线链接，但这会受到网络的影响

使用

下载到本地后，需要将文件夹中的 iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf 和 iconfont.woff 文件统一放到项目中去。比如可以放入新建的 assets 文件夹的 iconfont 中去，而 iconfont.css 便是管理这样图标字体的样式文件，可以将其引入到入口文件中：

javascript

/* main.js */

import './assets/iconfont/iconfont.css'

可以在项目中通过给 html 标签添加样式名称的方式来进行图标的使用

html

<!-- App.vue -->
<template>
  <div id="app">
    <router-view/>
    <tabbar>
      <tabbar-item :link="{name: 'demo'}">
        <span slot="icon" class="iconfont icon-bulb"></span>
        <span slot="label">Demo</span>
      </tabbar-item>
      <tabbar-item>
        <span slot="icon" class="iconfont icon-experiment"></span>
        <span slot="label">实验室</span>
      </tabbar-item>
      <tabbar-item>
        <span slot="icon" class="iconfont icon-deploymentunit"></span>
        <span slot="label">关于</span>
      </tabbar-item>
    </tabbar>	
  </div>
</template>

其他图标库

除了 Iconfont，常用的图标库还有：

Font Awesome：世界上最受欢迎且最易于使用的图标集
Ionicons：精美的开源图标库，可以用于Web，iOS，Android和桌面应用程序
Themify：一套用于网页设计和应用程序的完整图标

相信以上这些图标库就足以使你应付所有项目了