转载说明：原创不易，未经授权，谢绝任何形式的转载
浏览器是开发人员最强大的工具。 99% 的人不会 100% 地利用他们的浏览器。这里有 30 个浏览器扩展，如果你能合理充分利用将大大提升你的开发效率，本篇文章是其中的第二部分。
11. Visbug
Visbug 是一个谷歌浏览器的开源设计工具插件，主要面向网页设计师和前端开发者，旨在让设计师们在浏览器中更轻松地编辑和调试网页设计。
Visbug 支持通过点击、拖动、调整大小等方式来编辑和设计任何状态下的网页，就像在艺术板上一样自由。通过 Visbug，用户可以检查样式、间距、距离、可访问性和对齐等细节，并在任何设备尺寸下精细地调整布局和内容。用户可以利用 Adobe / Sketch 等设计软件的技能，在混乱的环境中进行设计，并利用实际的生产环境或原型作为艺术板和设计机会。
Visbug 还支持模拟延迟、国际化、媒体查询、平台限制、CPU、屏幕尺寸等因素网站本地测试，让用户更好地在前端进行决策（如可访问性、响应式、边缘情况等）。用户可以直接编辑终端状态的设计，并在没有等待开发人员的情况下执行/测试自己的想法。
Visbug 的目标是为设计师和内容创作者带来更多的掌控力，通过将设计工具的交互和快捷键带入浏览器，让设计师们能够更自由地发挥他们的创意和想象力，从而提升网页设计和开发的效率和质量。
12. Motion DevTools
Motion DevTools 是一个谷歌浏览器的扩展程序，主要用于检查、编辑和导出使用 CSS 和 Motion One 制作的动画效果。
通过 Motion DevTools，用户可以点击录制按钮并与页面进行交互，检测到的 CSS 和 Motion One 动画将在经典时间轴界面上绘制。用户可以使用播放控件来浏览和重播动画，从任何时间点开始。
在编辑方面，用户可以添加、移动和删除关键帧，使用自定义控件编辑值和缓动，并实时反映到页面上。
在导出方面，用户可以通过 Motion DevTools 完成动画的优化，点击导出按钮即可立即生成代码。用户可以将任何动画导出为 CSS 过渡、CSS 动画或 Motion One。
总的来说网站本地测试，Motion DevTools 为用户提供了一种方便的工具，帮助他们在浏览器中检查、编辑和导出动画效果。它提供了一套直观的界面和强大的编辑功能，使得动画效果的创建和修改变得更加简单和高效。
13. Kontrast
Kontrast 是一个谷歌浏览器的扩展程序，主要用于快速检查和调整文本和背景对比度，以符合Web内容无障碍指南（WCAG）的要求。
Kontrast 提供了以下功能：
✔ 自动检查所选元素的对比度
✔ 显示可访问性比率
✔ 自动获取最接近 WCAG 兼容颜色
✔ 颜色滑块
✔ RGB 和 HSL 模式
✔ 颜色选择器
✔ 轻松复制颜色（HEX、RGBA、HSLA）
✔ 忽略 CSS 悬停效果
✔ 暗模式
Kontrast 的使用可以帮助用户快速检查和调整页面中的文本和背景对比度，以满足 WCAG 要求，提高网站的可访问性。通过自动检查对比度并显示可访问性比率，用户可以快速确定页面元素是否符合 WCAG 要求，并在需要时进行调整。除此之外，Kontrast 还提供了丰富的颜色工具，帮助用户轻松选择和编辑颜色。
14. PerfectPixel
PerfectPixel是一个谷歌插件，它可以在开发HTML时帮助开发人员和标记设计师将半透明图像覆盖在其上，以便进行像素完美的比较。
功能：
15. Site Pallete
Site Palette是一个免费的谷歌浏览器扩展程序，它可以从任何网站中提取颜色，是设计师和前端开发人员必备的工具。它具有以下功能：
使用Site Palette，您可以轻松提取任何网站中使用的颜色，并生成完整的调色板。它还可以生成共享链接，您可以与团队或客户共享调色板。Site Palette支持几个调色板生成器，并支持Adobe Swatch。您还可以在coolors.co和Google艺术调色板上微调您的调色板。
16. Pesticide
Pesticide for Chrome 是一款谷歌插件，它将 Pesticide CSS 注入到当前页面中，以更好地查看页面上各个元素的布局。
使用这个插件，你可以快速查看页面上各个元素的位置和大小，以便更好地进行设计和开发。它可以帮助你在进行调试和排除故障时更有效地定位元素，并更好地理解网页的结构和布局。它还可以用于网站的可访问性测试，以确保各个元素的大小和位置满足相应的标准和要求。
17. Responsive Design Tester
这个 Chrome 插件名为 “Responsive Tester”，其主要功能是帮助开发人员测试网页在不同屏幕尺寸下的响应式布局。
插件特点：
该插件对于开发人员在进行响应式设计时进行测试非常有帮助。通过在不同尺寸下预览网页，开发人员可以确保网页的布局在各种设备上都能够良好的显示和使用，提高网站的可访问性和用户体验。
18. ColorZilla
ColorZilla是一个谷歌浏览器插件，它提供了多种功能，让Web开发人员和设计师更轻松地工作。以下是ColorZilla的主要功能：
吸管工具 – 可以获取网页上任何像素的颜色。高级取色器 – 类似于Photoshop的功能，可以获取并调整任何颜色。CSS渐变生成器 – 可以生成CSS渐变代码。网页颜色分析器 – 可以获取任何网站的颜色调色板。调色板查看器 – 可以预览7个预装的调色板。颜色历史记录 – 记录最近选取的颜色。元素信息显示 – 显示标签名称，类，ID，大小等信息。自动将选定的颜色复制到剪贴板。支持键盘快捷键。获取动态悬停元素的颜色。单击开始选择颜色（仅限Windows）。从Flash对象中获取颜色。可以在任何缩放级别上拾取颜色。
ColorZilla需要访问所有网站上的数据，以便进行基本功能的颜色选取。但它不会收集用户的任何数据或浏览活动，非常注重用户隐私。用户如果遇到问题或发现bug，可以直接联系插件官方以获取帮助。
19. Lorem Ipsum Generator
这是一款名为 “Lorem Ipsum Generator” 的谷歌浏览器插件，可以快速生成默认文本或Lorem Ipsum文本。默认设置优化了插件的使用体验，但用户也可以自定义设置来获得更适合自己的文本。每个句子都是随机生成的，以模拟真实文本。
此插件的选项包括：
该插件只需要获取存储权限，以便保存用户的偏好设置。如果您需要快速获得占位文本或Lorem Ipsum文本，该插件将是一个很好的选择。
20. Code Beautifier
这是一个用于美化 CSS、JavaScript 和 JSON 代码的谷歌浏览器扩展程序。当您打开一个 .css、.js 或 .json 文件时，它可以自动（可选）美化源代码。
该插件的特点包括：
支持 CSS(Less/Scss/Sass) / JavaScript(JSON/JSX/TypeScript) 格式化支持解包或反混淆 JavaScript支持60多种语法高亮主题使用 JSBeautifier() 和 CodeMirror()。
使用该插件，您可以在打开 CSS、JavaScript 或 JSON 文件时，以更加美观易读的方式浏览源代码。
总结
当今，谷歌浏览器插件已经成为了每个网页开发者或者设计师必备的利器之一。上文提到的几款插件可以让用户轻松地进行网页测试、颜色选择、默认文本生成、代码优化等等。这些插件不仅可以提高工作效率，而且还可以让用户更加专注于网页的细节设计。无论你是一个网页开发者还是一个网页设计师，这些插件都将成为你不可或缺的好帮手。
今天的内容就分享到这里，剩下的10个我将在接下来的文章里进行介绍，敬请期待。如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。
本文到此结束，希望对大家有所帮助！
