打开TextEdit或记事本并键入“<HTML>”来启动一个新项目是一件既浪漫又令人兴奋的事情。这就是我们中的许多人开始痴迷于网络编码的原因。在2022年，Web 开发工具不仅可以记录我们的文本，还可以帮助我们创建项目并增强整个过程。除此之外，还有更多元素需要考虑，而不仅仅是HTML和CSS 。
例如，规划阶段至关重要。您需要考虑线框图、设计选择和协作工作流程。然后是选择理想的，是否使用集成开发环境 (IDE)等等。
在这篇文章中，我们将介绍2022年您将考虑使用的59种Web开发工具。但在我们开始讨论之前，让我们先谈谈我们认为Web开发工具是什么。
从表面上看，对Web开发工具进行分类似乎很简单。然而，即使潜入浅水区，也会出现一些模糊界限的考虑。
例如，考虑视频流服务是否算作开发工具。在泡沫中，可能不会。但是，如果您使用它来记录特定设计应用程序的屏幕，它会突然转变为独特的协作工具。
在我们看来，Web开发工具可以帮助您以专注的方式实现项目目标。虽然这不包括单独的编程语言，但有 子集、超集和框架（例如TypeScript） 跨越了界限。如果你想赚大钱，密切关注这些方面是至关重要的。
再举一个例子，考虑Git。您可能会争辩说，这个版本控制系统 (VCS) 涵盖了很多领域。有一种特定的语言用于运行命令，核心功能在Web开发方面提供了很多帮助。但是，您也可以将其用作学习工具，特别是通过搜索问题跟踪日志和提交。
总体而言，Web开发工具几乎可以是使您的项目高效运行的任何工具。您会在工具列表中注意到这种多样性。
我们将在接下来的几个词之前给你一个触发警告：“”。
是的，这个可怕的短语尖叫着需要节省时间的Web开发工具来拯救世界。统计数据显示，越来越多的项目，许多开发行业至今仍在使用它。
无论您的公司是否使用或需要加班和加班，Web开发工具仍然可以提供帮助。这些工具可以完成繁重的工作并使日常工作自动化，这些工作会消耗您的一天。因此，它们可以有机地提高您的生产力。
但是，如果您在等敏捷项目框架下运行，它们也可以提供奖励。例如，考虑之类的工具如何 帮助您在一个sprint结束时与其他团队共享代码片段，为下一个sprint做好准备。
更重要的是，虽然每天的站立会议不会有任何进展，但Discord服务器或Slack频道可以提供更好的方式来集中和调整即将到来的一组任务，从而摆脱当前sprint目标的压力。
总体而言，Web开发工具既关乎执行，也关乎计划。
如何为您的项目选择合适的开发堆栈
我们很可能会向皈依者宣讲，但一款出色的Web开发工具在玫瑰金M1驱动的MacBook中是物有所值的。因此，为您的特定项目获得正确的工具组合对于为工作奠定坚实的基础至关重要。
如果这是您以前没有考虑过的事情，那么初始计划阶段将证明是无价的。花一些时间来确定您将使用的工具确实会延迟项目的编码阶段。但是，您稍后会得到这个时间，因为与软件相关的潜在麻烦会更少。您还将看到更一致的输出级别（假设每个人都在同一页面上）。
为项目选择归结为以下几点：
-
复杂性：考虑您的可交付成果需要有多复杂，因为这将决定堆栈的复杂性。
-
可扩展性：如果您的项目是针对本地企业的，那么这将需要针对全球企业的不同解决方案。因此，您将需要一个更具可扩展性的堆栈来实现您的目标。
-
安全性：几乎不用说，无论您选择什么都不应该危及用户和站点的安全性。
-
成本：当然，没有人喜欢超支，如果预算紧张，这将比空白支票簿更重要。
您可以将技术分为两个领域：
-
服务器端：在这里，您需要查看您使用的后端技术。例如，您需要查看您选择的托管和Web服务器、键值和SQL存储、您将使用的任何应用程序和自动化框架，当然还有编程语言。
-
客户端：可以说您的前端工具选择会更加直接，尤其是在您使用的语言方面。虽然HTML、CSS和JavaScript将成为特色，但您对JavaScript框架（和自动化框架）的选择需要一些考虑。
当谈到一些时，您会注意到许多大型网站使用JavaScript和的某种组合，以及Nginx。您还将在开发堆栈中看到、Redis和。
事不宜迟，让我们看看我们推荐在2022年使用的Web开发工具列表。我们已将它们分类，但除此之外，这些工具没有特定的顺序。如果您赶时间，请随时跳到下面列出的特定部分。
本地开发环境是任何开发堆栈的重要组成部分。但是，它对于Web开发尤其重要。以下是一些最著名的本地开发工具。
因此，WordPress开发人员应该——套用的话说——深入学习客户端库、基于JavaScript的自适应引擎等等。
我们建议ShortPixel是一款开发者工具，因为它非常适合连接您的网站或应用程序。我们还说它会很快让您对TinyPNG上瘾，特别是如果您想将它用作更大工作流程的一部分。
是时候使用每个人最喜欢的图像优化工具 – 。您也可以将TinyJPG捆绑到此条目中，尽管这两种工具都使用相同的图像格式。
您会发现TinyPNG这些年来并没有太大变化。它仍然是用于优化图像的简单拖放工具。没有任何花里胡哨，也没有广泛的文件格式集。尽管如此，TinyPNG确实提供了最高的可用性以及与其他工具的大量集成。
例如，有一个 和 – 对于更细粒度的应用程序 – 一个。甚至Python用户也可以参与其中，因为API也支持这种语言。 许多第三方工具也使用API创建了。
我们并不是说TinyPNG垄断了图像优化市场，但它通常是许多用户的首选。拍摄一张图片并将其放入上传器需要几秒钟的时间，当您获得 99.9% 完美的图片表示时，它很容易被信任。
我们之前讨论过测试您的API和核心站点代码，尽管这会影响您网站的性能。这里有一些我们喜欢的工具，它们也可以帮助您分析网站的表现。
如果您曾经被需要在应用程序中执行和完善的媒体查询的数量所淹没，。它是一个开源前端工具，可帮助您根据所选设备的各种视口开发网站。
以响应方式查看不同的设备
这样做的好处是您可以并排比较布局。它为您提供了提高设备之间一致性的可靠机会。每个设备都是精确的，并且有很多可供选择，如果您的网站针对特定设备，这非常好。
您还可以为、和添加专用浏览器扩展， 以将页面发送到响应式浏览器。从这里，您可以打开内置的开发工具并开始工作。
还有许多其他功能可以帮助您开发，例如屏幕截图功能、热加载支持等。很难与“Responsively”是“Web开发人员的浏览器”的标语争论。它可能最终成为您工作流程的核心组成部分。
对于许多人来说，Google的是一个有价值的工具，可以帮助您了解网站的运行情况以及可以在哪些方面提高加载速度。
也就是说，深入研究一些底层软件更有趣。它也可能更适合您的需求。可以针对任何网页运行，并为页面性能、SEO、渐进式Web应用程序 (PWA) 等提供审计和报告。
值得注意的是，从表面上看，Google Lighthouse和PageSpeed Insights看起来很相似。但PageSpeed Insights使用基于实验室的数据与真实世界的用户数据相结合。Lighthouse’suse的分析忽略了用户数据并测量了您网站的更多元素。
在我们看来，值得同时运行PageSpeed Insights和Lighthouse，特别是如果您的客户的目标是登上搜索引擎结果页面 (SERP) 的顶部。在任何情况下，它都是一个可靠的工具，它甚至可以取代PageSpeed Insights作为您选择的性能工具。
对于许多开发人员来说，端到端测试并不是一种愉快的体验。选择在这座山上消亡——它是一种简单的解决方案，它逆向端到端测试的趋势，并产生了一些出色的东西。
虽然大多数端到端测试工具都基于，但赛普拉斯却朝着不同的方向发展。这意味着用户使用基于Selenium的测试人员发现的问题不存在于此。事实上，开发人员希望让设置、编写和运行测试变得轻而易举。
为此，他们从头开始构建架构，并专注于端到端测试，排除其他形式。为了提高性能，赛普拉斯与您的程序在同一运行循环中运行，而不是通过网络执行远程命令。
由于测试代码在浏览器中运行，因此无需考虑驱动程序或语言绑定。即便如此，您也可以在运行测试之前编译成JavaScript。
如果您是质量保证 (QA) 工程师或希望您的端到端测试能够本地访问您的工作的开发人员，赛普拉斯应该引起您的注意。最好的部分是还有一个 ！
请允许我们扩展一下被认为是Web开发工具的界限。是众所周知的任何人，甚至对Web开发有过一些了解：
这是一个专注于编程的问答网站，它是网络的一部分，涵盖了所有其他主题：
它被称为数千名开发人员的首选资源，尽管，但流量仍然很大。我们敢说，Stack与您选择的搜索引擎一起，代表了一种灵活的Web开发工具，用于学习和提高您的技能。
例如，当遇到与代码相关的开发障碍时，您可能会前往Stack Overflow。同样，当出现您不确定如何解决的错误时，将其粘贴到搜索引擎中是找到所需答案的最快方法。
鉴于使用Stack Overflow解决问题，很可能每个人都会使用该工具。然而，对于初学者——或者即使你不能清楚地表达你的问题——搜索引擎可以说会更友好一些。
如果您是一名订阅“RTFM”精神的开发人员，那么您不需要对以下几个条目有任何说服力。相反，如果您想深入研究一个问题并找出答案，请知道在您之前有无数的开发人员可能已经找到了答案。
鉴于此，请查看以下几个Web开发工具，均基于 Web 参考资料。
在网络的早期，有一个，由Lycos运营，旨在向新用户教授Web开发和编程。该网站的精神存在于Mozilla的中。Webmoney于2004年关闭，而MDN Web Docs于2005年问世，因此两者之间有着天然的契合。
它是一个资源集合，可帮助您在某些情况下教您为Web编程，在其他情况下教您特定于Mozilla的产品。内容分为两大类：技术和参考指南。根据您现有的能力和经验，您将看到几个教程、专门的参考指南以及前者的一些进一步资源。
这些指南都与开发行业中的特定利基和行业相关。例如，充当附加HTML、CSS和JavaScript指南的“基石”页面。
还对各个行业进行了广泛的研究，例如游戏开发以及在该领域起步所需的条件：
MDN Web Docs是初学者Web开发人员的必备读物，它也为专家提供了足够的价值。如果有任何网站值得浏览器书签，那就是它！
过去，您会将购买的产品的所有手册保存在满是灰尘的抽屉或橱柜中。随着生活变得更加数字化，这些纸质手册已经让位于每个制造商网站上的PDF下载。
通过这一点，我们现在有了网站，可以在精选图书馆中收集手册的数字版本。它使您可以从一个存储库中找到所需的内容。因此，有理由认为Web开发主题也会存在。
简而言之，是一个API文档库，我们认为它对几乎所有开发人员都很有价值：
在浏览库之前，您需要启用所需的API文档。您可以从“首选项” 屏幕执行此操作：
完成后，您将能够从专用树形菜单访问相关文档：
这是一个低效问题的简单解决方案，因为您在一个地方有多个API引用。DevDocs是另一个值得添加书签的站点，遗憾的是没有可用于更快参考的桌面应用程序。
Chris Coyier是许多Web开发人员都知道的名字。我们敢打赌，您已经熟悉他创建的网站——。顾名思义，它是一个致力于前端编码，特别是CSS以及如何变得更好的网站。
正如的，在最初的几年里，CSS是主要的话题。不过，从那时起，HTML、JavaScript、WordPress等变得同样重要且经常被讨论。结果是一个专注于前端开发的网站，其中包含大量文章、视频和指南来激发您的灵感。
一个简单但有价值的元素是，它概述了CSS中的选择器和属性。如果您需要了解该语言的某些方面，这是一个很好的参考来源。
虽然CSS-Tricks有类似参考的方面，但它本身并不是参考资源。尽管如此，它应该是您经常出没的地方，无论是通过 RSS 提要还是其他解决方案。内容质量很高，可以以您以前没有想到的方式挑战您。至少，并等待CSS-Tricks进入您的收件箱。
想象一下，您可以从社交媒体、Web开发和Stack Overflow中获取优秀的部分，然后创建一个将它们合并的站点。可能就是结果。
它是一个博客平台，也是寻找开发问题答案的一种方式。您选择要关注的标签和人员，您的新闻源将成为帖子和见解的自动化和策划时间表：
公平地说，这是您可以在任何地方找到的信息——如果您愿意的话。DEV Community的优点是它就在这里，而且它是对开发主题的定向整理。将其视为开发人员会议轨道，而不是在公共汽车站无意中听到并插入相关对话。
这是另一个在您的RSS Feed中表现良好的网站，或者作为收件箱中的摘要。因此，它也是一个“睡眠”资源，因为你会经常到这里而没有意识到它。
你可以说通过互联网提问来查找信息的趋势。他很快被各种搜索算法取代，尽管基于问题的搜索仍然是找到所需内容的可靠方法。
是前端开发人员对“是否有针对CSS的Ask Jeeves的回答”
前提很简单：您在搜索字段中输入CSS选择器或属性，数据库会返回您是否可以使用它来创建网站。您也不限于CSS。还支持JavaScript和HTML：
它是一个前端语言数据库，因此它不会返回PHP、Python或其他服务器端语言的结果。即便如此，我可以使用…是一个巨大而有价值的工具，可以帮助您在可访问性和多设备设计方面提供帮助。
拉出一个特定元素并一目了然地查看您的目标浏览器是否支持它是一个简单的提议：
如果仔细观察，您还可以找到元素的发布日期和使用百分比等统计信息：
总的来说，Can I use…可能不会经常使用。但是，在项目的某些阶段，它几乎会一直打开。一旦你弄清楚你的目标浏览器将支持什么，Can I use….重新进入你的书签并等待下一次需要它的时候。当涉及到您的前端代码时，这是一项有用的服务，可以成为“water carrier”。
时间和金钱都很短，选择您一直使用的旧Web开发工具是有一定道理的。然而，对项目需求做出深思熟虑的选择将在时间、成本和生产力方面得到回报。
在这篇文章中，我们介绍了59种令人惊叹的Web开发工具，您可以在2022年使用这些工具来为您和您的团队提供动力。你可能已经这样做了。如果各种调查都是正确的，那么更多的开发人员会转向GitHub、TypeScript、不同的Web服务堆栈以及众多JavaScript框架之一来完成项目。
