阅读 3028

【老妈】效率提升之开发工具

开发工具集合

本文主要分享个人开发中常用的开发工具,有兴趣的同学可以了解一下。

一、笔记类

Notion

官网地址:www.notion.so/

https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb7d2f100?w=978&h=614&f=png&s=24783
https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb7d2f100?w=978&h=614&f=png&s=24783

有道云笔记

官网地址:note.youdao.com/

https://user-gold-cdn.xitu.io/2020/3/31/17130fcdae056474?w=620&h=415&f=png&s=197497
https://user-gold-cdn.xitu.io/2020/3/31/17130fcdae056474?w=620&h=415&f=png&s=197497

Vuepress

官网地址:github.com/vuejs/vuepr…

Vue 驱动的静态网站生成器

https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb7e7da87?w=3584&h=2008&f=png&s=101199
https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb7e7da87?w=3584&h=2008&f=png&s=101199

GitBook

官网地址:www.gitbook.com/

GitBook是一个使用 GitMarkdown 来构建书籍的工具。它可以将你的书输出很多格式:PDFePubmobi,或者输出为静态网页。

https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb733650e?w=1620&h=1197&f=png&s=123925
https://user-gold-cdn.xitu.io/2020/3/31/17130f1eb733650e?w=1620&h=1197&f=png&s=123925

二、图表类

甘特图 dhtmlxGantt

官网地址: github.com/DHTMLX/gant…

https://user-gold-cdn.xitu.io/2020/3/31/17130f1eec5929d1?w=907&h=552&f=png&s=25339
https://user-gold-cdn.xitu.io/2020/3/31/17130f1eec5929d1?w=907&h=552&f=png&s=25339

echarts

官网地址:www.echartsjs.com/zh/index.ht…

https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef0ccc56c?w=2546&h=1117&f=png&s=271949
https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef0ccc56c?w=2546&h=1117&f=png&s=271949

F2移动端图表库

官网地址:f2.antv.vision/zh

https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef15f85ef?w=1466&h=907&f=png&s=35748
https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef15f85ef?w=1466&h=907&f=png&s=35748

三、开发工具类

VS Code

官网地址:code.visualstudio.com/

简直不要太香,笔者不管写js/java/python等都使用的此代码编辑器。

https://user-gold-cdn.xitu.io/2020/3/31/17130f1f1dd84d8a?w=708&h=452&f=png&s=57990
https://user-gold-cdn.xitu.io/2020/3/31/17130f1f1dd84d8a?w=708&h=452&f=png&s=57990

Polacode

一个vscode的插件,主要将代码美化(将代码变成图片),如果有经常写博客或者文章的同学肯定对它爱不释手。建议安装使用ploacode-2019

https://user-gold-cdn.xitu.io/2020/3/31/17130f1f2549264b?w=3310&h=990&f=png&s=56266
https://user-gold-cdn.xitu.io/2020/3/31/17130f1f2549264b?w=3310&h=990&f=png&s=56266

实际在文章中效果:

https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef4b8140b?w=1664&h=490&f=png&s=27727
https://user-gold-cdn.xitu.io/2020/3/31/17130f1ef4b8140b?w=1664&h=490&f=png&s=27727

eruda

官网地址:github.com/liriliri/er…

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。

https://user-gold-cdn.xitu.io/2020/3/31/17130f1f2e6aad60?w=1124&h=500&f=png&s=502764
https://user-gold-cdn.xitu.io/2020/3/31/17130f1f2e6aad60?w=1124&h=500&f=png&s=502764

majestic

官网地址:github.com/Raathigesh/…

浏览器中显示单元测试结果和代码覆盖率

https://user-gold-cdn.xitu.io/2020/3/31/17130f1f5f46f711?w=1500&h=1300&f=png&s=76134
https://user-gold-cdn.xitu.io/2020/3/31/17130f1f5f46f711?w=1500&h=1300&f=png&s=76134

image-cropper

官网地址:elemefe.github.io/image-cropp…

