每个Web开发人员都必须拥有的Chrome扩展程序合集

作为开发人员，我们每天都使用浏览器做各种各样的事情，从谷歌搜索、寻找栈溢出问题的解决方案到在一些论坛上浪费时间（是的，我就是其中之一），还测试运行我们的应用程序正在发展。在这里，为合适的工作配备合适的工具至关重要。
大约一年前，我写了同样的帖子，我收集了很多反馈。从那时起，我尝试了许多其他扩展，其中一些是读者推荐的，我喜欢它们。
Web开发常用的Chrome扩展有哪些？今天，我将与新的开发人员分享我最新最好的Web开发Chrome扩展程序合集列表。
ax DevTools - Web 可访问性测试

文章图片

ax DevTools - Web 可访问性测试

Web开发有哪些Chrome扩展？可访问性应该是任何 Web 开发人员的首要任务之一。虽然我们确实有 Chrome 的内置Lighthouse 有各种参数可以在网站上进行测试，但如果你非常关心项目中的所有问题，Axe Dev Tools 会很有帮助。
这是一款使用 Deque 开发的axe-core可访问性引擎的快速、轻量级和强大的测试工具。
特征：

随附智能引导测试：你可以使用简单的 QnA 格式进行更高级的测试。它在后台使用机器学习来快速识别和修复问题。
组件级测试：如果你想测试网页元素的特定部分，这会有所帮助。
导出、保存和共享：你可以轻松地与你的团队共享测试结果。
还剩下什么测试？：这是一份不同的测试报告，可用于手动测试。

下载链接：https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
Eye Dropper

文章图片

滴管

这是一个开源扩展，如果作为前端开发人员，你很快想知道其他网站在其元素之一中使用什么颜色或十六进制代码，则该扩展非常有用。
不仅可以从网页中选取颜色，还可以从颜色选择器中选取颜色以进行更精细的控制。
特征：

从网页中选择一种颜色：当你选择一种颜色时，它会自动将其十六进制代码复制到剪贴板中。
从颜色选择器中选择一种颜色：借助其集成的颜色选择器，你可以手动找到你需要的颜色以及不同的颜色值。
从历史中选择一种颜色：选择的每种颜色都将像调色板一样存储，以便以后回来时，所有颜色都触手可及。
开源：它在其 Github 存储库中开源的所有代码。

下载链接：https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka
Grepper

文章图片

格雷珀

Web开发Chrome扩展程序合集：Grepper 是开发人员必不可少的扩展，因为它将 Stackoverflow 社区和 Google 的强大功能集于一身。如你所见，我们在 Google 中搜索了术语“python 中的链表”，而 Grepper 所做的就是在搜索结果页面上获取其社区成员提供的解决方案！
特征：

轻松获取和访问代码答案：你可以直接在 Google 搜索中获得常见编码问题的答案！
保存代码答案：如果你想重新访问你喜欢的解决方案，你可以随时保存它。
为社区做出贡献：如果你知道搜索查询的答案，你可以轻松地将你的代码添加为贡献。
Upvote/downvote：在某些情况下，你会看到你搜索的问题的多个答案。在这种情况下，如果你认为其中一个答案更好而另一个答案错误，那么你可以相应地进行赞成/反对。

下载链接：https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco
Hackertab.dev

文章图片

黑客工具

【每个Web开发人员都必须拥有的Chrome扩展程序合集】Web开发常用的Chrome扩展有哪些？你的新标签页可以充满开发者行业的最新动态。Hackertab.dev 扩展定义了这一点。如果你懒得打开多个标签——一个是为了参加开发活动，一个是为了阅读文章，或者另一个是为了查看 Github 上的趋势，那么把它作为你的新朋友。
这会用各种各样的信息替换你的新 Chrome 标签，从所有开发人员资料到最佳工具、新闻、工作和活动。
特征：

