《论语·卫灵公》中自贡问为仁。子曰工欲善其事，必先利其器。在日常开发或者写笔记中，我们经常会用到一些小工具辅助我们快速做一些决策，例如 抓包格式化json，快速验证一个正则是否符合预期，测试工具包返回结果（lodash），调研第三方包npm使用率等等。这些场景往往我们只想快速拿到想要的结果，并不想占用太多时间。今天我把收藏夹常用的工具分享一下波，希望能帮到有需要的。
工具篇
1、Regexr 快速帮助你分析、编辑正则表达式的工具
2、Semver 依赖包版本管理
npm semver版本范围计算器，版本格式：主版本号.次版本号.修订号，发包和装包的时候对版本确认时快速查看。
3、Bundlephobia 查看类似npm包和安装包大小分析
Bundlephobia lets you understand the performance cost of
npm installing a new npm package before it becomes a part of your bundle. Analyze size, compositions and exports
- 通过上传package.json分析包大小
- 查询单个包或者类似包
4、AST Explorer ast语法树，前端做编译插件时很好的工具
5、Runkit 在线运行node包，快速验证一些工具返回值很方便，例如lodash
6、Rraw.io 是一款免费的在线图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER图, 网络拓朴图等。
7、Excalidraw 在线画图手写风 有中文版字体 👇
8、Carbon 美丽的代码生成图片工具（是不是很眼熟）
9、Npm Trends npm 多包比较趋势
9.1、Google Trends
9.2、百度指数
10、Statcounter 浏览器、分辨率、版本等使用统计支持bar line map方式查看，到时做兼容和pm掰扯利器
11、Placeholder 图片占位服务 文字大小颜色都可通过url定义
via.placeholder.com/300.png/09f… 展示为：
12、BrowseHappy 检测到浏览器版本低时提示用户下载
13、Logomakr 只要你敢想分分钟帮你实现一个自定义Logo
14、RisingStars 前端变化这么快，来看看社区npm包活跃度，zx 排第一没想到吧。
15、Npms npm包多个纬度分析 综合打分，pick 哪一个一目了然
16、Wxeditor 自己做个svg图吧 关注一波 前端秀
17、Json json抓包分析或者mock还是比较方便
18、阿里矢量图icon 笔记、ppt 等会用到
19、Stateofjs 前端状态分析，可以看看react和vue薪水分布
20、Screensiz 手机 平板 电脑 设备视口尺寸，移动端常用到可以查下。
21、Caniuse 属性兼容，做老项目兼容浏览器会用到
22、Unicode 快速查阅一个字符对应的包括unicode
23、Schemastore 汇聚了很多JsonSchema，例如package.json
24、Patorjk 在线生成ascii字符画
25、Swagger 让接口描述快速实现可视化
26、Quicktype 一键转化json数据到对应编程语言，在本地mock测试环境数据时很方便
27、EventLoop js事件循环可视化，彻底明白宏任务和微任务执行顺序