图片剪裁工具,Image Cropper可以为图片显示一个裁剪框,裁剪框允许用户调整大小和位置,常用来做用户自定义头像的裁剪功能。 目前Image Cropper的实现是无依赖的,浏览器支持到IE8+。Image Cropper可以和Angular一块使用,也可以独立使用。

https://user-gold-cdn.xitu.io/2020/3/31/17130f1f7e90e545?w=2752&h=1824&f=png&s=144917
https://user-gold-cdn.xitu.io/2020/3/31/17130f1f7e90e545?w=2752&h=1824&f=png&s=144917

terminalizer

官网地址:github.com/faressoft/t…

记录终端输入,并输出为gift动图,常用在写博客时展示工程安装过程或者使用场景。

https://user-gold-cdn.xitu.io/2020/3/31/17130f204349aa87?w=1776&h=764&f=gif&s=1010491
https://user-gold-cdn.xitu.io/2020/3/31/17130f204349aa87?w=1776&h=764&f=gif&s=1010491

Sentry

官网地址:sentry.io/welcome/

Javascript地址:github.com/getsentry/s…

一个js/Android/IOS的开源的错误监控平台,讲真十分好用。

https://user-gold-cdn.xitu.io/2020/3/31/17130f1fdc4ae43e?w=2128&h=1694&f=png&s=128457
https://user-gold-cdn.xitu.io/2020/3/31/17130f1fdc4ae43e?w=2128&h=1694&f=png&s=128457
https://user-gold-cdn.xitu.io/2020/3/31/17130f1fddac53c4?w=3548&h=1658&f=png&s=166745
https://user-gold-cdn.xitu.io/2020/3/31/17130f1fddac53c4?w=3548&h=1658&f=png&s=166745

google-access-helper

官网地址:github.com/haotian-wan…

科学工具,最简单易用的谷歌访问助手,为chrome扩展用户量身打造。可以解决chrome扩展无法自动更新的问题,同时可以访问谷歌google搜索,gmail邮箱,google+等谷歌服务。

https://user-gold-cdn.xitu.io/2020/3/31/17130f20147d29ea?w=1910&h=928&f=png&s=49251
https://user-gold-cdn.xitu.io/2020/3/31/17130f20147d29ea?w=1910&h=928&f=png&s=49251

手机投屏Vysor

官网地址:www.vysor.io/

一个使用手机投屏到电脑的神器,建议安装Google的vysor插件。

https://user-gold-cdn.xitu.io/2020/3/31/17130f2030861c10?w=1816&h=1299&f=png&s=666013
https://user-gold-cdn.xitu.io/2020/3/31/17130f2030861c10?w=1816&h=1299&f=png&s=666013
https://user-gold-cdn.xitu.io/2020/3/31/17130f2053da57f2?w=1082&h=389&f=png&s=11199
https://user-gold-cdn.xitu.io/2020/3/31/17130f2053da57f2?w=1082&h=389&f=png&s=11199

Postman

官网地址:www.postman.com/

相信这个工具大部分的同学都使用过,调试后端接口神器。建议安装google插件版本

https://user-gold-cdn.xitu.io/2020/3/31/17130f2062d94896?w=2547&h=793&f=png&s=21485
https://user-gold-cdn.xitu.io/2020/3/31/17130f2062d94896?w=2547&h=793&f=png&s=21485

Lighthouse

官网地址:developers.google.com/web/tools/l…

Google出品必属精品,一个前端性能优化工具。一键检测出网站性能。可以通过Npm的方式或者使用Google插件的方式安装

https://user-gold-cdn.xitu.io/2020/3/31/17130f209b7f42ce?w=895&h=484&f=png&s=13468
https://user-gold-cdn.xitu.io/2020/3/31/17130f209b7f42ce?w=895&h=484&f=png&s=13468
https://user-gold-cdn.xitu.io/2020/3/31/17130f20a723e462?w=1115&h=1323&f=png&s=46259
https://user-gold-cdn.xitu.io/2020/3/31/17130f20a723e462?w=1115&h=1323&f=png&s=46259

yeoman

官网地址:yeoman.io/

项目脚手架搭建工具

