提升前端开发效率的10个Chrome扩展程序
极客时间编辑部
讲述:丁婵大小:6.87M时长:05:00
来源:InfoQ 中文站
工欲善其事,必先利其器。善于借助工具,可以极大地提升工作效率。日前,程序员奇杜姆·纳纳姆迪(Chidume Nnamdi)推荐了他认为非常棒的 10 个 Chrome 扩展程序。InfoQ 中文站对该内容进行了编译,供你参考,具体如下。
1. CSSViewer
这款工具用来识别和显示元素的 CSS 属性非常方便。它包含一个浮动面板,你可以将其悬停以检查页面上的元素。CSSViewer 将你选择的 CSS 显示在一个提示框中,使你能够轻松地复制所选的 CSS。
它比我们浏览器中的内置版本先进得多,后者只能显示其下方元素的宽度和高度。
2. Angury
这是由 Rangle.io 构建的 DevTool 扩展,用于调试、分析和优化 Angular 项目。
Augury 在 DevTools 中提供了丰富的 UI,你可以在其中:
查看组件的 DI 树图
编辑和更改组件中的属性
发射事件
……
如果你是 Angular 开发人员,你可以尝试在 DevTools 中使用 Augury。
3. React Developer Tools
你可以将 React Developer Tools 视为“React 版的 Angury”。就像 Augury 一样,React Developer Tools 提供了一个内容丰富的 UI,你可以在其中监控 React 组件中的事件流,也可以检查并随意更改 React 组件的 props 和状态,并查看它在组件树中是如何更改和传播的。
4. JSONView
浏览器通常不擅长显示 JSON 数据,数据会以黑白两种颜色显示,而且看起来十分密集,理解起来也很困难,尤其是在尝试定位深层嵌套的属性时会让人感觉特别麻烦。
JSONView 能格式化并美化 JSON 数据,它以彩色树状视图显示数据,让你更容易识别属性和值。
5. Library Sniffer
如果你在浏览网页时,想知道这个网页是用哪个框架构建的,以及它使用了哪些库,那么 Library Sniffer 是一个绝佳的选择,这款工具将为你提供网页的详细信息。
6. Web Developer
这是一个工具包,它会在你的浏览器上添加一个工具栏,其所包含的工具都是程序员和设计人员在日常工作中能够用到的。它的用途包括添加轮廓到元素、显示标尺、查找页面上所有损坏的图像、更改页面的布局和处理图像等。它还将更多常用功能添加到了默认的 DevTools 检查器中。
7. LambdaTest
浏览器兼容性永远是 Web 开发的大坑之一,开发人员经常会考虑如何在不同的浏览器上呈现自己的网站。LambdaTest 可以让开发人员使用桌面和移动设备上的各种浏览器来截取网页的屏幕快照,从而快速、果断地解答兼容性问题。
8. ColorPick Eyedropper
这款工具有一个浮动面板,悬停在网页中的元素上方,以显示元素的颜色。单击该元素会将所选元素的颜色复制到剪贴板。这是快速发现、复制和粘贴颜色的好方法。
9. CSSPeeper
这是另一个检查和复制元素样式的出色工具。使用 CSSPeeper,你可以将鼠标悬停在网页的任何元素上,然后单击鼠标即可复制元素的样式。如果你曾经试过在 Chrome inspector 工具中从一个元素复制 CSS 样式代码,就能轻松理解 CSSPeeper 所带来的价值。
10. WhatFont
如果你在查看网页时,好奇网页所使用的某种字体,并且想要查看页面源,那么推荐你使用 WhatFont,它可以让你在查看字体时更加容易。你可以将鼠标悬停在文本上以快速查阅其字体系列。
除了上面的十个扩展程序外,Bit 也值得一提。你可以使用 Bit 从任何代码库中“获取”可重用组件,并将它们共享到 bit.dev 的组件集合中。与你的团队成员一起使用它,可以最大程度地(在存储库内和在不同存储库之间)重用代码,加快开发速度,并使代码库更易维护。因此,无论你是要创建自己的可重用组件的私有集合,还是要查阅由开源社区构建的无数组件列表,Bit 都是不错的选择。
以上就是今天的内容,也欢迎你留言推荐能够提升开发效率的工具。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》,如需阅读全部文章,
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
- 小斧工欲善其事,必先利其器。1
- zgrClassTestGroupMark
- zero很实用的工具啊
- Johnny非常实用的工具集
- 听见风在歌唱刚刚好,打算用一下,jasonview
收起评论