有好的扩展工具对于开发者来说是非常有用的,它们可以提高开发效率,简化工作流程,并且使得在浏览器中进行开发和调试变得更加方便。
前五大浏览器分别是: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 Eyedropper 对于设计师和前端开发者来说,这是一个非常有用的工具。
安装链接: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