TomasPustelnik原创，新前端翻译。前端开发是一个比较复杂的方向，至少对于大型项目来说，你很难只用一个浏览器和一个编辑器来完成工作。这是我在开发过程中使用的工具列表。我希望这个列表可以帮助其他人发现一些可以在他们的工作流程中使用的好工具。必备工具这些是我每天使用的工具，没有它们就很难提高工作效率。VSCode-我选择的编辑器是Microsoft的VSCode。免费、轻量级（与WebStorm等IDE相比）、许多开箱即用的功能和丰富的扩展。浏览器——我的默认浏览器是Firefox，有时会切换到Chrome进行开发。我还安装了其他浏览器用于测试目的。DevDocs-此Web应用程序汇总了各种项目的文档并支持离线使用。当我需要查找文档时，我通常会去这个站点。我主要用它来查询JS和DOM/浏览器文档。我真的找不到与之相媲美的东西（详尽且易于搜索）。你应该看看。Google-是的，我经常在互联网上搜索。有关错误的信息、如何做某事（有时是非常基本的）、示例代码和包和存储库的文档（如果DevDocs不包含它），我将搜索Internet。MDN-对于任何Web开发人员来说都是一个很好的资源。这个网站的部分内容可以在前面提到的DevDocs上找到，但有些页面只能在MDN上找到。我主要用它来查找一些关于辅助功能的内容，这方面的文章很多。StackOverflow-经常用谷歌搜索上面的内容。如果你有问题，你可能会在上面找到答案。GitHub——我对某个软件包有疑问，或者想进一步了解它，我会去它的GitHub仓库翻看问题和代码，通常都能找到问题的答案，就像StackOverflow一样。以我个人的经验，如果你对某个特定的包有疑问，你更有可能在GitHub上而不是在StackOverflow上找到它（除了像React这样特别流行的库）。当然，我也使用GitHub的版本控制功能。CSSSS-Tricks-你会在这里找到大量有趣的文章和技巧。该网站还有一个指南部分，其中包含对特定HTML、CSS和JS概念的深入解释。我经常访问这个网站来更新我对网格布局的了解。但其他指南也很棒。这个网站绝对值得一看。CSS参考-当我需要更新我的CSS知识或查找不熟悉的、未使用的属性时，我会访问这个站点。上面对每一个CSS属性的解释都很深入，给出的例子也很清楚，让你了解这些属性，并应用到自己的项目中。该网站的作者是SaraSoudain。CanIUse-如果您关心浏览器兼容性并希望负责任地使用尖端功能（渐进式增强），那么这是一个不可或缺的工具。PerformanceOptimizingSVGOMG-从设计师那里收到网页优化的SVG文件实在是太少见了。所以我会用SVGOMG优化SVG，结果是惊人的。这是SVGO的网页版，所以你也可以使用相应的命令行工具来压缩SVG。Shrinkme.app–使用此Web应用程序可以快速轻松地优化图像文件。开箱即用，它支持批量上传并且运行良好。Sqoosh-当我需要最大程度地压缩图像或创建webp图像文件时，我会使用此站点。您可以使用它提供的大量选项来产生所需的效果。您还可以使用它来缩放图像或转换图像格式。它使用了很多尖端技术（GoogleChrome团队制作这个工具是为了演示现代浏览器的功能），因此您需要使用Chrome或基于Chromium的浏览器（Opera、Brave等）。上次我尝试时，该站点在Firefox中无法正常运行。Icomoon应用程序——当我需要创建自定义图标集时，我会使用这个工具。您可以从现有图标（免费和付费）中选择或上传您自己的图标。然后可以生成相应的图标字体或SVG图标文件（后者是目前更好的选择）。Google字体——当我需要创建自定义网络字体时，我首先求助于Google字体。我通常会下载所需的文件并自行托管以获得更好的性能。GoogleFonts有一个很好的特性，它允许只对需要的字符进行编码。Glyphhanger-减小文件大小是提高网站性能的最佳方法之一。Web字体通常包含很多我们不需要的字形，因此我使用Glyphhanger对字体进行子集化。您可以指定所需的Unicode段和字符，Glyphanger将创建一个仅包含相应字符的字体文件。它还可以将.ttf文件转换为其他对网络更友好的格式，例如.woff和.woff2。正确使用此工具需要一些工作，但我认为当您遇到字体性能问题时，这是一个值得考虑的选项。Lighthouse-我在发布之前测试我的网页，Chrome的Lighthouse是最常用的工具之一。对各个方面的常见问题进行检查并给出评分，同时也给出改进建议。这是一个非常好的工具，可以初步检查我在开发过程中是否遗漏了什么。Fontstylematcher——加载自定义字体后，进行字体切换。如果你想让这个开关不显眼，你可以使用这个字体样式匹配器来找到一个类似于自定义字体的默认字体。辅助功能VoiceOver-macOS的默认屏幕阅读器。熟悉该工具需要一点时间（我推荐这篇介绍性文章），但我在开发过程中不时尝试使用VoiceOver。多亏了这一点，我的项目大量使用了aria属性和面向屏幕阅读器的文本。使用VoiceOver后，您会惊讶于一些日常Web组件为屏幕阅读器用户提供的上下文信息是多么少。a11y指南-通常我会尝试找到一个可访问的解决方案，但有时我必须自己做，在这种情况下我会参考此页面。此无障碍指南详细解释了无障碍是什么、为什么它很重要以及如何实现它。在许多情况下，示例代码只需稍作调整即可复制并应用到实际项目中。WAI-ARIA规范——我不经常阅读规范。如果我正在阅读规格，通常是这个。它包含很多关于如何使用aria角色和属性的有价值的信息。我想说任何认真对待可访问性的开发人员都需要阅读此规范。值得一提的是，在列表的最后，有一些我认为非常有用但不那么常用的工具。响应断点生成器-手动创建响应图像的多种变体是一种痛苦。使用这个工具非常方便。HTML箭头-符号的Unicode代码、HTML十六进制编码、HTML实体编码、HTML实体。Charreference-与之前的工具类似，但显示的信息较少，主要显示HTML实体。Typographycheatsheet-解释常见的排版规则和问题。模块化缩放——我通常在设计网页时使用这个工具来选择模块化缩放方案。对于那些有兴趣了解有关此主题的更多信息的人，请查看AListAppart上的这篇文章和TimBrown在BuildConf2010上的演讲。CSS渐变生成器-用于创建渐变背景的在线工具。平滑阴影生成器-为网站添加漂亮的阴影。Beziercurvegenerator-自定义CSS的三次贝塞尔曲线计时功能.缓动函数-可用于CSS动画和过渡的各种缓动函数。ngrok-当我需要向其他人展示我的作品或在不同设备上测试效果时，我会使用ngrok。ngrok可以将本地运行的服务暴露给公共网络。但有时它不适用于Browserstack的本地主机扩展。共享按钮-如果您只需要一个简单的共享按钮，不想使用JS，并且不想弄乱跟踪用户的复杂逻辑，则此工具特别有用。Unix时间戳转换器-Unix时间戳转换器。CSS到JS转换器-将CSS转换为JS，然后将JS转换回CSS。在基于CSS-in-JS库进行开发时，此工具会派上用场。浏览器默认样式-常见浏览器的默认样式。结论以上就是我在工作中使用的提高效率的工具。我希望它能帮助你找到一些有用的工具。请随时在Twitter上向我发送反馈，包括对其他出色工具的建议。