https://user-gold-cdn.xitu.io/2020/3/31/17130f20bd65dfe5?w=2130&h=1546&f=png&s=60119
https://user-gold-cdn.xitu.io/2020/3/31/17130f20bd65dfe5?w=2130&h=1546&f=png&s=60119

Bmob

官网地址:doc.bmob.cn/

如果你不想通过java/node的方式编写后端服务,或者说只想拥有一个后端服务做存储,bmob可以帮助开发者免去大部分的服务器端编码的工作量,成倍降低开发成本和开发时间。

https://user-gold-cdn.xitu.io/2020/3/31/17130f20c0853da9?w=1716&h=1233&f=png&s=49164
https://user-gold-cdn.xitu.io/2020/3/31/17130f20c0853da9?w=1716&h=1233&f=png&s=49164

四、抓包类

Whistle

官网地址:github.com/avwo/whistl…

如果你使用了whistle,你会对它爱不释手的,啥mock,啥跨域统统解决。

https://user-gold-cdn.xitu.io/2020/3/31/17130f2103eca98c?w=1829&h=1725&f=png&s=128538
https://user-gold-cdn.xitu.io/2020/3/31/17130f2103eca98c?w=1829&h=1725&f=png&s=128538
https://user-gold-cdn.xitu.io/2020/3/31/17130f210a26fc05?w=908&h=460&f=png&s=57350
https://user-gold-cdn.xitu.io/2020/3/31/17130f210a26fc05?w=908&h=460&f=png&s=57350

Fiddler

官网地址:www.telerik.com/fiddler

https://user-gold-cdn.xitu.io/2020/3/31/17130f2115567040?w=867&h=567&f=png&s=31808
https://user-gold-cdn.xitu.io/2020/3/31/17130f2115567040?w=867&h=567&f=png&s=31808

Charles

官网地址:www.charlesproxy.com/

Charles是一款非常优秀的抓包神器。通过这款软件可以帮助用户方便地进行抓包,它可以轻松记录浏览器和Internet之间的所有流量,是非常专业并基于java开发网络http抓包工具软件

https://user-gold-cdn.xitu.io/2020/3/31/17130f2165dedcf7?w=550&h=426&f=png&s=28943
https://user-gold-cdn.xitu.io/2020/3/31/17130f2165dedcf7?w=550&h=426&f=png&s=28943

五、UX类

iconfont

官网地址:www.iconfont.cn/

阿里巴巴旗下的icon平台,简直不要太好用

https://user-gold-cdn.xitu.io/2020/3/31/17130f217eeb5f9c?w=3380&h=1958&f=png&s=86912
https://user-gold-cdn.xitu.io/2020/3/31/17130f217eeb5f9c?w=3380&h=1958&f=png&s=86912

draw.io

官网地址:app.diagrams.net/

我几乎所有的流程图,架构图都在上面画的,支持浏览器端,mac, windows端,以及浏览器应用程序。

https://user-gold-cdn.xitu.io/2020/3/31/17130f218112a2d1?w=2551&h=1219&f=png&s=41338
https://user-gold-cdn.xitu.io/2020/3/31/17130f218112a2d1?w=2551&h=1219&f=png&s=41338

MxGraph

官网地址:github.com/jgraph/mxgr…

上面的draw.io就是基于mxgraph开发的哦,mxgraph绘图的主要方式是svg画图 。

https://user-gold-cdn.xitu.io/2020/3/31/17130f21856841c4?w=3584&h=1866&f=png&s=70459
https://user-gold-cdn.xitu.io/2020/3/31/17130f21856841c4?w=3584&h=1866&f=png&s=70459

Sketch

官网地址:www.sketch.com/get/

似乎Sketch以及成为大多数企业做UX的标配了哦。

https://user-gold-cdn.xitu.io/2020/3/31/17130f21c8130967?w=1137&h=766&f=png&s=64240
https://user-gold-cdn.xitu.io/2020/3/31/17130f21c8130967?w=1137&h=766&f=png&s=64240

markdown-nice 文章美化

官网地址:mdnice.com/

