作为一名 Web 开发者,我的 Chrome 扩展程序

2025-06-08

作为一名 Web 开发者,我的 Chrome 扩展程序

Chrome 扩展程序。超级实用,让您在最爱的浏览器中提升效率。Chrome 扩展程序是由开发者创建的工具,旨在提升 Chrome 的使用体验。在研究并学习了其他开发者的经验后,我整理了一份 Web 开发者必备的 Chrome 扩展程序清单。这些扩展程序的排列顺序不分先后

Daily.dev

替代文本
来源

这个扩展程序是我的最爱之一。最新、最重要的开发新闻取代了你乏味的 Chrome 标签页。这个扩展程序让你随时了解开发者世界的最新趋势。你甚至可以看到你在 dev.to 上发表的文章被推荐到 daily.dev 上!如果你还不信,他们还有一个非常酷的视频:这里

GitHub 和 GitLab 的文件图标

替代文本
来源

厌倦了 GitHub(我从未使用过 GitLab,所以无法代表它发言)提供的那些乏味的图标。使用 GitHub 和 GitLab 的文件图标,为 GitHub 和 GitLab 上的每个文件添加这些改进的醒目徽标。

React 开发者工具

替代文本
来源

这款 Chrome 扩展程序是 React 开发者的必备工具。React 开发者工具在 Chrome 开发者工具中添加了 React 调试工具(组件和分析器)。此外,这款扩展程序还会告诉您当前页面是否由 React 构建。这非常准确,这并不奇怪,因为这款扩展程序是由 React 的创建者 Facebook 开发的。

JSON视图


来源

如果您使用过 JSON,那么这款 Chrome 扩展程序绝对是您的完美之选。JSON View 允许您验证和查看 JSON 文档。JSON View 还能让您轻松读取 JSON 文档,就像您常用的 IDE 一样。

势头

替代文本
来源:我的 Chrome 标签

这款扩展程序是本榜单上最受欢迎的扩展程序之一。Momentum 将单调乏味的白色 Chrome 标签页替换成了美观的照片、一句名言和一句问候语。它还提供了更多功能:待办事项列表、天气、书签,付费版本则提供了更多功能。这让我每次在 Chrome 中搜索时都更加轻松自在。

Wappalyzer

替代文本
来源

Wappalyzer 可以检测并告知您页面上使用了哪些技术。对于像我这样的技术宅来说,了解每个网站使用的技术非常有意思。需要说明的是,Wappalyzer 的预测大部分情况下是正确的,但大约 5% 的时间会略有偏差。

Octotree - GitHub 代码树


来源

Octotree 添加了一个选项卡,可以在类似 IDE 的代码树中显示你当前所在的仓库。这在 GitHub 仓库中高效切换文件时非常有用。我认为这是我们 GitHub 需要添加的功能。此扩展还有一个专业版,支持暗黑模式、代码字体、侧边栏停靠位置等。如果你进行代码审查或只是想高效地浏览 GitHub 仓库,那么 Octotree 是必备工具。

OctoLinker


来源

OctoLinker 与此列表中的前一个扩展 Octotree - GitHub 代码树完美匹配。当 GitHub 上的任何代码中存在 require 或 import 时,此扩展都会将其链接到其 require 或 import 的内容。与前一个扩展一样,在浏览 GitHub 代码时,OctoLinker 可谓救星。

Moesif Origin 和 CORS 转换器


来源

为了避免跨域错误,请使用 Moesif Origin & CORS Changer。此扩展程序允许您直接从浏览器发送跨域请求,而不会收到跨域错误。这是我发现的从浏览器发送跨域请求的最佳扩展程序。

Apollo 客户端开发者工具


来源

此扩展类似于 React Dev Tools,但适用于 Apollo Client。Apollo Client 开发者工具在 Chrome 开发者工具中添加了一个选项卡。此选项卡增强了 Apollo Client 的调试体验。您可以直接从 Chrome 开发者工具进行 GraphQL 查询,拥有并使用“查询观察器”,拥有并使用“变更检查器”,以及检查缓存,所有这些都可以在这个新选项卡中完成。如果您使用 Apollo Client,这是必备的。

Chrome 版 Loom


来源

正在与团队合作开展项目,需要一种方式来解释和反馈你/他人的代码?使用 Loom for Chrome(非赞助)。Loom for Chrome 是录制 Chrome 屏幕并同时发言的最简单方法。视频会展示你的屏幕,并在底部显示一个小圆圈,显示你的脸部。Loom 还提供了许多视频选项,例如:禁用显示你的脸部。这是榜单上最受欢迎的应用之一,下载量已达 400 万次。

Windscribe - 免费代理和广告拦截器


来源

免费VPN,我在哪里可以找到?答案是Windscribe(再次强调,不是付费的)。这款扩展程序可以让你免费连接到世界其他地方。它还能屏蔽广告、阻止追踪器、规避恶意软件,并支持暗黑模式。全部免费。Windscribe 还有一个付费版本,它比免费版本功能更多,可以连接到更多国家/地区。我一直在用 Windscribe 观看加拿大广播公司(CBC)的国际游泳联赛 (ISL)——如果你在疫情期间感到无聊,可以看看 ISL,真的很有趣。没错,我是个游泳爱好者。

窗口调整器

(请原谅 DuckDuckGo 屏幕)
来源

您是网页设计师或前端开发者,需要检查您的网站是否响应迅速吗?Window Resizer 是最佳选择。这款扩展程序允许您将 Chrome 屏幕尺寸调整为多种尺寸:手机、PC、iPad、桌面等等。

ColorPick 吸管


来源

此列表中的最后一个扩展程序:ColorPick Eyedropper。同样,它对网页设计师或前端网页开发人员特别有用。此扩展程序允许您在网页中选择一个像素,并即时以精确度接收 RGB 和十六进制代码。

结论

希望您有一些新的 Chrome 扩展程序可供下载。如果您正在使用或打算尝试其他未在此列表中的扩展程序,请在下方评论区留言。

亨利

鏂囩珷鏉ユ簮锛�https://dev.to/hb/my-chrome-extensions-as-a-web-developer-41
PREV
使用缓存来提升 PHP 项目
NEXT
Python 库可自动解决 TikTok 的验证码,并允许您上传/安排带有 TikTok 声音和主题标签的视频