提升 Web 开发效率的 12 款 Chrome 扩展

Tomer Ovadia 原作,授权 New Frontend 翻译。

下面这些 Chrome 扩展助你提升前端开发效率✌️

1. PixelZoomer

🔗 Chrome 商店链接

PixelZoomer 能截屏当前站点,并提供了多种像素分析工具。你可以放大截屏(最多放大 3200%),然后量取距离或选取颜色。

PixelZoomer 截屏

2. Colorblinding

🔗 Chrome 商店链接

模拟色盲、色弱用户看到的网站效果。

模拟绿色盲

3. URI Splitter

🔗 Chrome 商店链接

编辑当前页面的 URL/URI 更便捷。

使用 URI Splitter 编辑维基百科页面

4. dataslayer

🔗 Chrome 商店链接

测试网站分析插件用到的标签(比如Google Tag Manager、DTM、Tealium)。

dataslayer 搭配 Google Analytics 使用

5. Night Eye

🔗 Chrome 商店链接

将任意站点切换为暗黑模式。Night Eye 使用了专有的算法,而不是简单地反色处理。

Night Eye 切换效果

6. BrowserBuddy

🔗 Chrome 商店链接

查看浏览某个网页时关于自身的所有信息,包括浏览器细节,支持的特性,页面活动,设备信息,屏幕尺寸,存储,地理位置信息,IP 等。

BrowserBuddy 显示的浏览器信息

7. The Great Suspender

🔗 Chrome 商店链接

这是一个降低 Chrome 内存占用的扩展。很多前端开发者都习惯同时打开大量网页。这个扩展会自动休眠一定时间段内没有查看过的页面,降低内存和 CPU 占用。时间段的具体长度可以配置。

The Great Suspender 的休眠选项

8. JSONView

🔗 Chrome 商店链接

校验和查看 JSON 文件。

JSONView 查看 Twitter API 的 JSON

9. Fonts Ninja

🔗 Chrome 商店链接

加速设计工作流!识别站点使用的字体,同时也提供了收藏、试用、购买字体的功能。

Fonts Ninja 显示某网站使用的两种字体

10. ColorZilla

🔗 Chrome 商店链接

提供了许多色彩相关的小工具,比如选取颜色和生成渐变色。

用 ColorZilla 选取 Chrome 图标的颜色

11. Momentum

🔗 Chrome 商店链接

将新标签页变成个人导航面板,面板包括待办、天气、时间、每日警句等功能。

Todo, weather and more!

12. Checkbot

🔗 Chrome 商店链接

一键跑分!一个扩展即可同时评测网站的 SEO、性能、安全性,还能检测死链,拖慢渲染或重复的 HTML/JavaScript/CSS 代码,循环重定向,重复标题等网站问题。

Checkbot 检测到了 HTTPS 问题

这些扩展对我大有帮助,我希望对你亦然。😊 有任何评论和建议都欢迎留言!💬

如果你喜欢这篇文章,请给我 ❤ 点赞!👤也可以在 Github 上关注我

评论

Loading comments ...