高小哥漫谈前端
技术咨询、项目合作、广告投放、简历咨询、技术文档下载 点击这里 联系博主

# 开发工具集合

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

# 一、笔记类

# Notion

官网地址：https://www.notion.so/ (opens new window)

http://gaogangsever.cn/blog_tools/1.png

# 有道云笔记

官网地址：http://note.youdao.com/ (opens new window)

http://gaogangsever.cn/blog_tools/48_1.png

# Vuepress

官网地址：https://github.com/vuejs/vuepress (opens new window)

Vue 驱动的静态网站生成器

http://gaogangsever.cn/blog_tools/3.png

# GitBook

官网地址：https://www.gitbook.com/ (opens new window)

GitBook是一个使用 Git 和 Markdown 来构建书籍的工具。它可以将你的书输出很多格式：PDF，ePub，mobi，或者输出为静态网页。

http://gaogangsever.cn/blog_tools/4.png

# 二、图表类

# 甘特图 dhtmlxGantt

官网地址： https://github.com/DHTMLX/gantt (opens new window)

http://gaogangsever.cn/blog_tools/5.png

# echarts

官网地址：https://www.echartsjs.com/zh/index.html (opens new window)

http://gaogangsever.cn/blog_tools/6.png

# F2移动端图表库

官网地址：https://f2.antv.vision/zh (opens new window)

http://gaogangsever.cn/blog_tools/7.png

# 三、开发工具类

# 正则可视化工具

官网地址: https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24 (opens new window)

# VS Code

官网地址：https://code.visualstudio.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/8.png

# Polacode

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

http://gaogangsever.cn/blog_tools/9.png

实际在文章中效果：

http://gaogangsever.cn/blog_tools/10.png

# eruda

官网地址：https://github.com/liriliri/eruda/blob/master/doc/README_CN.md (opens new window)

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

http://gaogangsever.cn/blog_tools/11.png

# majestic

官网地址：https://github.com/Raathigesh/majestic (opens new window)

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

http://gaogangsever.cn/blog_tools/12.png

# image-cropper

官网地址：http://elemefe.github.io/image-cropper/#demo (opens new window)

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

http://gaogangsever.cn/blog_tools/13.png

# terminalizer

官网地址：https://github.com/faressoft/terminalizer (opens new window)

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

https://github.com/faressoft/terminalizer/raw/master/img/demo.gif?raw=true

# Sentry

官网地址：https://sentry.io/welcome/ (opens new window)

Javascript地址：https://github.com/getsentry/sentry-javascript (opens new window)

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

http://gaogangsever.cn/blog_tools/14.png

http://gaogangsever.cn/blog_tools/15.png

# google-access-helper

官网地址：https://github.com/haotian-wang/google-access-helper (opens new window)

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

http://gaogangsever.cn/blog_tools/16.png

# 手机投屏Vysor

官网地址：https://www.vysor.io/ (opens new window)

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

http://gaogangsever.cn/blog_tools/17.png

http://gaogangsever.cn/blog_tools/18.png

# Postman

官网地址：https://www.postman.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/19.png

# Lighthouse

官网地址：https://developers.google.com/web/tools/lighthouse (opens new window)

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

http://gaogangsever.cn/blog_tools/20.png

http://gaogangsever.cn/blog_tools/21.png

# yeoman

官网地址：https://yeoman.io/ (opens new window)

项目脚手架搭建工具

http://gaogangsever.cn/blog_tools/22.png

# Bmob

官网地址：http://doc.bmob.cn/ (opens new window)

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

http://gaogangsever.cn/blog_tools/23.png

# 四、抓包类

# Whistle

官网地址:https://github.com/avwo/whistle/blob/master/README-zh_CN.md (opens new window)

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

http://gaogangsever.cn/blog_tools/24.png

http://gaogangsever.cn/blog_tools/25.png

# Fiddler

官网地址：https://www.telerik.com/fiddler (opens new window)

http://gaogangsever.cn/blog_tools/26.png

# Charles

官网地址：https://www.charlesproxy.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/27.png

# 五、UX类

# iconfont

