前端Web开发是一个令人兴奋的领域，需求不断增长，带来了高薪职业。同时，Web领域也有很多扎实的工作可以让Web开发人员更高效地工作。以下是我在日常前端培训开发中经常使用的12个工具，分享给大家，希望对大家有所帮助。译者注：这些工具都是Chrome的扩展（也适用于MicrosoftEdge、Opera等Chromium内核的浏览器），标题后面的数字是下载量。Wappalyzer是一种工具，可让您了解网站是用什么构建的，无论是内容管理系统、电子商务平台还是营销自动化工具。研究如何创建网站，这是一个很棒的工具。它还会创建一个网站列表，这些网站使用某些技术可以帮助您了解如何构建客户的网站。在准备大型项目时，我无数次使用这个工具。WindowResizer响应式设计是现代网站最重要的功能之一。您需要测试您的网站是否可以在各种类型的设备上查看。我使用WindowResizer来调整我的网络浏览器窗口的大小，以模拟不同的屏幕分辨率。然后您可以看到您的布局在特定分辨率下的外观。您可以自定义分辨率、设置窗口宽度和高度、窗口位置等。Marmoset程序员的部分工作是向客户或上级展示他们的代码，但常规屏幕截图可能并不引人注目，因此您需要带上它们生活。我使用Marmoset为我的代码拍摄一些很酷的快照，并将它们放在我的幻灯片上以给人留下良好的印象。不用说，我的代码幻灯片一点也不乏味。我开始修补模板和颜色主题，以使我的演示文稿更令人难忘。Web开发人员清单作为前端开发人员，很容易忘记您需要做的一切。当您急于在截止日期前完成项目时，您可能会跳过关键步骤。这是Toptal的Web开发人员清单，它将节省您的时间。我使用WebDeveloperChecklist来确保我已经考虑了每个项目中的所有基础知识。它提供了前端Web开发中最重要步骤的清单。它还会分析违反最佳实践的网页，以便您修复它们。CodeCola：SourceCodeViewer如果你使用Chrome，想在页面上编辑CSS，可以使用inspectelement功能（译者注：谷歌Chrome浏览器打开网页后，右击出现的菜单：Inspect/审查），但它可能过于灵活。是一个更易于使用的Chrome扩展程序。这是适用于Chrome的最佳CSS编辑器，具有特别适合初学者的界面。我用过很多次，试图在我的网页上编辑CSS。CSSViewer—100,000+如果您只需要在网页上查看CSS属性，CSSViewer非常棒。只需单击该图标并将鼠标悬停在要检查的任何元素上即可查看其CSS属性。我发现它比Chrome的Inspect元素更快更容易使用，因为它具有悬停功能。JSONViewJSON常用于需要处理数据传输的网站，任何前端开发者都需要掌握和熟悉它。使用JSON时，经常需要在页面上查看和验证JSON文档。JSONView是一个简单的工具。这些年来，我了解到简单为王，没有比JSONView更简单的了。Lighthouse译者注：Lighthouse已经集成到GoogleChrome（或MicrosoftEdge）中，无需单独下载。如今，自动化越来越成为前端开发的必需品。Lighthouse是一个用于提高网页质量的开源自动化工具。您可以使用它来监控页面性能、可访问性、SEO等。现在，如果不使用Lighthouse，我不会做前端项目开发。它帮助我以各种方式改进网页。清除缓存每当您需要清除Web浏览器上的缓存时，通常必须手动转到“设置”页面。这是前端开发人员经常执行的一项任务，用于测试他们正在处理的网页。使用Chrome扩展来执行此操作效率更高。我一直在使用清除缓存扩展一键完成，避免浪费宝贵的时间。Cookie管理器拥有一个好的cookie管理器是前端开发的另一个重要工具，尤其是当您的网站处理数据时。Cookie管理器使此过程更简单、更高效。那里有很多cookie管理器，我发现这个适合我的工作流程。它不仅是为前端开发人员设计的，也是为注重隐私的网络用户设计的。LiveReload：预览工具您可能想确切地知道您的网页在幕后做了什么，比如它在使用时更改了哪些文件。LiveReload是一个很棒的预览工具。我使用LiveReload来准确查看我的页面在做什么。它让我更好地了解我的网页是如何工作的。万一出问题怎么办。Postman最后来看一下API。今天，前端开发人员必须处理API，以便将页面与各种Web服务集成。为它编写代码并不是最简单的事情，因此您需要一个可以让您更有效的工具。这是一个简化API构建过程的好工具，它还简化了团队协作。我和我的团队都不知道如何在不使用Postman的情况下开发API。
