开发工具集合
本文主要分享个人开发中常用的开发工具，有兴趣的同学可以了解一下。
一、笔记类
Notion
官网地址：www.notion.so/
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb7d2f100~tplv-t2oaga2asx-image.image
有道云笔记
官网地址：note.youdao.com/
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130fcdae056474~tplv-t2oaga2asx-image.image
Vuepress
官网地址：github.com/vuejs/vuepr…
Vue 驱动的静态网站生成器
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb7e7da87~tplv-t2oaga2asx-image.image
GitBook
官网地址：www.gitbook.com/
GitBook是一个使用 Git 和 Markdown 来构建书籍的工具。它可以将你的书输出很多格式：PDF，ePub，mobi，或者输出为静态网页。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eb733650e~tplv-t2oaga2asx-image.image
二、图表类
甘特图 dhtmlxGantt
官网地址： github.com/DHTMLX/gant…
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1eec5929d1~tplv-t2oaga2asx-image.image
echarts
官网地址：www.echartsjs.com/zh/index.ht…
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef0ccc56c~tplv-t2oaga2asx-image.image
F2移动端图表库
官网地址：f2.antv.vision/zh
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef15f85ef~tplv-t2oaga2asx-image.image
三、开发工具类
VS Code
官网地址：code.visualstudio.com/
简直不要太香，笔者不管写js/java/python等都使用的此代码编辑器。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f1dd84d8a~tplv-t2oaga2asx-image.image
Polacode
一个vscode的插件，主要将代码美化（将代码变成图片），如果有经常写博客或者文章的同学肯定对它爱不释手。建议安装使用ploacode-2019
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f2549264b~tplv-t2oaga2asx-image.image
实际在文章中效果：
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1ef4b8140b~tplv-t2oaga2asx-image.image
eruda
官网地址：github.com/liriliri/er…
Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f2e6aad60~tplv-t2oaga2asx-image.image
majestic
官网地址：github.com/Raathigesh/…
浏览器中显示单元测试结果和代码覆盖率
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f5f46f711~tplv-t2oaga2asx-image.image
image-cropper
官网地址：elemefe.github.io/image-cropp…
图片剪裁工具，Image Cropper可以为图片显示一个裁剪框，裁剪框允许用户调整大小和位置，常用来做用户自定义头像的裁剪功能。
目前Image Cropper的实现是无依赖的，浏览器支持到IE8+。Image Cropper可以和Angular一块使用，也可以独立使用。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1f7e90e545~tplv-t2oaga2asx-image.image
terminalizer
官网地址：github.com/faressoft/t…
记录终端输入，并输出为gift动图，常用在写博客时展示工程安装过程或者使用场景。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f204349aa87~tplv-t2oaga2asx-image.image
Sentry
官网地址：sentry.io/welcome/
Javascript地址：github.com/getsentry/s…
一个js/Android/IOS的开源的错误监控平台，讲真十分好用。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1fdc4ae43e~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f1fddac53c4~tplv-t2oaga2asx-image.image
google-access-helper
官网地址：github.com/haotian-wan…
科学工具，最简单易用的谷歌访问助手,为chrome扩展用户量身打造。可以解决chrome扩展无法自动更新的问题，同时可以访问谷歌google搜索，gmail邮箱，google+等谷歌服务。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20147d29ea~tplv-t2oaga2asx-image.image
手机投屏Vysor
官网地址：www.vysor.io/
一个使用手机投屏到电脑的神器，建议安装Google的vysor插件。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2030861c10~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2053da57f2~tplv-t2oaga2asx-image.image
Postman
官网地址：www.postman.com/
相信这个工具大部分的同学都使用过，调试后端接口神器。建议安装google插件版本
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2062d94896~tplv-t2oaga2asx-image.image
Lighthouse
官网地址：developers.google.com/web/tools/l…
Google出品必属精品，一个前端性能优化工具。一键检测出网站性能。可以通过Npm的方式或者使用Google插件的方式安装
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f209b7f42ce~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20a723e462~tplv-t2oaga2asx-image.image
yeoman
官网地址：yeoman.io/
项目脚手架搭建工具
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20bd65dfe5~tplv-t2oaga2asx-image.image
Bmob
官网地址：doc.bmob.cn/
如果你不想通过java/node的方式编写后端服务，或者说只想拥有一个后端服务做存储，bmob可以帮助开发者免去大部分的服务器端编码的工作量，成倍降低开发成本和开发时间。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f20c0853da9~tplv-t2oaga2asx-image.image
四、抓包类
Whistle
官网地址:github.com/avwo/whistl…
如果你使用了whistle，你会对它爱不释手的，啥mock，啥跨域统统解决。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2103eca98c~tplv-t2oaga2asx-image.image
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f210a26fc05~tplv-t2oaga2asx-image.image
Fiddler
官网地址：www.telerik.com/fiddler
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2115567040~tplv-t2oaga2asx-image.image
Charles
官网地址：www.charlesproxy.com/
Charles是一款非常优秀的抓包神器。通过这款软件可以帮助用户方便地进行抓包，它可以轻松记录浏览器和Internet之间的所有流量，是非常专业并基于java开发网络http抓包工具软件
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2165dedcf7~tplv-t2oaga2asx-image.image
五、UX类
iconfont
官网地址：www.iconfont.cn/
阿里巴巴旗下的icon平台，简直不要太好用
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f217eeb5f9c~tplv-t2oaga2asx-image.image
draw.io
官网地址：app.diagrams.net/
我几乎所有的流程图，架构图都在上面画的，支持浏览器端，mac, windows端，以及浏览器应用程序。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f218112a2d1~tplv-t2oaga2asx-image.image
MxGraph
官网地址：github.com/jgraph/mxgr…
上面的draw.io就是基于mxgraph开发的哦，mxgraph绘图的主要方式是svg画图 。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21856841c4~tplv-t2oaga2asx-image.image
Sketch
官网地址：www.sketch.com/get/
似乎Sketch以及成为大多数企业做UX的标配了哦。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21c8130967~tplv-t2oaga2asx-image.image
markdown-nice 文章美化
官网地址：mdnice.com/
笔者的所有文章都是使用此美化工具美化的哦，支持掘金，知乎，微信公众号直接复制。（众所周知微信公共号对代码片段支出不友好）
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21d018b1d8~tplv-t2oaga2asx-image.image
图怪兽
官方地址：818ps.com/
图怪兽里面有狠毒免费的图片可以供我们使用，很多微信公众号的封面大图都是使用图怪兽剪切的哦。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21d56f5c45~tplv-t2oaga2asx-image.image
Gift制作
在编写文章的时候，很多情况下需要录制gift动图，除开常用的QQ录屏转gift，还推荐一个。此章节参考自：juejin.cn/post/684490…
Mac端：
1、使用电脑本身的屏幕快照来进行屏幕录制，录制的文件为mov格式的视频
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21dc561565~tplv-t2oaga2asx-image.image
2、在AppStore中下载并安装PicGif Lite, 然后在这里面将前面录制好的mov视频转成GIF动图
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f21f3e82981~tplv-t2oaga2asx-image.image
**Windows端**
使用迅捷gift动图
官网地址：www2.tianduntech.com/xjgif/index…
公众号Gift动图
官网地址：www.gaoding.com/templates?q…
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2205beac59~tplv-t2oaga2asx-image.image
六、开源库
vant
官网地址：github.com/youzan/vant
微信小程序组件库：youzan.github.io/vant-weapp/…
有赞开源的一个移动端Vue组件库，也有对应的微信小程序组件库。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f22a37748cb~tplv-t2oaga2asx-image.image
常用前端组件库
iview官网地址：www.iviewui.com/docs/guide/…
ant-design官网地址：ant.design/index-cn
element-ui官网地址：element.eleme.cn/#/
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f230d78b1d9~tplv-t2oaga2asx-image.image
animate.css
官网地址：github.com/daneden/ani…
号称最全的css动画库
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2320bdffba~tplv-t2oaga2asx-image.image
vue-grid-layout
官网地址：github.com/jbaysolutio…
vue-grid-layout 是一个类似于gridster的栅格布局系统, 适用于 Vue.js。
- 可拖拽
- 可调整大小
- 静态部件（不可拖拽、调整大小）
- 拖拽和调整大小时进行边界检查
- 增减部件时避免重建栅格
- 可序列化和还原的布局
- 自动化 RTL 支持
- 响应式
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2360b32a60~tplv-t2oaga2asx-image.image
Vue.Draggable
官网地址：github.com/SortableJS/…
列表拖动最佳选择
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2367612b3f~tplv-t2oaga2asx-image.image
monaco-editor
官网地址：github.com/microsoft/m…
微软在线代码编辑器
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f236e0bd54c~tplv-t2oaga2asx-image.image
electron
官网地址：www.electron.build/
Vue打包地址：github.com/nklayman/vu…
将前端代码打包成Mac/windows/Linux程序的最佳神器
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23704dd408~tplv-t2oaga2asx-image.image
Lodash
官网地址：lodash.com/
相比这个众所周知了，一套工具库，内部封装了字符串、数组、对象等常见数据类型的处理函数。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f2387a21291~tplv-t2oaga2asx-image.image
Moment.js
官网地址：momentjs.com/
一个时间处理工具，包括时间格式化，多语言，转换等
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23ee1ee220~tplv-t2oaga2asx-image.image
jscodeshift
官网地址：github.com/facebook/js…
jscodeshift是一个工具包，用于在多个JavaScript或TypeScript文件上运行codemods。它提供：
Swiper
官网地址：swiperjs.com/
移动端触摸滚动，比如轮播图，上下滚动
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f24292147d3~tplv-t2oaga2asx-image.image
fullPage
官网地址：alvarotrigo.com/fullPage/zh…
一个全屏滚动的工具库，去官网试一试，贼好看，则顺滑。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f23fbe78ea0~tplv-t2oaga2asx-image.image
html2canvas
官网地址：github.com/niklasvh/ht…
将HTML dom节点转换成图片的超实用开源库。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/31/17130f243ff43f40~tplv-t2oaga2asx-image.image
本文使用 mdnice 排版
jstoflowchart
官网地址：github.com/Bogdan-Lyas…
将Js代码转换成图片。
https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/2/1713a38cef76e5fc~tplv-t2oaga2asx-image.image
欢迎关注我的公众号，每天定时推送前端相关知识