每日更新内容：每天都有新事情发生，Hackertab.dev 确保你每天都能获得最新信息。
按兴趣个性化：你可以轻松更改想要获取信息的主题。无论是关于特定语言、要显示的卡片、以紧凑模式查看等。
可靠的数据提供者：内容取自 Github、Hackernews、DEV Community、Stackoverflow 等热门网站。
开源：整个代码都在其 Github 存储库中，你也可以在其中做出贡献。

下载链接：https://chrome.google.com/webstore/detail/hackertabdev/ocoipcahhaedjhnpoanfflhbdcpmalmp
Daily.dev

文章图片

每日开发

Web开发有哪些Chrome扩展？Daily.dev 是一个 Chrome 扩展程序，它带有一个包含技术和开发世界中所有最新和最伟大内容的提要。提要根据你的喜好进行个性化设置，来自世界各地的开发人员可以通过此方式节省大量时间。
你不必从一个新闻/博客位置跳到另一个位置，全世界有超过 100K 的开发人员在使用它！
顺便说一句，你知道我们的出版物上榜了，我们的一些文章被推荐了吗？
特征：

精选资源：你对喜欢的某个网站有偏好吗？从 400 多个来源中挑选它，并仅从这些来源中获取内容！
标签：开发世界中所有最热门的话题都按标签分组，因此如果你只想了解 #cloud、#aws 和 #frontend，那么你的提要将使用这些进行个性化。
不错过任何趋势：一旦在网站上发布，你就会获得全新的内容。Daily.dev 获取并预先显示给你，以便你了解最新信息！
社区：这是daily.dev 与其竞争对手的不同之处。有一个由学习者、开发者和其他人组成的完整社区，你可以在其中评论他人的文章、在社交媒体上分享，甚至为你最喜欢的文章添加书签。

下载链接：https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied
OctoLinker

文章图片

八联器

如果你想在从一个文件/文件夹导入到另一个文件/文件夹的多行文件之间来回切换，并发现它令人沮丧，那么 OctoLinker 就可以派上用场。
Web开发Chrome扩展程序合集：OctoLinker 是 GitHub 的浏览器扩展，它将包含、要求或导入等特定语言的语句转换为链接。
因此，每当你打开一个包含多个导入语句的文件并且你很快想要打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。这与 VSCode 中的工作方式非常相似！
特征：

相关文件：它使用 GitHub API 来获取链接文件存储库的树结构。
API 文档：它链接到流行工具的 API 文档，如 NodeJS、Python、Oracle 或 Ruby！
依赖发现：在 package.json 等文件中定义的依赖可以很容易地通过它们的源代码进行追踪。
拉取请求：在代码审查中，OctoLinker 链接拉取请求上的依赖项和文件。

下载链接：https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp
Octotree

文章图片

八叉树

Web开发常用的Chrome扩展有哪些？另一个方便的类似于 VSCode 的 Github 扩展是 Octotree。这实际上构建了 Github 存储库的整个项目结构的树。
每当你导航到存储库时，它都会显示为侧边栏，你可以打开它以查看存储库中的整个内容或文件，甚至无需导航到不同的文件夹。不仅如此，它还可以在你的私人存储库上运行，只需给它令牌，你就可以开始了！
特征：

代码审查：你可以轻松地在任何拉取请求或提交中的文件和评论之间跳转。
多个主题：Octotree 不仅仅停留在常规的明暗主题上。它带有大约 20 多个主题以及图标主题、代码字体选择等。
多个标签：只需双击侧边栏即可在新标签上打开新文件。因此，现在你可以在 Github 存储库中打开多个文件选项卡！
基于树的搜索：你可以搜索深度嵌套的文件并将其中任何一个添加为书签以供以后访问。

下载链接：https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc
React开发者工具（React Developer Tools）

文章图片

反应开发者工具

