21CTO导读：本指南推荐 12 个可以帮助我们开发者提高工作效率的 Chrome 扩展，相当有用，值得收藏。

本篇文章中，将推荐 12 个可以帮助开发者提高工作效率的 Chrome 扩展（插件）。

这些扩展包括适合所有类型开发人员的工具，适合前端、后端以及全栈开发人员。通过使用这些扩展，开发者们可以节省时间并高效地完成更多工作，建议大家使用这些Chrome扩展程序来提高工作效率并简化编码！

 Responsive Viewer

作为前端开发人员，您需要确保响应式设计在所有屏幕尺寸上看起来都很棒，这是非常重要的事，而有时经常需要拖拉浏览器，而这就是 Responsive Viewer的用武之地！

Chrome 扩展允许你同时在多个屏幕上预览网站或应用程序，你可以轻松识别和修复任何问题。

使用 Responsive Viewer，测试自己的响应式设计从未如此简单。试一试，看看它对你的工作流程有何种积极影响！

🔗 下载地址：

https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

Material icons for github

Material icons for github 扩展将GitHub文件浏览器中的文件和文件夹图标更改为代表文件类型和使用它的工具的图标。使用的图标来自 Visual Studio Code 的 Material Icon Theme。该扩展可以在多个网站上使用，包括 GitHub、Gitlab、Bitbucket 等

🔗 下载地址：

https://chrome.google.com/webstore/detail/material-icons-for-github/bggfcpfjbdkhfhfmkjpbhnkhnpjjeomc

Hackertab

这可是个好扩展，Hackertab帮助开发者了解最新的开发人员新闻、工具和事件等。

使用Hackertab ，你可以自定义提要，用以专注于感兴趣的特定领域内容，无论是前端、后端、全栈、移动还是数据科学。Hackertab 从最好的开发者新闻来源获取内容，包括 GitHub、Hacker News、DevTo、Hashnode 等国外技术社区。

🔗  下载地址：

https://chrome.google.com/webstore/detail/hackertabdev-developer-ne/ocoipcahhaedjhnpoanfflhbdcpmalmp

Code Grepper

Code Grepper通过立即从您的 google 搜索结果中显示代码片段来帮助您更快地开发。

将答案放在搜索结果的顶部可以让您不必在论坛中搜索正确的答案，快速访问正确的答案可以让您留在“开发者专区”。

🔗 下载地址：
https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco

Clear Session

这个扩展和它的名字一样，可以完全按照它的承诺行事：它会从你当前访问的网站上删除所有 cookie、会话数据以及本地存储。这在某些边缘情况下很有用，例如发送邀请或测试每种用户类型权限等场合。

🔗 下载地址：

https://chrome.google.com/webstore/detail/clear-session/maejjihldgmkjlfmgpgoebepjchengka?hl=en

Better History 

Better History 是一个可以增强你的浏览历史记录之扩展。

它使你可以更轻松地搜索历史记录，可以按域名或日期对历史记录条目进行分组和组织，甚至可以导入和导出你的历史记录以进行妥善保管。

借助 Better History，可以从浏览历史中获取更多信息并使其为自己所用。

🔗 下载地址：

https://chrome.google.com/webstore/detail/better-history/egehpkpgpgooebopjihjmnpejnjafefi

OctoLinker 

OctoLinker 帮助用户更有效地浏览项目。它将特定于语言的语句转换为链接，并允许用户快速链接到相关文件、发现依赖项、访问 API 文档以及审查拉取请求中的代码。

🔗 https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp?hl=en

Resource Override

如果你是 Web 开发人员，就会知道调试生产型网站是多么令人沮丧和费劲。

但是你使用了Resource Override ，就可以轻松地即时编辑和注入代码，这将使调试过程变得流畅顺滑～

此外，你不必再筛选缩小的代码，只需重定向到未缩小的版本或使用集成的文件编辑器将其粘贴进去就行。

总体来说，这个扩展对于任何使用生产网站的人来说都将是一个游戏规则的改变者。

🔗 下载地址：

https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii

screenshot.rocks

使用此扩展后，只需单击一下即可快速轻松地创建漂亮的浏览器和移动端模型。

你可以将屏幕截图包在可自定义的框架中，应用不同的样式和颜色，甚至可以将它们导出为现在的流行格式。使用screenshot.rocks ，你可以屏幕截图脱颖而出，再也不会发送无聊的屏幕截图，适合又会产品，或者会设计的开发者。

🔗  下载地址：

https://chrome.google.com/webstore/detail/screenshotrocks-one-click/oolmphedpohnagciifbnfpemadolahki

Gimli Tailwind

Gimli Tailwind是一个 DevTools 扩展，可帮助开发者更高效地使用 Tailwind CSS。

它提供即时反馈，并允许开发者通过悬停或使用键盘快捷键来预览更改。

Gimli Tailwind 以与官方文档相同的方式对输入进行分组，并且仅显示 flex 和网格元素的相关输入。它的目标是帮助开发人员更快地构建更好的网站。

🔗  链接：

https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl

开发者工具 z-index

此扩展程序将显示一个元素排名的“z-index”窗格，帮助你减少 z-index 值的数量并使其更容易管理网页布局。

此扩展对于使用 CSS z-index 属性的开发者特别有用，可灵活指定网页上元素的堆叠顺序。

🔗  链接：

https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe?ref=hackernoon.com

PerfectPixel

PerfectPixel 通过在开发的 HTML 之上叠加半透明图像，帮助开发者和设计师确保他们的代码与设计完全匹配。

它具有多层支持、层反转和缩放，以及在会话之间保存层的能力。PerfectPixel 可用于创建具有像素完美精度的网站，并具有方便的用户界面，支持拖放文件上传以及键盘箭头和鼠标滚轮支持。

🔗  链接：

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

结语

总体而言，有很多方法可以提高开发人员的工作效率。通过使用有用的 Chrome 扩展程序并实施有效的策略，开发者可以简化工作流程，并取得更大的价值与成功。 

作者：写代码的大雄