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