面向开发者的 Chrome 扩展程序大全 🔥
*题图作者：Shen Comix
开发者花费大量时间使用浏览器。截至 2021 年 2 月，全球 63% 的互联网用户更喜欢使用Google Chrome 浏览器而非其他浏览器。这并不奇怪，因为 Google Chrome 拥有丰富的扩展程序，可以扩展浏览器的功能。因此，您无需安装额外的软件和工具，即可创建自己的个人扩展程序工具包，随身携带——只需在任何预装了 Google Chrome 的设备上登录您的 Google 帐户并同步数据即可。
我们邀请了actiTIME的开发人员分享他们日常使用的 Google Chrome 扩展程序，并整理出了这份全面的开发和效率扩展程序合集。保存此列表，以便随时查看。
目录
面向开发者的 Chrome 扩展程序
网页设计工具
Sitemod.io
Sitemod.io 是您开发者工具包中必备的扩展程序。它允许您在无需访问网站源代码的情况下编辑、保存和分享任何网站。借助此扩展程序，您可以编辑任何网页或向其中添加您自己的 HTML、CSS 和 JS 代码。之后，您可以创建一个指向修改后网站的可分享链接。
这款扩展程序对所有从事网页设计的人都非常有帮助：
- 能够实时编辑网站的自由职业者和机构
- 能够将应用程序安装到客户网站上的销售和营销团队
- 网站所有者只需使用此浏览器扩展程序即可测试 Web 应用程序。
CSS 查看器
CSS Viewer 是一款 Chrome 扩展程序，最初是为 Firefox 开发的。其原作者 Nicolas Huon 于 2008 年停止了对原版扩展程序的支持，因此一位 GitHub 用户将其移植到 Google Chrome，并以公共许可证发布，之后发布了多个版本，添加了新功能和修复了已知问题。
顾名思义，CSS Viewer 会显示鼠标指针指向的任何对象的 CSS 属性，包括字体、颜色和定位属性。
WhatFont
WhatFont 是一款 Chrome 扩展程序，可用于识别网页上使用的字体。将鼠标悬停在文本上后，会弹出一个窗口，显示字体系列、字号和行高。它还能检测用于提供网页字体的服务。支持 Typekit 和 Google Font API。
WhatFont 是一款轻量级解决方案，专为收集优秀网页示例的 Web 开发人员而设计。当您发现某个网站使用了操作系统预装标准字体列表中没有的精美字体时，它尤其有用。
窗口大小调整器
此扩展程序可调整浏览器窗口大小以模拟不同的分辨率。您只需从列表中选择设备，即可查看布局在该设备上的显示效果。
窗口大小调整器完全可自定义：您可以添加、编辑、删除和重新排列预设。使用键盘快捷键浏览弹出窗口，将快捷键分配给您最常用的工具，并在设备之间同步它们。
Web 开发工具
网站开发人员
这款扩展程序在 Chrome 网上应用商店拥有超过 100 万用户，绝对是必备之选。Web Developer 为您的浏览器添加了一系列实用的 Web 开发工具，涵盖 Cookie、CSS、表单、图像、页面信息等诸多方面。例如，您可以禁用 JavaScript、查看 Meta 标签页面信息、调整浏览器窗口大小等等。
网站开发人员检查清单
Web Developer Checklist 是一款 Chrome 扩展程序，可帮助您识别网站问题。它会检查网站的性能、可用性、语义、SEO、代码质量、可访问性、安全性等诸多方面。如果您需要在发布网站页面之前确保其运行正常，这款扩展程序尤其有用。
因此，您可以利用此扩展程序作为任务提醒，协调网站开发进度，并在交付前发现网站问题。
Redux 开发工具
Redux DevTools 是最实用、最强大的工具之一，可用于增强 Redux 开发工作流程或任何其他处理状态变更的架构。它的优势之一是能够轻松追踪 action 和状态变更。其他功能包括 action 跳过、时间旅行、自定义 dispatch、允许/阻止 action 等等。
Redux 是大型 React 应用中最常用的状态管理库之一。了解如何在您的环境中设置 Redux DevTools 。
JSON 查看器
如果你曾经使用过类似 API（尤其是 RESTful API）的 JSON 代码，那么你一定知道 JSON 代码有多么难以阅读和笨拙。这款 Chrome 扩展程序可以高亮显示在线和本地 JSON 文件中的语法，使其更加直观易懂。
JSON Viewer 是一款优秀的轻量级扩展程序，可让您直接在 Google Chrome 中查看和编辑 JSON，而无需借助其他独立应用程序。
Vue.js 开发工具
Vue.js devtools 是一款 Chrome 扩展程序，它介于库和功能齐全的框架之间。它允许您编辑组件数据、在 DOM 中加载组件、跟踪自定义事件、监控路由历史记录和数据、调试 Vuex 行为以及在之前的状态之间进行时间回溯。
这款扩展程序最大的优点在于它对新手和经验丰富的开发者都同样友好易用。高级用户可以轻松地对其进行调整，以满足自身需求。
React 开发者工具
React Developer Tools 是一款适用于开源 React JavaScript 库的 Chrome 开发者工具扩展程序，该库用于构建用户界面。此扩展程序提供了一组额外的 React 专用检查组件，以辅助您的开发工作。
React Developer Tools 提供了显著的性能提升、改进的导航体验、视觉和功能改进，使代码调试更加容易。
AJAX调试器
此扩展程序会将所有 AJAX 活动记录到开发者工具控制台，方便开发者检查 AJAX 调用，并在新标签页中打开包含所有输入信息的调用。它使开发者能够轻松查看顶级请求信息，例如 HTTP 状态、响应时间和大小。
记录的数据包括调用的文件、响应时间、大小和状态、包含所有输入参数的 AJAX 源链接、包含所有请求和响应详细信息的对象等等。
网站分析
瓦帕利泽
Wappalyzer 扩展程序可以识别网页背后的工具和技术。这些工具和技术包括一千多种不同的网络服务、内容管理系统 (CMS)、分析工具、插件、JavaScript 库等等。
或者，您也可以访问该扩展程序的官方网站，在那里您可以搜索任何网站并查看它使用的技术。
灯塔
Lighthouse 是 Google 开发的一款开源工具，用于审核网站性能、可访问性、渐进式 Web 应用、SEO 等。选择要审核的页面，点击扩展程序按钮，然后点击“生成报告”。新标签页将打开，显示页面质量审核结果。
您还可以通过 Chrome 开发者工具、命令行或 Node 模块运行 Lighthouse。该扩展程序只是让您只需点击几下即可访问此功能。
查看我的链接
此扩展程序会遍历页面，查找有效链接和失效链接，并将其高亮显示。它可以帮助您自动修复链接。
加载页面，点击图标，将弹出一个包含链接统计信息的窗口。扫描过程可能需要几秒钟，具体时间取决于页面大小。
GitHub 和 GitLab 工具
八叉树
OctoTree 增强了 GitHub 代码审查和探索体验。首先，它以树状视图的形式在可折叠侧边栏中显示仓库结构。此外，它还提供类似 IDE 的快速代码树、快速文件搜索、GitHub 主题、私有仓库支持、Omni 书签等功能。OctoTree 的使用体验与 GitHub 中的 Visual Studio Code 非常相似。
高级功能包括 20 多个主题、代码字体设置、快速 PR 导航、拉取请求代码审查、侧边栏停靠位置、多个 GitHub 帐户等等。个人用户付费方案价格为每年 35 美元，5 人以上团队的付费方案价格为每用户每年 50 美元。
OctoLinker
另一个适用于 GitHub 的浏览器扩展程序，可以将诸如“include”、“require”或“import”之类的编程语言特定语句转换为指向源代码的链接。您只需点击链接即可访问源代码。
该扩展程序支持大多数 Web 开发语言，但 C 系列语言除外。
增强型 GitHub
这款小巧的浏览器扩展程序会显示每个文件的大小、下载链接，并将文件内容直接复制到剪贴板。对于私有仓库，您需要一个 GitHub 访问令牌。
Enhanced GitHub 是一款颇具吸引力的 Chrome 扩展程序，旨在对 GitHub 的功能进行细微但相当重要的改进。强烈推荐。
Chrome 效率扩展程序
隐私保护
幽灵
此扩展程序可以检测并阻止广告、跟踪器和其他记录您的行为并减慢页面加载速度的工具。
Ghostery 不仅可以消除网站上的烦人广告，还能阻止第三方工具和网站追踪您的活动。它是完全免费的，无需注册或登录即可开始使用。
清除缓存
这是一个小巧的工具，需要一些权限才能在几下点击后清除缓存。它允许您选择清除其他数据：应用缓存、Cookie、下载记录、表单数据、历史记录、插件数据、密码等等。您可以全局删除 Cookie，也可以针对特定域名或除特定域名外的所有数据进行删除。
时间与任务跟踪
行动时间
actiTIME 是一款便捷的时间跟踪扩展程序，可与任何开发者工具和其他基于浏览器的工具集成。您只需创建一个免费帐户，添加任务列表，即可使用扩展程序的计时器来跟踪任务耗时。
在 actiTIME 的完整网页界面中，您可以查看每周工时表，了解您的工作时长。此外，您还可以创建图表和报告，查看您的时间在各项任务和项目中的分配情况。对于个人用户和最多 3 人的团队，actiTIME 可免费使用。对于规模更大的团队，定价方案起价为每用户每月 5 美元。
专注待办事项：番茄钟计时器和待办事项清单
此扩展程序结合了番茄钟计时器和基本任务管理功能。您可以创建任务列表、使用计时器，并通过可视化图表和报告查看您的工作效率。
这款扩展程序最大的缺点是只能免费使用两天。之后，您需要购买高级套餐，起价为每三个月 2.99 美元。即使是云备份和报告等最基本的功能也需要付费。
屏幕截图和视频录制
超棒的屏幕截图：屏幕录像机
开发人员经常需要截屏和录制视频来提供证据，以说明概念或证明刚才一切正常。这款扩展程序允许您截屏、录制屏幕，甚至还能从麦克风和摄像头捕获音频和视频，帮助您清晰地表达自己的想法。
此外，您还可以对屏幕截图进行注释，连接 Slack、JIRA、Asana 等工具，并立即分享可视化内容。
Vimeo 录制 – 屏幕和网络摄像头录制
Vimeo Record 是一款高级浏览器扩展程序，可让您录制和分享视频消息。您只需选择要录制的内容——屏幕、声音、面部——然后开始录制即可。
最便宜的付费套餐每月收费 12 美元，您将获得播放器自定义、隐私控制、无限屏幕和网络摄像头录制以及每周 5GB 的磁盘空间。
广告拦截扩展程序
AdBlock — 最佳广告拦截器
这款扩展程序是一款免费的广告拦截器，可以拦截网站、视频流媒体平台等所有平台上的广告。它还能保护您的浏览器免受恶意软件的侵害，并阻止广告商访问您的浏览历史记录和个人信息。
此扩展程序是“可接受广告”计划的一部分，这意味着默认情况下不会屏蔽不显眼的广告，以支持网站运营。同时，您也可以在扩展程序设置中移除所有广告，并手动设置白名单和过滤器。
Adblock Plus – 免费广告拦截器
Ablock Plus 是一款免费的广告拦截扩展程序，可以拦截广告、横幅广告、弹出窗口和恶意软件。不仅如此，它还能阻止第三方跟踪您的在线活动，并提升页面加载速度（因为加载所需的资源更少）。
此扩展程序也是“可接受广告”计划的一部分，但您可以随时选择将其关闭并屏蔽所有广告。
书签和笔记
Google Keep Chrome 扩展程序
这是 Google Keep 的官方浏览器扩展程序。有了这款便捷的工具，您可以保存网页、图片、语录——网络上的任何内容，以便日后查看。与其他 Google 应用一样，所有保存的数据都会自动保存到云端，并在不同设备间同步。
此外，您还可以对已保存的内容做笔记、添加标签，并将所有内容免费存储在一个地方。
书签侧边栏
书签侧边栏会在浏览器窗口边缘添加一个美观简洁的可切换侧边栏，其中包含您的 Google 帐户书签。您可以通过拖放来编辑、删除或重新排列书签，并将鼠标悬停在书签上查看其基本信息。
Chrome开发者新闻扩展程序
Daily.dev
daily.dev 是一个面向繁忙开发者的资源网站，旨在帮助他们获取来自顶级技术博客的最新资讯。这款浏览器扩展程序会将您的新标签页替换为 daily.dev 的热门文章标签页。您还可以个性化设置信息流，选择标签和资源来获取新闻。
此扩展程序是开源的，安全可靠。无需注册，但您可以使用个人帐户对您最喜欢的文章进行投票、保存和分享。
迪沃
Devo 是另一款新的标签页扩展程序，无需登录即可显示 GitHub 热门话题、Product Hunt、Hacker News 和其他热门新闻和首页。
您可以自由更改卡片位置，手动更新来源，并以不同的顺序显示您想要的任何平台。最新的平台列表包括 GitHub Trending、Hacker News、Product Hunt、Designer News、DEV Community 和 Lobste.rs。
准备好提升您的开发工具和技能了吗？
我们能给你的最佳效率提升建议就是记录你的时间，并注意如何利用时间。因为如果你没有有效地利用时间，任何技巧、窍门或浏览器扩展程序都无法帮助你提升职业发展。所以，如果你不确定该从哪个 Chrome 扩展程序开始，我们推荐你试试 actiTIME。
actiTIME是一款免费的时间追踪软件，适用于个人用户和最多 3 人的小型团队。您可以使用浏览器扩展程序追踪时间，也可以在在线时间表中手动记录时间，或者使用我们的免费移动应用程序来使用计时器或手动记录工时。actiTIME 可轻松与您常用的工具集成，包括 JIRA、GitHub、GitLab、Trello 以及 2000 多种其他软件。使用 actiTIME，您可以查看项目进度、生产力趋势、计算客户工作成本等等——立即免费创建您的帐户。