笔者的所有文章都是使用此美化工具美化的哦,支持掘金,知乎,微信公众号直接复制。(众所周知微信公共号对代码片段支出不友好)

https://user-gold-cdn.xitu.io/2020/3/31/17130f21d018b1d8?w=3584&h=1996&f=png&s=275219
https://user-gold-cdn.xitu.io/2020/3/31/17130f21d018b1d8?w=3584&h=1996&f=png&s=275219

图怪兽

官方地址:818ps.com/

图怪兽里面有狠毒免费的图片可以供我们使用,很多微信公众号的封面大图都是使用图怪兽剪切的哦。

https://user-gold-cdn.xitu.io/2020/3/31/17130f21d56f5c45?w=3584&h=1840&f=png&s=880199
https://user-gold-cdn.xitu.io/2020/3/31/17130f21d56f5c45?w=3584&h=1840&f=png&s=880199

Gift制作

在编写文章的时候,很多情况下需要录制gift动图,除开常用的QQ录屏转gift,还推荐一个。此章节参考自:juejin.im/post/5e4ca7…

Mac端:

1、使用电脑本身的屏幕快照来进行屏幕录制,录制的文件为mov格式的视频

https://user-gold-cdn.xitu.io/2020/3/31/17130f21dc561565?w=1884&h=686&f=png&s=192368
https://user-gold-cdn.xitu.io/2020/3/31/17130f21dc561565?w=1884&h=686&f=png&s=192368

2、在AppStore中下载并安装PicGif Lite, 然后在这里面将前面录制好的mov视频转成GIF动图

https://user-gold-cdn.xitu.io/2020/3/31/17130f21f3e82981?w=1280&h=922&f=png&s=109758
https://user-gold-cdn.xitu.io/2020/3/31/17130f21f3e82981?w=1280&h=922&f=png&s=109758

**Windows端**

使用迅捷gift动图

官网地址:www2.tianduntech.com/xjgif/index…

公众号Gift动图

官网地址:www.gaoding.com/templates?q…

https://user-gold-cdn.xitu.io/2020/3/31/17130f2205beac59?w=3512&h=1880&f=png&s=537055
https://user-gold-cdn.xitu.io/2020/3/31/17130f2205beac59?w=3512&h=1880&f=png&s=537055

六、开源库

vant

官网地址:github.com/youzan/vant

微信小程序组件库:youzan.github.io/vant-weapp/…

有赞开源的一个移动端Vue组件库,也有对应的微信小程序组件库。

https://user-gold-cdn.xitu.io/2020/3/31/17130f22a37748cb?w=3432&h=1880&f=png&s=95855
https://user-gold-cdn.xitu.io/2020/3/31/17130f22a37748cb?w=3432&h=1880&f=png&s=95855

常用前端组件库

iview官网地址:www.iviewui.com/docs/guide/…

ant-design官网地址:ant.design/index-cn

element-ui官网地址:element.eleme.cn/#/

https://user-gold-cdn.xitu.io/2020/3/31/17130f230d78b1d9?w=2427&h=1311&f=png&s=88306
https://user-gold-cdn.xitu.io/2020/3/31/17130f230d78b1d9?w=2427&h=1311&f=png&s=88306

animate.css

官网地址:github.com/daneden/ani…

号称最全的css动画库

https://user-gold-cdn.xitu.io/2020/3/31/17130f2320bdffba?w=1652&h=1154&f=png&s=26651
https://user-gold-cdn.xitu.io/2020/3/31/17130f2320bdffba?w=1652&h=1154&f=png&s=26651

vue-grid-layout

官网地址:github.com/jbaysolutio…

vue-grid-layout 是一个类似于gridster的栅格布局系统, 适用于 Vue.js。

  • 可拖拽
  • 可调整大小
  • 静态部件(不可拖拽、调整大小)
  • 拖拽和调整大小时进行边界检查
  • 增减部件时避免重建栅格
  • 可序列化和还原的布局
  • 自动化 RTL 支持
  • 响应式
https://user-gold-cdn.xitu.io/2020/3/31/17130f2360b32a60?w=3584&h=1858&f=png&s=60123
https://user-gold-cdn.xitu.io/2020/3/31/17130f2360b32a60?w=3584&h=1858&f=png&s=60123

