本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前端调试
chrome 开发者工具
Fiddler/charles
抓包工具。
跨平台调试
BrowserSync
能让浏览器实时、快速响应文件更改并刷新页面，可以同时在PC、平板、手机等设备下调试。
$ npm install browser-sync gulp --save-dev
Emmet liveStyle
一个方便调试页面样式的chrome插件。
模拟器
- 安卓模拟器 GenyMotion、Manymo
- 移动端开发调试工具Weinre
- Vorlon.js
前端测试
单元测试
Jasmine
# 创建一个空的应用程序
$ npm init 、
# 安装框架
$ npm install -g jasmine
# 初始化单元测试配置
$ jasmine init
# 生成样例
$ jasmine examples
运行测试
$ Jasmine
Mocha + Chai
# 创建一个空的应用程序
$ npm init
# 安装mocha
$ npm install -g mocha
# 安装chai及chai插件chai-spies
$ npm install chai chai-spies --save-dev
# 运行
$ Mocha
Sinon
sinon是一个用于单元测试的模拟库，需要配合其他单元测试框架使用，比如jasmine。
自动化单元测试
Karma
karma是基于node.js的js测试执行过程管理工具。
# 安装
$ npm install -g karma-cli
# 安装karma包
$ npm install --save-dev karma
# 安装依赖库
$ npm install --save-dev jasmine-core
# 运行
$ karma start
基准测试
基准测试是测量和评估软件性能指标的活动。
Benchmark.js
# 安装 Benchmark.js依赖于lodash和platform
$ npm install --save-dev benchmark
# 运行要测试的代码
$ node index.js
代码覆盖率测试
Istanbul
测试代码覆盖率的四个维度：
- 行覆盖率
- 函数覆盖率
- 分支覆盖率
- 语句覆盖率
# 安装
$ npm install -g Istanbul
# 测试要测试的代码index.js
$ istanbul cover index.js
性能优化
前端常用chrome插件
FE
Vue devtools
JSON-handle
性能优化工具
Yslow
YSlow是一款基于FireFox的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
PageSpeen
page speed是Firefox、Firebug 插件，网站管理员和网络开发人员可以使用来评估他们网页的性能，并获得有关如何改进性能的建议。
WebPagetest
在线的站点性能评测网站，地址www.webpagetest.org/
加载优化
vue的懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
图片懒加载
<div id="app">
<img src="" class="logo" v-lazy="imgLogo">
<div class="bg-company" v-lazy:background-image="imgIcon"></div>
</div>
<script src="../js/lib/vue.js"></script>
<script src="../js/lib/vue-lazyload.js"></script>
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../images/error.png',
loading: '../images/avatar.jpg',
attempt: 1
});
var vm = new Vue({
el: '#app',
data: {
imgLogo: '../images/logo.png',
imgIcon: '../images/icon.png'
}
});
组件懒加载
- 路由中
export default new Router({
routes: [
{
mode: 'history',
path: '/my',
name: 'my',
component: resolve => require(['../page/my/my.vue'], resolve),//懒加载
},
]
})
- 实例中
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},
},
- 全局注册
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})
