网页开发行业节奏飞快，紧跟潮流并非易事。因此，充分利用现有工具至关重要。本文将介绍十款 Chrome 扩展程序，旨在优化您的 Web 开发工作流程，提升效率。
核心要点：
什么是 Chrome 扩展程序？
如 Chrome 开发者门户网站所述，扩展程序是小型软件程序，可以自定义您的浏览体验。这可以是任何东西，从检查您键入内容的拼写和语法检查器，到保存您最喜爱的网站登录详细信息的密码管理器。
Chrome 提供数千个扩展程序，所有这些扩展程序都可从 Chrome 网上应用店免费下载。您可以访问浏览器中的以下链接来检查当前安装的扩展程序：chrome://extensions/。
为什么选择 Chrome？
本文重点介绍 Google Chrome 浏览器，因为它拥有巨大的市场份额（目前为 65%，并且还在增长）。还有许多基于 Chrome 的浏览器支持扩展程序。这些包括 Brave、Vivaldi 以及即将推出的 Microsoft Edge。但是，我们应该记住，Chrome 并非唯一的选择，此处提到的许多扩展程序都有 Firefox 和/或 Opera 等效程序。
最后，在我们深入研究扩展程序之前，请花一点时间记住 Chrome 是 Google 发布的专有软件。众所周知，使用 Google 产品存在隐私问题，因此您也许可以访问 GitHub 并查看 ungoogled-chromium 项目。顾名思义，这是 Google Chromium，不包含与 Google 的集成。
1. Web Developer
我们将从扩展程序的瑞士军刀开始。Web Developer 在 Chrome 网上应用店拥有超过 100 万用户和 4.5 星评级，堪称必备之选。它向 Chrome 添加了一个工具栏按钮，单击该按钮即可显示可用于任何网页的大量工具。这些工具按类别（CSS、表单、图像等）分组，允许您执行诸如禁用 JavaScript、用缺少 alt 属性的图像轮廓、调整浏览器窗口大小、验证页面的 HTML、查看页面的元标记信息等等操作。
您可以从此处下载它。
2. 您的框架开发者工具
如果您使用 JavaScript 框架开发应用程序，而没有使用该框架的开发者工具，那么您可能做错了。让我以 Vue 为例进行解释。
如果您需要调试 Vue 应用程序，或者只想了解幕后情况，那么您该怎么做？检查页面的源代码将显示 Vue 正在呈现的 HTML，但 Vue 应用程序远不止于此。组件的 props、数据或计算属性呢？或者您的应用程序的状态或路由呢？您如何检查这些内容？
好消息是 Vue.js 开发者工具可以满足您的需求。只需安装扩展程序并在运行 Vue 开发版本的页面上打开它，即可准确查看应用程序中发生的情况。
以下是下载三大框架开发者工具的链接：
3. Daily 2.0 – 忙碌开发人员的资源
由于我们工作在快节奏的行业中，跟上新闻和动态有时可能是一项挑战。Daily 2.0 应运而生，这是一个扩展程序，它从互联网上收集最新的 Web 开发和技术文章，并以具有吸引力的砌体式布局显示在新标签页上。
该扩展程序易于使用。安装它时，系统会要求您从一堆您感兴趣的类别中进行选择，Daily 2.0 会完成其余工作。将鼠标悬停在新标签页上的侧边栏上，可以根据标签和来源过滤您的 Feed。
您可以从此处获取它。
4. Toggl Button：生产力和时间跟踪器
如果您是一位忙碌的自由职业者，如果您远程工作，或者您只需要跟踪您在项目上花费的时间，那么 Toggl 正适合您。
此扩展程序要求您在使用之前创建一个帐户。登录后，它可以快速轻松地进行实时生产力跟踪，所有数据都存储在您的 Toggl 帐户中。它带有一个内置的 Pomodoro 计时器，以及许多互联网服务的集成（例如 GitHub、Trello 和 Slack）。我最喜欢的功能之一是，当您处于空闲状态并且计时器正在运行时，它会弹出通知，允许您丢弃时间。
Toggl 可从此处下载。
5. Lighthouse
Lighthouse 是一款开源自动化工具，用于改进网页的性能和质量。您可以通过 Chrome 网上应用店安装它，或者从 Chrome 60 版开始，可以直接从浏览器的 DevTools 的“审核”选项卡运行它（按 F12 并选择“审核”）。
打开 Lighthouse 后，单击“生成报告”，并可选择选择要包含的审核类别。Lighthouse 将针对页面运行选定的审核，并生成有关页面执行情况的报告。您可以使用失败的审核作为改进页面的指标。每个审核还包含指向进一步阅读和潜在修复的链接。
Lighthouse 由 Google 制作，大概使用与他们的搜索引擎相同的排名因素。这意味着它可以为您提供一些关于如何优化您的网站的最佳建议。
您可以从此处获取它。
6. OneTab
情况是这样的。您正在处理您的 Web 应用程序，突然遇到一个意外的错误。您花几个小时跟踪修复程序，当您完成时，您的浏览器中打开了很多标签页。将这些添加到您昨天正在处理的项目的标签页中，以及所有您还没有时间阅读的文章中，很快您就会发现自己陷入了标签混乱之中。
这就是 OneTab 扩展程序可以帮助您恢复理智的地方。每当您发现自己有太多标签页时，单击 OneTab 图标即可将所有标签页转换为列表。当您需要再次访问标签页时，您可以单独或全部一次性恢复它们。如果使用得当，此扩展程序可以极大地提高您的工作效率。
OneTab 可从此处下载。
7. CSS Peeper
CSS Peeper 将自己定位为专为设计师设计的 CSS 查看器，允许您提取 CSS 并构建精美的样式指南。它允许您检查页面上任何元素的 CSS 规则，并以简单明了的方式呈现所有样式信息。它还列出了页面的所有颜色和图像，这些颜色和图像可以复制到剪贴板，或者只需点击一下按钮即可导出。
此扩展程序比浏览器的内置“检查元素”功能更容易使用，唯一的缺点是您无法动态更改元素的样式。
您可以在此处找到 CSS Peeper。
8. User CSS
此扩展程序与 CSS Peeper 配合使用，提供了一种快速简便的方法来向网页添加自定义 CSS。安装后，User CSS 易于使用 - 单击扩展程序图标并在滑出的侧面板中输入您的样式。
此扩展程序的一个不错的功能是它会保留您的自定义 CSS 样式。这意味着您还可以使用它来永久隐藏您经常访问的网站上的令人分心的功能，例如 Twitter 上的趋势小部件。
您可以从此处下载 User CSS。
9. Web Developer Checklist
上线新项目在任何时候都可能充满压力 - 有很多事情需要记住和协调。例如，您是否记得验证网站的 HTML？您是否检查了 SEO？辅助功能检查呢？您是否通过 Google Page Speed 运行它？列表还在继续。
这就是 Web Developer Checklist 扩展程序可以提供帮助的地方。它会分析网页中违反最佳实践的情况，并允许您在将网页交给客户之前发现网站中的问题区域。该扩展程序是出色的 WebDevChecklist.com 的配套程序。
Web Developer Checklist 可从此处下载。
10. Tampermonkey
用户脚本是小型计算机程序，允许您更改网页的行为。这些可以用于各种任务，例如根据您的喜好调整网站布局、向页面添加额外功能或自动化重复性任务。
Tampermonkey 是一款用户脚本管理器 - 一个允许您管理和运行用户脚本以及创建您自己的用户脚本的扩展程序。正是最后一种功能使其在列表中占据一席之地，因为您可以有效地使用 Tampermonkey 来简化您的 Web 开发工作流程。例如，我最近正在处理一个需要测试的大型表单。我没有每次都手动输入值，而是编写了一个 Tampermonkey 脚本来为我执行此操作，从而节省了无数次按键。
Tampermonkey 可在此处找到。
结论
在本文中，我们介绍了十个我最喜欢的 Chrome 扩展程序，以提升您的 Web 开发工作流程。我希望这能给您一些启发，但请记住，此列表绝非详尽无遗。
如果您错过了您最喜欢的扩展程序，或者您有宝石要与其他读者分享，我很乐意在下面的评论中收到您的来信。
感谢您的阅读。
关于用于 Web 开发工作流程的 Chrome 扩展程序的常见问题 (FAQ)
有几个 Chrome 扩展程序可以显着增强您的 Web 开发工作流程。一些顶级扩展程序包括 Web Developer、Window Resizer、ColorZilla、CSSViewer 和 JSONView。这些扩展程序提供一系列功能，从检查任何网页上的 HTML 和 CSS 元素到调整浏览器窗口大小以模拟各种屏幕分辨率。
Web Developer 扩展程序向您的浏览器添加一个工具栏按钮，其中包含各种 Web 开发者工具。这可以帮助您快速访问诸如禁用 JavaScript、查看 CSS 和检查元素等功能。它还可以帮助您验证代码并检查任何错误或不一致之处，从而使您的 Web 开发过程更高效。
Window Resizer 允许您调整浏览器窗口大小以模拟各种屏幕分辨率。这对于响应式设计测试特别有用，因为它允许您查看您的网站或应用程序在不同设备上的外观。您可以从预设屏幕分辨率列表中进行选择，也可以创建您自己的自定义大小。
ColorZilla 是 Web 开发人员和图形设计师的便捷工具。它包括吸管、颜色选择器、渐变生成器和许多其他与颜色相关的工具。使用 ColorZilla，您可以从浏览器中的任何点获取颜色读数，并快速调整它或将其粘贴到另一个程序中。
CSSViewer 是一个简单的 CSS 属性查看器。它允许您将鼠标悬停在网页上的任何元素上并查看其 CSS 属性。当您试图了解如何实现特定设计或调试您自己的 CSS 代码时，这非常有用。
JSONView 是一个 Chrome 扩展程序，有助于在浏览器中查看 JSON 文档。通常，JSON 文档仅显示为纯文本。 JSONView 格式化并突出显示这些文档，使它们更容易阅读。当您使用 API 或任何其他 JSON 格式的数据时，这特别有用。
是的，有几个 Chrome 扩展程序可用于调试 JavaScript。其中最受欢迎的是 JavaScript Errors Notifier。它通过工具栏栏中的图标或通知弹出窗口通知您 JavaScript 错误。
Clear Cache 和 Session Buddy 等 Chrome 扩展程序可以显着提高您的编码效率。 Clear Cache 允许您只需单击一下即可清除缓存、Cookie 和其他浏览数据，而 Session Buddy 允许您管理浏览器会话，从而节省您的时间并帮助您保持井井有条。
是的，有几个 Chrome 扩展程序可用于 Web 设计。一些顶级扩展程序包括 WhatFont，它允许您识别网页上使用的字体，以及 Eye Dropper，它允许您从网页中选择颜色。
您可以从 Chrome 网上应用店查找和安装 Chrome 扩展程序。只需搜索您想要的扩展程序，然后单击“添加到 Chrome”即可安装它。您可能需要重新启动浏览器才能使扩展程序生效。
以上是您的Web开发工作流程的10个顶级镀铬扩展名的详细内容。更多信息请关注PHP中文网其他相关文章！