Web开发有哪些Chrome扩展？如果你正在积极从事基于 React 的项目，你可能已经听说过它。当涉及到调试某些东西时，没有什么比这个扩展更接近的了。
它允许你直接在 Chrome 开发人员工具中检查 React 组件层次结构。默认情况下，当你打开开发工具时，此扩展带有两个选项卡：“?? 组件”和“?? Profiler”。
特征：

组件选项卡：它显示页面上呈现的所有 React 组件。有了这个，你还可以看到它们的子组件以及它们传递给每个 prop 的属性和值。
调试组件：当你选择树组件之一时，你可以直接检查和编辑它可能具有的道具。你可以调试组件、其父级、子级等。
Profiler 选项卡：这是一个单独的选项卡，专门用于衡量 React 应用程序的性能。在这里，你可以记录、编辑和查看 React 功能的图形格式。
开源：它的所有代码都存在于 Github 存储库中。

下载链接：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Refined GitHub

文章图片

精炼的 GitHub

Web开发Chrome扩展程序合集：Refined GitHub。这就像一个用于扩展 GitHub 功能的多合一工具。它做两件事；简化了整个 GitHub 界面，然后在其上添加了有用的功能。
特征：

使空白字符可见：当你打开特定文件时，所有使用的空白字符现在都可见。
合并冲突修复：如果你是一个在发生合并冲突时总是努力跟踪所有需要更改的内容的人，那么这将添加一系列箭头以接受更改。
为反应添加头像：所有在 GitHub 评论中添加任何表情符号反应的人现在都将获得他们的头像。
等待检查的选项：在处理拉取请求 (PR) 时，它添加了一个选项以在确认 PR 之前等待检查。
还原更改：如果你错误地在 PR 中添加了错误的内容，则不再需要打开终端并编写命令来还原它，Refined GitHub 添加了一个简单的选项来轻松还原更改。

下载链接：https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf
SVG Gobbler

文章图片

SVG 狼吞虎咽

有没有想过在你最喜欢的网站上使用这些图标、图像或其他资产，例如插图？如果有一个简单的工具，我们可以轻松地一次提取所有这些内容会怎样？
Web开发常用的Chrome扩展有哪些？好吧，SVG Gobbler 扩展可让你轻松完成所有这些工作。你可以下载、优化和转换图标、徽标和矢量 SVG 的代码。
特征：

优化 SVG 内容：使用 SVGO 可以优化你从网站或上传的内容中选择的 SVG。
转化为 React 代码：可以快速将 SVG 转化为 React 组件代码。
导出选项：你可以将所有 SVG 和 PNG 导出为多种尺寸。
快速设计工具集成：当你选择你喜欢的 SVG 元素时，你可以简单地将它复制并粘贴为任何你喜欢的设计工具（如 Figma、Sketch 或 Framer）中的矢量。

下载链接：https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch
Vue.js 开发工具

文章图片

Vue.js 开发工具

Web开发有哪些Chrome扩展？这是 React 开发工具的 Vue 对应版本。如果你进入 Vue 生态系统，那么你现在需要使用 Vue.js devtools 扩展。
这让你可以检查你的 Vue 应用程序，以便更好地调试和了解你的应用程序的工作方式。
特征：

独立应用程序：开发工具不仅可以作为 Chrome 扩展程序使用，你还可以通过运行 npm install -g @vue/devtools 然后将其作为 vue-devtools 启动来下载独立应用程序。
组件选项卡：此选项卡显示当前页面上运行的所有组件实例。
Vuex 选项卡：在这里你可以检查整个应用程序状态是如何通过 Vuex 管理的。
事件和刷新选项卡：你的 Vue 应用程序中发出的所有事件都将在单独的事件选项卡中可用，而如果你只需要重新加载开发工具，则刷新选项卡会有所帮助。

下载链接：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Web开发Chrome扩展程序合集总结扩展可以让我们的生活更轻松，就像我今天列出的那样。如果你知道任何其他可以帮助开发人员提高生产力的工具，请发表评论以将它们合并到文章中。谢谢阅读！