2019 年面向 Web 开发人员和设计师的 19 款 Chrome 扩展程序
毫无疑问，谷歌Chrome浏览器是全球最受欢迎的浏览器。就用户份额而言，谷歌Chrome遥遥领先于其他主流浏览器，例如Mozilla Firefox、Safari、Opera、Microsoft Edge等。您可以在我们关于跨浏览器测试中最重要浏览器的博客文章中查看其他浏览器与Chrome的对比情况。短短十余年间，谷歌Chrome就占据了超过65%的市场份额。其迅速崛起的关键因素之一是其庞大的扩展程序库，这使其在众多浏览器中脱颖而出，尤其对网页设计师和开发者而言更是如此。然而，如此庞大的扩展程序库也给用户挑选日常所需的扩展程序带来了一些不便。
作为一名网页开发者，我深知选择一款能够提升日常工作效率的扩展程序有多么费劲。我的同事经常会向我推荐一两款新的 Chrome 扩展程序，它们极大地帮助我更快地交付更优质的网站。回想起来，我意识到自己竟然错过了这些对网页开发者至关重要的 Chrome 扩展程序好几个月，直到一位同事提醒我。我也曾多次帮助过我的同事，我相信他们一定和我一样感同身受。当你发现某个能帮你更快完成工作的工具时，总会忍不住感叹“要是早点知道就好了”。
在本文中，我将重点介绍精心打造的 19 款最佳 Chrome 扩展程序，这些扩展程序专为 Web 开发人员和设计师设计，旨在提高他们的工作效率，让他们的工作更轻松。
1. ColorZilla – 颜色选择器和生成器
ColorZilla 是最早推出的颜色选择器扩展程序之一，距今已有 8 年多的历史，时至今日，它仍然是开发者和设计师们最喜爱的颜色选择器和吸管工具 Chrome 扩展程序之一。ColorZilla 可以让你即时读取浏览器中任意像素的颜色，并以 RGB 和 HEX 格式粘贴到其他程序中。与 Site Palette 类似，ColorZilla 也支持生成渐变色，并从任何网站提取调色板。此外，该扩展程序还会维护一个颜色历史记录索引，记录最近一次的颜色选择。
2.网站调色板– 颜色调色板生成器
下次当您遇到色彩搭配赏心悦目的网站时，这款巧妙的插件可以帮助您快速提取并生成调色板。它还允许您下载调色板预览图、PDF 文件，并生成可分享的链接。Site Palette 与 coolers.co 和 Google Art Palette 无缝集成，已成为全球开发者和设计师必备的 Chrome 扩展程序。
3.字体忍者– 字体识别器
开发者无需在 Chrome 开发者工具中逐个检查元素来查找所用字体名称，只需借助这款名为Font Face Ninja的简洁扩展程序，即可轻松识别网页上使用的所有字体。Font Face Ninja 的下载量已超过 28 万次，是另一款热门字体扩展程序WhatFont的直接竞争对手。使用这款专为开发者和设计师打造的 Chrome 扩展程序非常简单，只需将鼠标悬停在需要识别的网页文本元素上，即可弹出一个浮动窗口，显示字体名称以及一个可供预览的小窗口。您还可以将喜欢的字体添加到书签，以便日后使用。
4. Marmoset – 代码快照生成器
网页设计师和开发者在项目中可能需要创建代码快照，以达到美观或展示的目的。Marmoset 是一款出色的 Chrome 扩展程序，只需单击一下即可在几秒钟内创建精美的代码快照。这对于社交媒体帖子或作品集网站设计非常实用。它是网页开发者和设计师必备的 Chrome 扩展程序之一。
5. LambdaTest 屏幕截图– 跨浏览器测试扩展
作为一名开发者，我经常看到一些同事忽略了对他们开发的产品进行测试。有时，这种粗心大意会给产品蒙羞，导致系统宕机，给工作环境带来不便。而当你最终找到问题的根源，发现只是某个浏览器上的网页应用运行不正常时，你会觉得自己之前的做法很愚蠢。这可能是由于使用了已弃用的 CSS 特性，或是其他一些浏览器支持不佳的网页元素造成的。
我不会责怪开发者们没有进行跨浏览器测试，因为仔细想想，这确实不太现实。通过 VMware 或其他方式在多个设备上安装浏览器对所有人来说都很麻烦。而 LambdaTest 正好解决了这个问题。LambdaTest 提供了一个基于云的平台，可以在 2000 多个真实浏览器及其不同设备的浏览器版本上进行跨浏览器测试，从而帮助您打造一个美观、稳定且跨浏览器兼容的网站。对于桌面设备，您可以同时在 Windows 和 macOS 上进行测试。对于移动设备，您可以同时在 Android 和 iOS 上进行测试。
LambdaTest 推出了一款 Chrome 扩展程序，帮助用户批量执行自动化屏幕截图测试。最棒的是，您可以一次性在 25 台设备上进行屏幕截图测试。如果您发现任何 UI 异常，可以将其分享到您常用的项目管理工具中。LambdaTest Screenshot 让您能够快速执行跨浏览器测试，无疑是全球开发者、设计师以及测试人员的最佳 Chrome 扩展程序之一。
6.页面尺– 尺寸和大小检查器
Page Ruler 是开发者和设计师必备的 Chrome 扩展程序之一，它能帮助网页开发者快速测量页面上任何元素的像素级尺寸和位置。这款扩展程序会在屏幕上绘制一个标尺图像，方便您检查各个元素并查看其尺寸读数——宽度、高度以及位置。
7.尺寸– 尺寸和大小检查器
该类别下的另一个重要扩展程序名为 Dimensions，它可以帮助测量网页上各种元素之间的距离。它的功能与 Page Ruler 略有不同。Dimensions 测量鼠标指针上下左右移动到页面边界的距离。这使其成为测量图像、输入框、按钮、视频、GIF、文本和图标之间距离的理想工具。Dimensions 的另一个独特之处在于它还能处理模型图。如果您的设计师提供了 JPEG 或 PNG 格式的页面设计模型图，只需将其拖放到 Chrome 浏览器中，Dimensions 即可完美运行。需要注意的是，Dimensions 对图像的处理可能并非总是完美无缺。
8.检查我的链接– 死链检测器
Check My Links 可以说是 Chrome 扩展程序库中最强大、最可靠的断链检测工具，专为开发者和设计师打造。Check My Links 会遍历整个网页，验证每个链接的有效性，并报告其是否有效。Check My Links还支持一键将所有断链复制到剪贴板。对于任何网站而言，识别并修复断链都至关重要，这不仅有助于提升页面 SEO 效果，还能避免受到 Google 网站爬虫的惩罚。
9.清除缓存
Clear Cache 扩展程序只需单击一下即可清除缓存和浏览数据，无需打开任何弹出窗口、对话框或 Chrome 设置窗口，节省您的时间。此外，您还可以在扩展程序选项设置中自定义要清除的数据范围，包括应用缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、IndexedDB、本地存储、插件数据、密码和 WebSQL。您可以选择全局删除 Cookie，也可以针对特定域删除 Cookie。对于开发者、设计师以及所有用户来说，这都是一款非常实用的 Chrome 扩展程序。
10. Wappalyzer – 网站分析器（技术标识符）
开发者在遇到令人印象深刻的网站时，面临的最大难题之一就是——这个网站使用了哪些技术？Wappalyzer 正好可以解决这个问题。这款强大的扩展程序是由 Elbert Alias 于 2009 年开发的跨平台工具，它可以揭示特定网站所使用的技术名称。它能够自动检测超过 1000 种技术，例如网站生成器、框架、库、插件、内容管理系统 (CMS)、数据库、服务器软件、小部件、分析工具等等。您可以访问 Wappalyzer 网站，也可以使用扩展程序快速完成操作。这款 Chrome 扩展程序对于开发者和设计师来说，无疑是打造精美网站的得力助手。
11. Ghostery – 隐私工具
Ghostery 是一款隐私扩展程序，内置广告拦截器，可屏蔽网站上的烦人广告；提供追踪保护，保护您的数据并阻止第三方网站追踪；同时还具备页面速度提升和优化功能，让您的浏览体验更加简洁流畅。此外，它还配备一个可自定义的洞察仪表盘，方便您查看相关信息。
12. JSON Viewer – JSON 美化器和查看器
如果您经常使用 API，尤其是 RESTful API 或任何涉及大量 JSON 数据的 API，这款视觉效果惊艳的 JSON 高亮工具作为 Chrome 扩展程序，对开发者来说非常实用。它能将庞大的 JSON 文件数据以美观的树状结构呈现，让您无需在浏览器中以笨拙难读的格式查看，即可直接在浏览器窗口中查看。
13.窗口大小调整器– 屏幕尺寸模型
这款扩展程序对于响应式设计编码来说简直是救星。虽然大多数开发者对 Chrome 开发者工具的默认缩放功能已经很满意，但这款面向开发者和设计师的 Chrome 扩展程序可以模拟所有主流设备（例如 iPhone、iPad、Mac 等）的任意屏幕尺寸和分辨率。这对于开发者来说非常实用，他们可以借此在不同屏幕尺寸的设备上测试布局，并验证响应式媒体查询代码是否按预期工作。
不过请注意，窗口调整器只会调整视口大小，让您大致了解网站在不同屏幕尺寸上的渲染效果。要进行更准确、更全面的响应式测试，您需要使用真正的移动浏览器来验证网站的渲染效果。
14. Corporate Ipsum – Lorem Ipsum 生成器
这是另一款对开发者和设计师来说非常实用的 Chrome 扩展程序。与其使用老旧的标准 lorem ipsum 生成器来创建网页布局中的占位符文本，不如试试这款智能工具，它生成的是智能文本而非乱码。Corporate Ipsum 扩展程序是一种特殊的 lorem ipsum 生成器，它可以创建模拟的商业内容文本。这将使您的布局更具视觉吸引力，也更容易向客户展示。
15. Sessions Buddy – Tab/Session Manager
谷歌 Chrome 浏览器因其巨大的内存占用而臭名昭著，对于系统配置较低的开发者来说，在同时打开多个标签页时经常会遇到屏幕卡顿和崩溃的情况。因此，高效的标签页管理至关重要，尤其是在你为了寻找设计灵感或在 Stack Overflow 上讨论解决方案而打开标签页时，很容易忘记自己打开了哪些标签页。Sessions Buddy 正是解决这一难题的完美工具！Sessions Buddy 是功能最强大的 Chrome 扩展程序，专为开发者和设计师打造，帮助他们轻松管理浏览器标签页。它还提供了一个界面简洁美观的书签管理器，可以保存会话并在需要时快速恢复，从而避免页面杂乱，释放内存。Sessions Buddy 允许你在一个页面中管理所有标签页，按主题进行分类，并提供快速搜索功能，方便你查找特定标签页。此外，即使你不小心关闭了浏览器窗口或系统崩溃，也不用担心会话丢失。Sessions Buddy 会恢复你离开时的所有标签页。
16. CSS 查看器– CSS 属性查看器
与其浪费时间在检查器窗口或源代码中查找元素的 CSS 属性，CSS Viewer扩展程序会提取所有重要的 CSS 属性，并以有序的方式显示在浮动窗口中。只需将鼠标悬停在网页上任何要检查的元素上，CSS Viewer 浮动窗口就会列出所有关键的 CSS 属性，并按以下类别进行分类：1. 字体和文本（font-family、font-size、font-weight、line-height、text-decoration、text-align），2. 颜色和背景（color、background-color、background-position），3. 盒模型属性（height、width、padding、margin），4. 定位，5. 效果（transforms 和 transitions），以及 6. 其他属性。
17. EditThisCookie – Cookie 管理器
EditThisCookie是 Chrome 库中最受欢迎的 Cookie 管理扩展程序，拥有超过 270 万用户，堪称 Cookie 管理领域的王者。这款工具允许您添加、删除、搜索、编辑、阻止和保护（只读）Cookie。此外，您还可以导入 JSON 或 cookies.txt 格式的 Cookie。这款 Chrome 扩展程序一直是开发者和设计师最得力的 Chrome 扩展程序之一。
18. Checkbot – 网站审核工具（SEO/页面速度/安全性）
Checkbot 是一款屡获殊荣的网站审核扩展程序，可同时检查每个网站的 250 多个 URL，以排查 SEO、网站速度和安全问题，例如死链、重定向、无效的 HTML/CSS/JS、不安全的密码表单、文件压缩、重复内容等等。Checkbot 基于 Google、Mozilla 和 W3C 推荐的 50 多项最佳 SEO 和安全实践进行测试。使用 Checkbot 扩展程序将帮助您打造完美优化且安全的网站，从而在 Google 搜索结果页面 (SERP) 中脱颖而出。SERP 排名对互联网上的每一家企业都至关重要。作为开发者，您的目标是提供一个美观的网站，但如果它没有得到应有的关注，这一切又有什么意义呢？
我喜欢经常使用 Checkbot 对我的网站进行审核，我发现它对于全球的开发人员和设计师来说都是一个非常方便的 Chrome 扩展程序。
19. Web 开发人员– Web 开发工具包
这款 Chrome 扩展程序是开发者和设计师的必备之选，它会在浏览器中添加一个包含完整 Web 开发工具的工具栏。该扩展程序提供的工具分为 10 个独立的标签页——禁用、Cookie、CSS、表单、图像、信息、其他、大纲、调整大小和工具。
这些工具包括禁用 JavaScript/插件/弹出窗口/通知、cookie 管理器、CSS 属性查看器和编辑器、表单和图像操作、窗口大小调整器、缓存管理、页面标尺、属性检查器等。
结论
每周都有数十款令人兴奋的全新 Chrome 扩展程序发布，这些扩展程序都是 Chrome 开发者专为 Web 开发人员精心打造的。这些面向开发者和设计师的 Chrome 扩展程序种类繁多，从基础实用工具和设计工具到针对各种语言和框架的开发工具，应有尽有，可以为您节省大量时间，并将您的工作效率提升到一个全新的水平。请继续探索新的 Chrome 扩展程序，如果您发现我遗漏了什么，请在下方评论区分享您的看法。期待听到您最喜欢的 Chrome 扩展程序。祝您使用愉快！
