15+ 你可能不知道的实用 Web 开发工具

Web开发工具可帮助开发人员更轻松、更快速地构建网站或应用程序。它简化了从设计到编码以及其间所有环节的开发流程。

你可能已经注意到，Web 技术日新月异，尤其是在前端领域。每年都会有新的 Web 技术发布。Web 开发工具也是如此。

随着众多新工具的出现，Web 开发工作流程也在不断变化。它变得越来越简单、越来越快捷。我们开发者应该充分利用这些工具，提高工作效率。

TL;DR;

值得尝试的实用 Web 开发工具

在这篇文章中，我不会向你展示那些你已经知道的基本 Web 开发工具，例如代码编辑器、git 和流行的框架。相反，我会列出一些你可能还不知道的有用且独特的工具。

这些工具大部分（如果不是全部）都是免费使用的。您可以全部试用，看看它们是否适合您的项目。那就快来试试吧！

1. Quarkly（设计工具）

乍一看，Quarkly 就像另一个帮助设计师搭建网站的无代码网站构建器。但事实上，它的功能远不止于此。

Quarkly 是一款免费工具，专为 Web 开发者和 Web 设计人员打造。它不仅能帮助设计人员，还能帮助开发者构建网站和 Web 应用程序。从设计到部署，整个流程都更加快捷。

您不仅可以设计拖放元素，还可以使用内置代码编辑器编辑、自定义和管理生成的代码。

您可以添加逻辑、连接外部 API，以及添加任何可视化构建器无法生成的代码。不仅如此，您甚至可以将 npm 包添加到您的项目中。

这样，您就可以完全控制生成的代码，并维护代码质量。这是普通网站构建器无法做到的。

Quarkly 生成的代码基于 React，这是一个流行的 JavaScript 库。所以，如果你已经了解 React，那么 Quarkly 会带给你轻松上手的体验。

要了解有关 Quarkly 的更多信息，请查看此文章：如何使用 Quarkly 加速 Web 开发过程，或直接在此处试用 Quarkly。

2. Budibase（低代码平台）

Budibase 是一个开源低代码平台，可帮助您在自己的基础架构上构建内部应用程序。它声称构建内部工具的速度比从头构建内部应用程序快 50 倍。

Budibase builder 有一个桌面平台，允许您构建 Web 应用程序并预览它。

使用 Budibase，您可以使用拖放技术创建 Web 应用程序，将其与您自己的数据库集成，创建自动化任务等。

以下是 Budibase 功能摘要：

构建并发布真正的软件。 与其他平台不同，Budibase 允许您构建和发布单页应用程序。
开源且可扩展。Budibase 是开源的。构建器遵循 AGPL v3 许可证，服务器遵循 GPL v3 许可证，客户端遵循 MPL 许可证。
加载数据或从头开始。Budibase 可从多个来源导入数据，例如 MongoDB、CouchDB、PostgreSQL、mySQL、Airtable、Google Sheets、S3、DyanmoDB 或 REST API。
使用强大的预制组件设计和构建应用程序。
实现流程自动化，与其他工具集成，并连接到 Webhook。 通过自动化手动流程和工作流程，节省时间。
云托管和自托管。 用户可以自行托管，也可以使用 Budibase 云托管其应用程序。

3. Undesign（设计工具和资源）

作为 Web 开发人员，我们始终需要设计资源，例如库存照片、插图、图标、动画、字体等，但有时这些资源很难找到。

现在，多亏了 Undesign，我们无需再手动搜索网络来寻找设计资源了。Undesign 收集了免费的设计工具和资源，并按类别进行整理。

您的网站需要插图吗？选择“插图”类别，您将找到最佳免费插图网站列表。

正在为您的网站寻找动画吗？前往动画类别，您将在那里找到免费的动画网站。

Undesign 的其他设计资源类别包括设计灵感、模板、调色板、CSS 生成器、图标、设计实用工具、库存照片、视频、音频等。

只需查看一下即可了解更多。

4. Chrome Dev Tool（调试工具）

您可能知道这个工具，但您是否充分利用了它？

Chrome 开发工具不仅可以在控制台选项卡中记录错误或检查元素，还允许您检查网站性能、响应能力、安全性、内存使用情况、本地存储等。

在此处的官方文档中了解有关 Chrome 开发工具的更多详细信息，或阅读以下文章： “使用 Chrome DevTools 进行调试的艺术”和“Chrome 开发工具初学者指南”。

