开发人员必备的 20 个 Web 工具

作为开发人员，拥有合适的工具可以节省大量时间。无论是编写代码、检查数据，还是验证命令和配置，工具都变得不可或缺。这是我最喜欢的文件夹，我花了好几年才建立起这份清单！

1 – DevHints.io

我根本不可能记住我使用的工具和语言的语法和代码片段。而且，这也没用，因为那不是重点。重要的是记住概念，而不是细节。

有关详细信息，请参阅相关备忘单，而DevHints则是金矿。

你能想到的任何开发者使用的语言工具或框架，都能在这个网站上找到速查表。只需点击几下，就能访问所有内容，而且可以轻松打印。这绝对是帮助记忆的必备资料！

2 – 在 Y 分钟内学习 X

在 Y 分钟内学会 X是一个您必须亲眼看到才会相信的疯狂网站。

几乎所有编程语言，都包含在一页纸中，并通过具体的代码示例进行讲解。从 C++ 等标准编程语言到 LOLCODE 等令人眼花缭乱的编程语言，您都能找到。

它与第一本有很大不同，因为这里每种语言都以课程的形式讲解。它不是为了刷新你的记忆（速查表），而是为了快速学习一门新语言的基础知识。

3 – 正则表达式101

当我发现Regex101时，Regex 不再是一个问题。

在发现这个工具之前，创建或修改复杂的正则表达式非常繁琐。我首先必须记住每个语法和细节，然后还要花很长时间测试我的解决方案，才能让它按照我想要的方式工作。

今天我用这个工具，它一步一步地讲解。所有测试都是在每次修改后立即完成的。为了解码其中一个，我复制/粘贴一下，就能得到完整的解释。这个工具一直陪伴着我，帮我节省了大量的时间。必备！

4 – JSON 在线编辑器

当我使用 JSON 时，我经常会绘制JsonEditorOnline。

首先，我用它来通过节点清晰地可视化我的数据。但最重要的是，它允许我区分多个 JSON 数据。如果你像我一样经常使用 API，那么你经常会发现自己需要比较数据。

我以前都是一个接一个地查看 JSON 文件，速度很慢，而且容易出错。自从用了这个工具，我再也没有犯错的机会了，节省了很多时间！

5 – CodeSandbox

我最喜欢的、一直使用的在线代码编辑器是Codesandbox。

一款免费、即时、协作的沙盒代码编辑器，满足您的所有需求！它速度非常快，您可以将任何内容托管为小型静态应用。

比起 CodePen，我更喜欢它，因为我可以免费托管图片，而且有更多技术和模板可供选择。非常适合快速将我的想法原型化！

6 – Cloudflare 速度测试

疫情期间，我的网络连接变得比以往任何时候都更加重要。一旦出现网络中断或掉线，我希望能立即收到通知。

幸运的是，Cloudflare 已经制作了一个页面来详细分析您的连接。

只需点击一下，即可查看当前连接状态。方便您了解通话延迟或无法连接时的情况！

7 – Excalidraw

在编写一个复杂的问题之前，我需要先画一个示意图。相信我，没有什么比在编写代码之前将你的想法图解化更能节省时间了。

大多数情况下，使用纸笔。否则，使用Excalidraw。

Excalidraw 是一款白板，让您轻松绘制图纸，如同手工绘制！一张空白页，足以绘制图表并保存。简单、快速、干净、免费，简直太棒了。必备单品。

8 – BundlePhobia

当我找到可以帮助我的 NPM 包时，它会直接通过BundlePhobia。

这个小型 Web 应用程序让我只需点击一下，就能知道软件包的大小和时间价格。它还能让我看到链接了多少个依赖项。

它让我能够决定是否值得在项目中引入这些新的依赖项。有时，它允许我在两个功能相同的包之间进行选择。无论最终结果如何，我的应用程序都会胜出！

9 – Semver 检查

我经常使用Semver 检查来检查我的项目的 NPM 版本。

它让我能够确保某些版本约束能够按照我的意愿运行。它更像是一个工具，用来检查我不会犯一些愚蠢的错误。但它对于快速验证版本非常有用。

用之前我有时会发现软件包版本不对。现在有了它，就不会再犯错误了。非常实用！

10 – CodeElf

如果你是一名开发人员，这意味着你一半的时间都花在选择变量和函数名称上。这个工具可以帮到你。