官网地址：https://www.iconfont.cn/ (opens new window)

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

http://gaogangsever.cn/blog_tools/28.png

# draw.io

官网地址：https://app.diagrams.net/ (opens new window)

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

http://gaogangsever.cn/blog_tools/29.png

# MxGraph

官网地址：https://github.com/jgraph/mxgraph (opens new window)

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

http://gaogangsever.cn/blog_tools/30.png

# Sketch

官网地址：https://www.sketch.com/get/ (opens new window)

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

http://gaogangsever.cn/blog_tools/31.png

# markdown-nice 文章美化

官网地址：https://mdnice.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/32.png

# 图怪兽

官方地址：https://818ps.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/33.png

# Gift制作

在编写文章的时候，很多情况下需要录制gift动图，除开常用的QQ录屏转gift，还推荐一个。此章节参考自：https://juejin.im/post/5e4ca743f265da576b565ee1 (opens new window)

Mac端：

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

http://gaogangsever.cn/blog_tools/34.png

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

http://gaogangsever.cn/blog_tools/35.png

**Windows端**

使用迅捷gift动图

官网地址：https://www2.tianduntech.com/xjgif/index.html (opens new window)

# 公众号Gift动图

官网地址：https://www.gaoding.com/templates?q=GIF动图&from=input (opens new window)

http://gaogangsever.cn/blog_tools/37.png

# 配色方案

知乎地址：https://zhuanlan.zhihu.com/p/27355379

# 六、开源库

# vant

官网地址：https://github.com/youzan/vant (opens new window)

微信小程序组件库：https://youzan.github.io/vant-weapp/#/intro (opens new window)

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

http://gaogangsever.cn/blog_tools/37_1.png

# 常用前端组件库

iview官网地址：https://www.iviewui.com/docs/guide/install (opens new window)

ant-design官网地址：https://ant.design/index-cn (opens new window)

element-ui官网地址：https://element.eleme.cn/#/ (opens new window)

http://gaogangsever.cn/blog_tools/38.png

# animate.css

官网地址：https://github.com/daneden/animate.css (opens new window)

号称最全的css动画库

http://gaogangsever.cn/blog_tools/39.png

# vue-grid-layout

官网地址：https://github.com/jbaysolutions/vue-grid-layout (opens new window)

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

  • 可拖拽
  • 可调整大小
  • 静态部件（不可拖拽、调整大小）
  • 拖拽和调整大小时进行边界检查
  • 增减部件时避免重建栅格
  • 可序列化和还原的布局
  • 自动化 RTL 支持
  • 响应式

http://gaogangsever.cn/blog_tools/40.png

# Vue.Draggable

官网地址：https://github.com/SortableJS/Vue.Draggable (opens new window)

列表拖动最佳选择

http://gaogangsever.cn/blog_tools/41.png

# monaco-editor

官网地址：https://github.com/microsoft/monaco-editor (opens new window)

微软在线代码编辑器

http://gaogangsever.cn/blog_tools/42.png

# electron

官网地址：https://www.electron.build/ (opens new window)

Vue打包地址：https://github.com/nklayman/vue-cli-plugin-electron-builder (opens new window)

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

http://gaogangsever.cn/blog_tools/43.png

# Lodash

官网地址：https://lodash.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/44.png

# Moment.js

官网地址：https://momentjs.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/45.png

# jscodeshift

官网地址：https://github.com/facebook/jscodeshift (opens new window)

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

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

  • recast (opens new window)

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

# Swiper

官网地址：https://swiperjs.com/ (opens new window)

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

http://gaogangsever.cn/blog_tools/46.png

# fullPage

官网地址：https://alvarotrigo.com/fullPage/zh/#page2 (opens new window)

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

http://gaogangsever.cn/blog_tools/47.png

# html2canvas

官网地址：https://github.com/niklasvh/html2canvas (opens new window)

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

http://gaogangsever.cn/blog_tools/48.png

# jstoflowchart

官网地址：https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

将Js代码转换成图片

Edit This Page
【未经作者允许禁止转载】 Last Updated: 2/4/2024, 6:06:40 AM

← 前言 →