2021 年值得推荐的 14 款 Chrome 开发者插件

Web Developer

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

使用它你可以使用到许多不同的 Web 开发工具。一些最常用的包括快速清除会话 Cookie、显示元素信息、显示图像文件大小、显示地形信息和编辑 CSS。

使用这些方便的工具，你可以快速检查元素并开始调试你的网站。这个插件最大的一大优点是你可以在所有流行的浏览器（Firefox、Opera 等）和你使用的任何操作系统上运行它。这意味着你可以使用它在任何地方进行调试和检查。

在它的官网（https://chrispederick.com/work/web-developer/to-do/#item-2BE123DD-69E7-4419-AFF2-FC7AA8E153B2）上还有一堆令人期待的 Todo List。

Wappalyzer

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?ref=designrevision.com

Wappalyzer 是一款功能强大的、且非常实用的 Chrome 网站技术分析插件，通过该插件能够分析目标网站所采用的平台构架、网站环境、服务器配置环境、JavaScript框架、编程语言等参数，使用时很简单，开启你要分析、检测的网页后，点选该图示即可看到网站使用的相关技术和服务。

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

WhatFont 采用鼠标悬浮特性，点击后就可以告诉你所指字体的属性，字体名称、字体大小、字体颜色等，非常方便，目前有 Chrome 和 Safari 扩展，Firefox 的用户可以使用书签栏工具。它是一个快捷方式，因此你不必检查每个元素。

Eye Dropper

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka

就像网站字体一样，在某个时间点，你会想知道网页上显示的颜色代码。你可以使用这个方便的小 Chrome 扩展程序。

使用它，你可以将鼠标悬停在网页上并识别特定颜色。如果你单击颜色，它将复制到剪贴板，以便你可以轻松访问它。颜色代码有 RGB 值和十六进制值两种，甚至可以使用这个工具访问你的历史记录，如果你不记得你正在欣赏的网页，这个工具还是非常方便的。

Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/

Window Resizer 是一款可以调整浏览器窗口大小的 Chrome 窗口缩放插件，特别适合 Web 前端开发，用户安装了 Window Resizer后，可以使用插件提供的选项来选择浏览器窗口大小，提供了多种常用尺寸可选或自定义窗口大小，为页面适配提高效率。

插件还有一个实时窗口测量器，因此当你手动调整屏幕尺寸时，你就知道正在使用的尺寸。此外，还有一个旋转功能，因此你可以查看侧视图的外观并涵盖所有角度和变化。

CSS Viewer

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

CSSViewer 是一个简单的CSS属性查看器。它提供了一个浮动面板，该面板显示鼠标悬浮在的元素的标识，以及它的字体、文本、颜色、背景、框、定位和效果属性。CSSViewer 可以提供你所需要的基本的CSS信息。工具是开源的，因此你可以在 GitHub 上找到源码

Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

Clear Cache 给你提供了清除缓存的最简单方法。只需单击一下按钮，你的所有浏览数据都将一去不复返！

没有确认对话框，没有弹出窗口或其他任何减慢你的清算过程的东西。只需单击一下。你还可以自定义从以下位置清除的数据量：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。

你可能讨厌 cookie，但有些 cookie 其实是对你很有帮助的，使用它你还可以自定义哪些域 cookie 被删除，哪些未被使用。

EditThisCookie

https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg

使用这个 cookie 管理器，你可以对 cookie 做任何你想做的事情。你可以添加、编辑、删除、搜索、阻止、设置到期日期等等！

除了基本的 cookie 编辑功能外，你还可以进行批量编辑，这可以帮你节省大量时间。

Marker.io

Marker.io 是一个非常方便的 Web 开发工具，它可以让网页上的错误报告更快、更直观。你可以轻松捕获屏幕截图并利用编辑功能清楚地勾勒出错误的位置和内容。

此扩展的优点在于它可以与你可能在工作中使用的大多数项目管理工具集成，例如 Trello、Jira、GitHub、Asana 以及其他一些工具。突出显示问题后，你可以直接从扩展程序创建票证，而无需离开站点或在应用程序之间切换。

这个工具是付费的，也有试用版，可以玩玩看。

React Developer Tools

不用多说，React 开发者必备！

Vue.js Devtools

Vue 开发者必备！

Svelte Devtools

Svelte 开发者必备！

Color Tab

https://chrome.google.com/webstore/detail/color-tab/hchlgfaicmddilenlflajnmomalehbom

还在为选择颜色而发愁吗？每当你打开新标签页时，都会出现一个漂亮的调色板……

Octotree

https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc

Octotree 可以为 GitHub 项目生成一个文件菜单树，就跟在 IDEA 中看到的效果一样。在左边会生成一个 Octotree 按钮，鼠标滑动代码文件树，这样就不用一层一层的找文件了。另外它还支持私有存储库、Omni 书签、高性能、使用任何大小的存储库。