Vue 项目构建与开发入门:扩充你的开发工具

目录

巧用 Chrome 插件

Vue.js devtools

Vue Performance Devtool

Postman

Web Developer

Google PageSpeed Insights API Extension

FeHelper

Can I Use

其他实用插件

分析你的包文件

调试移动端页面

1. 打开苹果手机的 Web 检查器 （设置 > Safari浏览器 > 高级 > Web检查器），一般情况下默认是开启的

2. 打开 Mac 上的 Safari 的 “开发”菜单，一般情况下默认是开启的

3. 在手机 Safari 浏览器中打开你需要调试的页面

4. 在 Mac Safari 浏览器中选择你需要调试的页面（开发 > 你的 iPhone > 你的页面地址）

5. 点击地址后弹出如图所示的控制台，你便可以在该控制台中进行调试了

结语

---

在项目开发中，工具的使用起到了至关重要的作用，正所谓工欲善其事，必先利其器，掌握一些实用的开发工具能够使我们的开发效率事半功倍。

那么我们应该掌握哪些开发工具的使用方法呢？其实一路走来，我们已经介绍的开发工具包括了 npm、yarn、webpack 以及一些集成在项目中的工具包，这些工具一定程度上都大大简化了我们的开发流程，起到了项目助推剂的作用。因此在开发工具的学习上我们应该抱着宜多不宜少的心态，积极主动的扩充自己的工具库。

巧用 Chrome 插件

首先，既然说到工具，那我们不得不介绍下占据浏览器市场份额霸主地位的 Chrome 了。相信每一个从事前端开发的同学都对其寄存着一种亲切感，因为只要是参与 web 项目的开发就基本上离不开它的关照，比如它提供的调试控制台以及数以万计的插件等。

而作为一名前端开发人员，我想你的 Chrome 浏览器地址栏右侧肯定排列着几款你钟爱的插件，使用的插件数量越多说明了你掌握的 Chrome 技能越多，同时一定程度上也凸显了你的开发能力。

那么接下来我们不妨来认识一下几款实用的 Chrome 插