Vue.Draggable

官网地址:github.com/SortableJS/…

列表拖动最佳选择

https://user-gold-cdn.xitu.io/2020/3/31/17130f2367612b3f?w=1802&h=1384&f=png&s=67109
https://user-gold-cdn.xitu.io/2020/3/31/17130f2367612b3f?w=1802&h=1384&f=png&s=67109

monaco-editor

官网地址:github.com/microsoft/m…

微软在线代码编辑器

https://user-gold-cdn.xitu.io/2020/3/31/17130f236e0bd54c?w=2500&h=1142&f=png&s=82586
https://user-gold-cdn.xitu.io/2020/3/31/17130f236e0bd54c?w=2500&h=1142&f=png&s=82586

electron

官网地址:www.electron.build/

Vue打包地址:github.com/nklayman/vu…

将前端代码打包成Mac/windows/Linux程序的最佳神器

https://user-gold-cdn.xitu.io/2020/3/31/17130f23704dd408?w=1948&h=1626&f=png&s=144554
https://user-gold-cdn.xitu.io/2020/3/31/17130f23704dd408?w=1948&h=1626&f=png&s=144554

Lodash

官网地址:lodash.com/

相比这个众所周知了,一套工具库,内部封装了字符串、数组、对象等常见数据类型的处理函数。

https://user-gold-cdn.xitu.io/2020/3/31/17130f2387a21291?w=3584&h=1734&f=png&s=82438
https://user-gold-cdn.xitu.io/2020/3/31/17130f2387a21291?w=3584&h=1734&f=png&s=82438

Moment.js

官网地址:momentjs.com/

一个时间处理工具,包括时间格式化,多语言,转换等

https://user-gold-cdn.xitu.io/2020/3/31/17130f23ee1ee220?w=3226&h=2044&f=png&s=168388
https://user-gold-cdn.xitu.io/2020/3/31/17130f23ee1ee220?w=3226&h=2044&f=png&s=168388

jscodeshift

官网地址:github.com/facebook/js…

jscodeshift是一个工具包,用于在多个JavaScript或TypeScript文件上运行codemods。它提供:

  • 运行程序,对传递给它的每个文件执行提供的转换。它还输出有关已转换(未转换)多少文件的摘要。

  • recast

    的包装器,提供了不同的API。重铸是AST到AST的转换工具,还尝试尽可能保留原始代码的样式。

Swiper

官网地址:swiperjs.com/

移动端触摸滚动,比如轮播图,上下滚动

https://user-gold-cdn.xitu.io/2020/3/31/17130f24292147d3?w=3584&h=1004&f=png&s=47643
https://user-gold-cdn.xitu.io/2020/3/31/17130f24292147d3?w=3584&h=1004&f=png&s=47643

fullPage

官网地址:alvarotrigo.com/fullPage/zh…

一个全屏滚动的工具库,去官网试一试,贼好看,则顺滑。

https://user-gold-cdn.xitu.io/2020/3/31/17130f23fbe78ea0?w=3584&h=1822&f=png&s=45041
https://user-gold-cdn.xitu.io/2020/3/31/17130f23fbe78ea0?w=3584&h=1822&f=png&s=45041

html2canvas

官网地址:github.com/niklasvh/ht…

将HTML dom节点转换成图片的超实用开源库。

https://user-gold-cdn.xitu.io/2020/3/31/17130f243ff43f40?w=1942&h=640&f=png&s=48967
https://user-gold-cdn.xitu.io/2020/3/31/17130f243ff43f40?w=1942&h=640&f=png&s=48967

本文使用 mdnice 排版

jstoflowchart

官网地址:github.com/Bogdan-Lyas…

将Js代码转换成图片。

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart/raw/master/docs/live-editor/demo.gif
https://user-gold-cdn.xitu.io/2020/4/2/1713a38cef76e5fc?w=1156&h=646&f=gif&s=4263900

欢迎关注我的公众号,每天定时推送前端相关知识

关注下面的标签,发现更多相似文章
评论