替代方案

其他值得一提的调试工具，您可以将其用作替代方案或与 Chrome 开发工具一起使用：

Firefox 开发者版。专为开发人员打造的浏览器，具有许多实用且高级的功能。
CSS 扫描。用于检查和编辑 CSS 样式的浏览器扩展程序（非免费）
Responsively是一款开源工具，可轻松快速地测试 Web 响应能力。Responsively 可以同时测试不同的设备。

5.Codekit （编译器配置）

如果您是前端开发人员，您可能会使用（或至少听说过）CSS 预处理器（例如 LESS 和 SASS），或任务运行器（例如 Gulp 和 Grunt）。

它们都是很棒的工具，可以加快样式设计速度并自动化一些前端任务。但你应该为它们编写配置代码。有时，当你开发一个相当大的项目时，这会变得很复杂。

Codekit 可以解决这个问题。他们的口号是“构建网站，而不是配置文件”，因此 Codekit 可以自动配置 CSS 预处理器、任务运行器和其他脚本语言。它还可以用于优化图像和 CSS。

Codekit 仅适用于 Mac 用户，每个许可证 38 美元，终身使用。如果您是 Windows 用户或不想付费，您可以选择其他替代方案。

替代方案

6. Zeplin（协作工具）

过去，当我们基于设计开发网站时，我们应该手动从设计文件中切分或提取资源。我们还应该使用颜色选择器工具手动选择颜色。如果我们想要创建一个像素完美的网站，我们必须手动测量元素的宽度、填充和边距。

有了 Zeplin，这些手动操作现在可以自动化了。设计师只需上传设计文件（可以从 Figma、Photoshop、Adobe XD 或 Sketch 中获取），选择可导出的资源，然后发布即可。

只有受邀的开发者才能访问 Zeplin 项目。他们可以导出资源并检查项目中的元素，包括颜色代码、字体样式、填充、边距、宽度、高度，甚至生成的 CSS 样式。

Zeplin 生成所有这些，以便开发人员可以更加专注于编码。

要使用 Zeplin，请创建一个帐户，并下载桌面应用程序版本（如果您想创建一个项目（上传设计））。

免费帐户有限制：您只能创建一个项目。但作为开发者，您可以访问所有受邀参与协作的项目。

选择

鳄梨

7.Lighthouse （测试工具）

Lighthouse 是一款开源的自动化工具，用于测试和提升网页质量。它至少审核 Web 的四个方面：性能、可访问性、SEO 和渐进式 Web 应用。

就性能而言，它会检查页面速度、响应能力、浏览器缓存优化、资源优化等。就 SEO 而言，它会检查常规的页面 SEO 参数。

Lighthouse 由 Google 开发，并用于一些 google 产品Google pagespeed insight和https://web.dev/measure/中。

它也可以在 Chrome 开发工具和Chrome 扩展程序上使用，因此您可以使用它直接在本地和在线扫描打开的网站。

选择

GTmetrix

8. Selenium（测试工具）

对于中型 Web 应用程序，需要进行有组织的自动化测试，以确保应用程序没有错误。您不能依赖手动测试来测试 Web 应用程序的所有功能，因此您需要一个工具来替代手动测试。

Selenium 是一个用于测试 Web 应用程序的开源框架。它是一款在 Web 浏览器上自动化测试 Web 应用程序的工具。它就像一个使用您的应用并测试其功能的人。

使用 Selenium，您无需学习测试语言（Selenium IDE）即可创建功能测试。您可以使用 Ruby、Java、C#、Python 和 JavaScript 编写测试。

要了解有关 Selenium 的更多信息，请访问其官方网站，或阅读本文。

9. Docker（部署工具）

Docker 是一个用于开发、发布和运行应用程序的平台。它允许您将应用程序与基础架构分离，从而快速交付软件。使用 Docker，您可以像管理应用程序一样管理基础架构。

Docker 帮助在松散隔离的容器环境中打包并运行应用程序。容器的隔离性和安全性使您可以在给定主机上同时运行多个容器。

Docker 可以将应用程序及其依赖项打包到虚拟容器中，该容器可在任何 Linux、Windows 或 macOS 计算机上运行。Docker can package an application and its dependency in a virtual container that can run on any Linux, Windows, or macOS computer. 这使得应用程序能够在各种位置运行，例如本地、公共云和/或私有云。