2024 年开发者浏览器必备扩展!!

职场   2024-10-28 11:27   福建  

有好的扩展工具对于开发者来说是非常有用的,它们可以提高开发效率,简化工作流程,并且使得在浏览器中进行开发和调试变得更加方便。

先来看看各大浏览器的市场占比:

前五大浏览器分别是:Chrome、Safari、Edge、Firefox、Opera。

Chrome 浏览器基本上一骑绝尘了,所以本文以 Chrome 浏览器为例介绍开发者必备的一些扩展!!!

1、Web Developer

Web Developer 扩展提供了一个全面的开发者工具栏,包括查看和编辑HTML、CSS、JavaScript的功能。

Web Developer 可以禁用或启用页面上的 CSS 和 JavaScript,方便开发者调试网页,还提供了元素的尺寸测量、响应式设计视图、页面资源查看等功能。

安装链接:https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

2、Prettier

Prettier 是一个代码格式化工具,它通过一个单一的配置文件来统一代码风格,支持多种编程语言,如 JavaScript、TypeScript、CSS、HTML 等。

Prettier 可以集成到各种编辑器和 IDE 中,也可以作为浏览器扩展使用。

安装链接:https://chromewebstore.google.com/detail/prettier-chrome-extension/khnhpkjhoogpgnbhagabcnamppfohhjd

3、JSON Viewer

JSON Viewer 扩展将 JSON 数据以树状结构展示,使得复杂的 JSON 数据更易于阅读和理解。

JSON Viewer提供了搜索功能,可以快速定位到特定的数据段,支持折叠和展开节点,以及格式化和压缩JSON数据。

安装链接:https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

4、Code Runner

Code Runer 扩展允许开发者在浏览器中直接运行代码片段,支持多种编程语言。

Code Runer 提供了一个简单的界面,用户可以输入代码并立即看到结果,适合快速测试代码片段或学习新语言。

安装链接:https://chromewebstore.google.com/detail/code-runner/dbhlmjpfacmmmplcebbhgbofbckhmpbj

5、Octotree

在 GitHub 上浏览代码时,Octotree 扩展提供一个侧边栏,显示项目的文件结构。

Octotree 使得导航大型代码库变得更加容易,支持快速跳转到文件和查看文件内容。

安装链接:https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc

6、ColorPick Eyedropper

ColorPick Eyedropper 是一个颜色拾取工具,可以从任何网页上吸取颜色,示颜色的RGB、HEX和HSL值。

ColorPick Eyedroppe对于设计师和前端开发者来说,这是一个非常有用的工具。

安装链接:https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

7、Wappalyzer

Wappalyzer 可以检测并显示网站使用的技术栈,包括 CMS、电子商务平台、JavaScript 框架等。

Wappalyzer 帮助开发者了解竞争对手的网站架构和技术选择。

Wappalyzer 也可以用来发现潜在的安全漏洞。

安装链接:https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

8、Git History Browser Extension

Git History Browser Extension 扩展允许用户在 GitHub 上查看文件的 Git 历史记录,包括每次提交的详细信息。

Git History Browser Extension 提供了一个直观的界面来浏览文件的变更历史。

对于开发者来说,这是一个了解项目历史和追踪特定变更的有用工具。

安装链接:https://chromewebstore.google.com/detail/git-history-browser-exten/laghnmifffncfonaoffcndocllegejnf

9、LambdaTest

LambdaTest 允许开发者在不同的浏览器和设备上测试他们的网页。

LambdaTest 提供了一个云基础的测试平台,可以进行跨浏览器兼容性测试,支持自动化测试和手动测试。

安装链接:https://chromewebstore.google.com/detail/lambdatest/fjcjehbiabkhkdbpkenkhaahhopildlh

10、CSS Viewer

CSS Viewer 的主要功能是帮助用户查看和复制网页元素的 CSS 样式。

当用户在网页上浏览时,只需点击扩展程序的图标,然后将鼠标悬停在想要查看的元素上,CSS Viewer 就会显示该元素的 CSS 样式。

安装链接:https://chromewebstore.google.com/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

11、UX Check

UX Check 是一个工具,用于检查网页的用户体验,并提供改进建议。

UX Check  可以分析网页的可用性、可访问性和性能,帮助开发者优化网页,提高用户满意度。

安装链接:

https://chromewebstore.google.com/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp

12、Grepper

Grepper 是一个代码搜索工具,可以在浏览器中搜索代码库。

Grepper类似于 IDE 中的查找功能,但可以在浏览器中直接使用,适合快速查找和定位代码片段。

安装链接:https://chromewebstore.google.com/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco

13、Vimium

Vimium 是一个浏览器扩展,它允许用户使用键盘快捷键来控制浏览器。

Vimium 模仿了Vim编辑器的操作方式,使得浏览网页更加高效,对于熟悉Vim的用户来说,这是一个提高生产力的工具。

安装链接:https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb


参考链接:https://www.turing.com/blog/best-developer-chrome-extensions

菜鸟教程
学的不仅是技术,更是梦想!
 最新文章