前端程序员必知的30个Chrome扩展

简介: 谷歌Chrome浏览器是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器。今天,我想与大家分享一些最实用的谷歌Chrome浏览器扩展,可以帮助你提高工作效率。

谷歌Chrome浏览器是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器。今天,我想与大家分享一些最实用的谷歌Chrome浏览器扩展,可以帮助你提高工作效率

Devtools Terminal ——浏览器终端。牛逼的不得了!

LiveReload——为官方LiveReload应用程序(Mac和Windows)和第三方,例如guard-livereload和yeoman,提供Chrome浏览器集成。

BrowserStack Local ——本地测试app可以让你即刻配置和测试本地/内部服务器,和包括HTML、CSS和JavaScript文件在内的本地文件夹。在BrowserStack上的安全云设置中测试布局,工作流程和交互性,跨越700+个真正的台式机和移动浏览器。

如果你想学习web前端可以来这个群,首先是二九一,中间是八五一,最后是一八九,里面可以学习交流也有资料下载。

JSONView ——验证和查看JSON文件。

Postman——用Postman为API工作流程增加负荷!更快地构建,测试,并记录你的API。已经不止一百多万的开发人员投入了Postman的怀抱。

Window Resizer——该扩展可以重新调整浏览器窗口的大小,以仿效各种不同的分辨率。对网页设计师和开发人员尤其有用,可以帮助测试在不同浏览器分辨率下的布局。

WhatFont——识别网页上的字体最简单的方法。

Page Ruler——画一把尺子以得到像素维数和定位,并测量任何网页上的元素。

Web Developer Checklist ——对于那些想要确保遵循最佳实践的web开发人员,这个扩展可以让你很容易发现自己网站的问题域。

Image Downloader——浏览和下载网页上的图像。

Alexa Traffic Rank ——Alexa Traffic Rank是Alexa Internet提供的免费的Chrome扩展,并且是Alexa流量面板的唯一扩展。这款Alexa扩展可以在你网上冲浪的时候陪伴你,提供有关你访问的网站的Alexa数据,并且不会中断你浏览网站。

Eye Dropper ——Eye Dropper是开源扩展,它可以让你从网页,拾色器和个人色彩历史中选取颜色。

Firebug Lite ——Firebug Lite并非Firebug或Chrome Developer Tools的替代品。它是使用这些工具时也可以一起使用的工具。Firebug Lite提供了丰富的视觉表现,这些视觉表现也是我们在Firebug 中,涉及HTML元素,DOM元素,以及盒模型阴影(Box Model shading)时惯常见到的。它还提供了一些很酷的功能,比如用鼠标检查HTML元素,以及实时编辑CSS属性。

Web Developer ——添加了一个拥有各种web开发工具的工具栏按钮。是Firefox web开发扩展的官方端口。

Responsive Inspector —— Responsive Inspector是一个简单的谷歌Chrome浏览器扩展,它允许查看被访问网站的媒体查询。这在开发响应式网络布局时非常有用,因为它可以直观地显示在CSS样式表中定义了什么分辨率。

BuiltWith ——使用该扩展,可以找出你正在访问的网站是用什么构建的。

Corporate Ipsum ——作为填充文本使用,生成随机的企业公关说辞。

User-Agent Switcher ——模拟用户代理(User-Agent)字符串。有了这个扩展,你就可以快速轻松地在用户代理字符串之间进行切换。此外,你还可以设置每次要冒名的特定URL。

YSlow ——YSlow分析网页,并提出如何在一套高性能web页面规则的基础上改进性能。YSlow在三个预定义规则之一或一个用户定义的规则集的基础上将网页分等级。它提供了改进页面性能的建议,总结了网页页面的组件,显示了关于页面的统计信息。

CSS Shapes Editor ——使用交互式编辑器来创建并调整CSS Shape值,重叠所选元素。

Pesticide ——这个扩展可以插入Pesticide CSS到当前页,形成每个元素的示意图以便于更好地看到它们在页面上的位置。

Responsive Web Design Tester ——在移动设备上测试移动网站。此扩展反映了移动设备的大小和它的浏览器。

Palettab——将超棒的颜色和字体带给新的标签页!每次点击新标签按钮,都会给你一点点新鲜。

jQuery Audit ——jQuery Audit在元素面板中创建了一个侧边栏,包含jQuery的下放事件,内部数据等,就像活跃的DOM节点,函数和对象。

Font Changer——改变Facebook、Twitter、Google、Youtube和其他任何网站的字体。测试Google Web Fonts

HTML5 Outliner——用标题和分节元素生成一个可导航的页面大纲。

PerfectPixel ——此扩展允许开发人员把一个半透明的图像叠加到已开发好的HTML的顶部,并在它们之间执行每个像素的比较。

SelectorGadget ——Selector Gadget 是一个开源的Chrome浏览器扩展,能够让CSS选择器轻而易举地生成和发现于复杂网站。

Stylebot——瞬间改变网站的外观。

web前端新手群291851189

相关文章
|
5月前
|
Web App开发
Win10 Chrome认不出新Emoji?两个扩展搞定显示与输入
Win10系统在Chrome中显示部分新Emoji为方框?只需安装「Emoji Swap」和「Emoji Keyboard」两个扩展,即可让旧系统正常显示并输入新Emoji,轻松解决表情显示问题,无需更换设备或升级系统。
729 1
|
11月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1913 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
309 121
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
1360 1
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
存储 监控 前端开发
掌握微前端架构:构建可扩展的前端应用
【10月更文挑战第6天】随着前端应用复杂性的增加,传统单体架构已难以满足需求。微前端架构通过将应用拆分为独立模块,提升了灵活性与可维护性。本文介绍微前端的概念、优势及实施步骤,包括定义边界、创建共享UI库、设置通信机制等,并探讨其在SPA扩展、大型项目模块化及遗留系统现代化中的应用。通过实战技巧如版本控制、配置管理和监控日志,帮助团队高效协作,保持应用灵活性。微前端架构为构建大型前端应用提供有效解决方案,适合希望提升项目可扩展性的开发者参考。
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
201 13
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
606 10
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
283 9
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
186 9