工欲善其事，必先利其器。
以前学习一门新语言、新工具常常耗费非常多的时间精力，后来我就发现，不论工作学习，找到好的工具总是能事半功倍。我之前学习正则表达式时十分痛苦，面对各种长达几十节、几小时的视频课程，每次学习都会半途而废。后来偶然发现了一个神仙网站，跟着教程练习，一个下午不到两小时我就掌握了 JS 正则表达式。从那时我就意识到，如果学习一门新知识的过程很痛苦，那一定是我找的学习资源有问题，可以适当多去搜寻一下，而不是硬着头皮上。从此我就有了收藏优秀学习资源和工具的爱好，搜罗了一堆好玩、高效的前端开发工具，帮助我高效地学习和更好地完成工作。
接下来和大家分享下我的一些珍藏。
一、网站篇
1.在线正则学习网站
编程胶囊是一个在线学习正则表达式的平台，通过丰富的案例手把手教你正则匹配规则，由浅入深，循序渐进。非常适合新手入门，两小时就能让你学会 JS 正则表达式，没开玩笑！跟着课程走就能在两小时内完全掌握，我当时也就花了两三个小时，有经验的可能也就个把小时。我还根据这个网站的教程写了一篇正则入门，知识体系更加完善：两小时学会 JS 正则表达式，终身不忘。
如果你想验证自己的正则是否正确时就可以打开这个网站，他允许你编写正则表达式并进行用例测试。
2.Easy Mock 在线接口服务
后端写接口磨磨蹭蹭？自己 mock 数据又麻烦？也不想用 json-server 或者 node 启动本地服务调试？那这个网站或许适合你，先拿到和后端商量好的数据格式及字段，然后在 Easy Mock 上定义对应的接口和数据，你可以使用 mockjs 语法生成随机数据，也可以使用静态数据。在你需要批量化的假数据填充表格的时候，这个工具非常有用。还可以结合 mockjs 语法进行函数编写，使用函数接收入参并控制返回数据。
更多用法大家可以自行探索。
3.JSON 在线工具
一个功能非常丰富的 JSON 在线工具网站，可以在线格式化 JSON 字符串，在线进行代码对比，能做非常多你想得到想不到的事 —— 它还可以在线运行 C++、C、Java 等语言代码，还可以压缩图片，IP 查询等，简直就是万能百宝箱。
4.在线打字练习
如果你还在为打字不快而烦恼，想要练习却又无从下手，现在好了，下面两个打字练习网站可以帮助你练习正确的打字姿势，快速记住键位，进行多样化的打字练习。
帮助你快速熟悉键位。
在这里你可以进行键位练习、打字比赛、打字排行、打字游戏。海量文章古诗随意挑选进行练习，是综合功能最全、最好用的免费打字网站之一。
5.其他优秀的前端学习网站
二、工具篇
1.抓包工具 Proxyman
不了解抓包工具的童鞋还不知道抓包工具的强大。简单举个例子：
- 你们公司开发的系统部署给客户了，现场交付的同学给你说系统出现了故障，接口似乎出错了
- 但是用户是内网环境，各种各样的原因你又没办法远程或者
vpn连接客户的电脑排查问题 - 此时你又必须要查看接口具体是入参错误还是接口调用错误，必须得有接口信息你才能排查
怎么办？此时你需要先知道一个东西，HTTP 存档：HAR。
HAR（HTTP 存档 ） 规范定义了 HTTP 事务的存档格式，是多种 HTTP 会话工具用来导出所记录数据的 一种文件格式，Web 浏览器可以使用该格式导出有关其加载的网页的详细性能数据。
在浏览器接口列表里右键某个接口，会出现以下选项：
点击保存为 HAR，浏览器会为你将当前页的所有接口保存为一个 HAR 包。此时你可以让客户现场的同学将报错的接口保存为 HAR 包并发送给你，你可以使用类似 Proxyman 的抓包工具打开，来看看打开的效果：
和浏览器的 Network 界面是几乎一模一样的，这时候你就可以尽情排查问题，而不再因为 vpn、远程无法连接客户电脑而焦虑了。
当然了，抓包工具有很多，这里介绍 Proxyman 是因为它的 UI 界面简洁优美。还有就是抓包工具的用法不仅仅是这个，这只是一个比较基础的应用，更多用法这里不再赘述，以后有机会开专题来说说抓包工具的问题。
2.vscode 接口测试插件
我们在开发测试接口时一般会使用 Postman 等接口调试工具测试，需要设置 URL、token、headers 等，但是对于前端来说，我们可能只关心这个接口的入参还有返回值，不想去配置那么多东西，或者不想用 Postman 但又需要测试接口，有时候可能是不停地去页面点击或者刷新页面发起请求，这时候就会很麻烦。那这里有一个简单场景下的接口测试工具，适合使用 vscode 开发的同学。
先在 vscode 插件市场下载这个插件。使用方法的话，以我掘金的个人主页的接口为例，给大家演示下。
第一步，我们需要新建一个以 .http 为后缀的文件，例如 test.http；
第二步，定义请求方法和 URL：
第三步，我们需要将浏览器里的接口请求头都复制过来，在 URL 后空一行，将请求头粘贴进去：
第四步，点击 send request：
第五步，查看响应结果：
在接口不是特殊的情况下，比如传文件什么的，就可以使用这个插件来进行测试调试，简单的 5 步配置就可以快速测试接口，而不必再下载额外的接口测试软件。
3.vscode 数据库可视化连接插件
前端写 node 服务时，需要下载一些数据库可视化连接工具，例如 Navicat，然后一些软件你可能还得去搞破解版。但如果你不想这么麻烦，就可以下载这个 vscode 插件：
然后就会在 vscode 左侧生成两个图标，上面一个表示关系型，下面一个表示非关系型。你可以连接你的本地数据库服务，进行开发调试：
这样也能节约很多开发时间，而不必下载、破解各种数据库连接工具。
4.macOS 超强笔记软件：Yank note
强大！免费！
这就是我对它的总结，我用过各种各样的笔记软件，有的需要翻墙，有的排版不够好看，有的排版好看但不支持 markdown，总之始终没有令人满意的。当然了，你可能会说 Notion 之类的，但是如果你不喜欢折腾，想开箱即用，想要支持 Echarts、流程图等各种功能，那么 Yank note 都能满足你，另外，Yank note 还支持自定义插件，代码能直接被 Yank note 渲染！它的编辑器采用 vscode 开源的 monaco-editor，有着和 vscode 一致的书写体验，快捷键也保持了一致，下面来感受下它的强大之处。
以下功能都可以使用 markdown 语法或 Yank note 增强语法进行编写并渲染：
特色功能还有很多，基本能够满足程序员的写作需求，甚至还有强大的文档保护功能。另外，Yank note 本身支持插件化，可以自己开发属于自己的插件。由于具备直接运行代码的能力，一些小工具可以直接编码使用。
三、写在最后
以上就是我珍藏的一些好用的网站和工具了，在工作和学习中切切实实给我带来了很大的帮助，也希望能帮助到大家。