Codelf 的设计旨在节省您思考命名的时间！

它会立即搜索 Github、GitLab 和 Bitbucket，看看你的命名创意是否受欢迎！如果你的创意之前已经被成千上万的开发者使用过，那么它被认可的可能性就更大。

11 – Htaccess 测试器

我已经因为过于自信地更改 htaccess 而破坏了整个网站。

通过使用htaccess 测试器，这种情况将不再发生！

这个小工具能让你在推送之前准确了解 htaccess 的行为。推送时无需再担心，因为你已经确信你的网站不会崩溃，重定向也正确无误。只需使用一次，就会让你爱不释手！

12 – ExplainShell

保留所有 shell 命令的所有小选项几乎是不可能的。

解释 shell允许复制/粘贴任何命令是为了有完整的解释！

它类似于 man 命令，但阅读速度更快，更详细，并且在浏览器中显示效果更好。所有选项都清晰地解释清楚，界面简洁美观。快速浏览各种命令非常方便。

13 – Squoosh

大多数大型图像（就重量而言）可以减少 60% 而不会损失质量。

这正是Squoosh只需一滴就能做到的！

如果你想优化网站和访客的带宽，这是必不可少的。而且一般来说，大图片没什么用。快速移除它们非常方便。

14 – Photopea

这简直是​​疯了！

Photopea只是浏览器中的免费 Photoshop。

我经常因为各种原因需要修图。现在不用再用那些便宜的免费编辑工具了。我直接打开一个页面就能搞定。

它非常方便，可以在任何地方快速完成一些小技巧，而且无需安装所有垃圾程序。它运行良好，而且免费，真是太棒了！

15 – DevDocs

在一个组织良好的地方访问所有框架/语言的所有文档会很酷。

嗯，这正是DevDocs 的意义所在。

非常方便，不用把时间浪费在浏览世界各地的网站上，也不必打开 30 个标签页。事实上，我主要用它浏览有限数量的文档，但待在一个地方仍然很方便。

16. 碳

如果您想知道一些开发人员如何能够生成其代码的精美图像，那就不用再犹豫了！

Carbon简直就是最广泛使用的代码演示生成器。

太方便了！VSCode 扩展中也有对应的功能。

17 – 跳房子

几乎每个人都知道使用 Postman 或 Insomnia 来测试这些 API。

Hoppscotch完全相同，但直接在浏览器中！

它非常完善，拥有你能想到的所有选项，并且总能帮助你快速测试 API。Postman 也允许你通过 Web 进行测试，但某些调用需要代码，甚至需要浏览器扩展程序。

Hoppscotch，您只需单击一下即可访问所需的一切。

18 – Crontab 大师

设置 cron 时如果出现哪怕是最轻微的错误都可能造成极其灾难性的后果。

Crontab guru允许您在编程之前准确验证未来的 cron 将如何运行。

与 htaccess 测试器类似，在添加或更新影响重大的规则之前，无需再费力。在推送任何内容之前，您就能清楚地知道它的行为。非常方便，快速上手，让您安心无忧！

19 – 开发者工具

DevTools是一套工具，可以节省每天开发小任务的时间。

文本编码/解码、文本比较、文本生成、UUID 生成以及许多其他迷你工具，尽在一处。无需四处奔波于各种命令和脚本之间，所有功能尽在一处。复制粘贴即可获得结果，节省时间！

20 – Repl.it

Codesandbox 或 Codepen 等在线代码编辑器仅限于前端。

ReplIt有超过 50 种语言版本，可在浏览器中免费使用。

这是快速创建代码后端原型的绝佳平台。我经常用它来验证函数、算法，或者只是检查 NodeJS 或 Python 两个版本之间的兼容性。免费账户甚至可以分享你的算法！

奖金——Pomofocus

一个小的奖励工具！

Pomofocus是我见过的最好的番茄工作法网页管理工具。

番茄工作法是一项非常著名的技巧，我经常在这个博客上介绍它。它能让你的工作效率提高十倍，效果显著！而番茄专注法 (pomofocus) 正是测试它的绝佳选择。

结语

以后我会再写一篇关于桌面软件和 Visual Studio Code 扩展的类似文章。今天的列表来自我在 Twitter 上创建的讨论帖。如果你想抢先了解最新资讯，欢迎随时关注我的Twitter！