极客视点
极客时间编辑部
极客时间编辑部
113243 人已学习
免费领取
课程目录
已完结/共 3766 讲
2020年09月 (90讲)
时长 05:33
2020年08月 (93讲)
2020年07月 (93讲)
时长 05:51
2020年06月 (90讲)
2020年05月 (93讲)
2020年04月 (90讲)
2020年03月 (92讲)
时长 04:14
2020年02月 (87讲)
2020年01月 (91讲)
时长 00:00
2019年12月 (93讲)
2019年11月 (89讲)
2019年10月 (92讲)
2019年09月 (90讲)
时长 00:00
2019年08月 (91讲)
2019年07月 (92讲)
时长 03:45
2019年06月 (90讲)
2019年05月 (99讲)
2019年04月 (114讲)
2019年03月 (122讲)
2019年02月 (102讲)
2019年01月 (104讲)
2018年12月 (98讲)
2018年11月 (105讲)
时长 01:23
2018年10月 (123讲)
时长 02:06
2018年09月 (119讲)
2018年08月 (123讲)
2018年07月 (124讲)
2018年06月 (119讲)
时长 02:11
2018年05月 (124讲)
时长 03:16
2018年04月 (120讲)
2018年03月 (124讲)
2018年02月 (112讲)
2018年01月 (124讲)
时长 02:30
时长 02:34
2017年12月 (124讲)
时长 03:09
2017年11月 (120讲)
2017年10月 (86讲)
时长 03:18
时长 03:31
时长 04:25
极客视点
15
15
1.0x
00:00/05:00
登录|注册

提升前端开发效率的10个Chrome扩展程序

讲述:丁婵大小:6.87M时长:05:00
工欲善其事,必先利其器。善于借助工具,可以极大地提升工作效率。日前,程序员奇杜姆·纳纳姆迪(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
  • zgrClassTestGroup
    Mark
  • zero
    很实用的工具啊
  • Johnny
    非常实用的工具集
  • 听见风在歌唱
    刚刚好,打算用一下,jasonview
收起评论
大纲
固定大纲
1. CSSViewer
2. Angury
3. React Developer Tools
4. JSONView
5. Library Sniffer
6. Web Developer
7. LambdaTest
8. ColorPick Eyedropper
9. CSSPeeper
10. WhatFont
显示
设置
留言
5
收藏
99+
沉浸
阅读
分享
手机端
快捷键
回顶部