18个Chrome扩展程序可加快前端开发流程

在这篇文章中,我整理了一些最好的Google Chrome扩展程序,以加快您的前端开发工作流程,希望您发现它们有用。

的CSS 形状 Editor for Chrome

该扩展在DevTools Elements面板中添加了一个新的侧栏,名为“Shapes”. It offers controls to create and edit 的CSS 形状 values like polygon(), circle() and ellipse() on the selected element.

的CSS形状编辑器1

农药

此扩展将Pesticide 的CSS插入当前页面,概述每个元素以更好地查看页面上的位置。

农药2

Emmet LiveStyle

此插件在更新CSS时采用了完全不同的方法。与其他实时编辑器不同,它不只是在浏览器或编辑器中替换整个CSS文件,而是将更改从一个CSS文件映射到另一个CSS文件。

emmetlivestyle-3

穆兹利

有关设计,UI,UX的最新链接&通过网络进行互动。您需要的所有设计灵感。

穆兹利

尺寸工具包

超级友好的Chrome扩展程序,可供设计人员测试自适应网站。

emmetlivestyle-3

接口4

响应式网页设计测试仪

响应式Web设计测试器是测试响应式网站的快速简便的方法。

响应式5

帕莱塔卜

Palletab是一个Chrome扩展程序,每次点击该新标签页按钮时,该扩展程序就会使用Google字体和出色的ColourLovers调色板来激发您全新的灵感!

调色板标签

忍者字体

忍者字体是一个新插件,您可以在浏览器中安装该插件,以识别,尝试和下载Internet上的任何字体!

fontninja-6

jQuery的审核

jQuery的审核在Elements面板中创建一个侧栏,其中包含jQuery委托的事件,内部数据等,作为实时DOM节点,函数和对象。

jQuery的的审计7

样式机器人

样式机器人允许您使用自定义CSS来操纵任何网站的外观。您选择一个元素,然后从编辑器中选择要进行的任何更改。您可以更改字体,颜色,边距,可见性等。您也可以手动编写CSS。

stylebot-8

选择器小工具

Selector Gadget是一个开放源代码的Chrome扩展程序,使CSS选择器的生成和在复杂站点上的发现变得轻而易举。

选择器小工具9

滴管

滴管是Google Chrome和Chromium的扩展。它使您可以从任何网页或高级颜色选择器中选择颜色。对于Web开发人员来说,这是一个很好的工具。

滴管10

LiveReload

您平均每天平均按下键盘上的刷新键多少次?

livereaload-16

完美像素

此扩展允许开发人员将半透明的图像覆盖在开发的HTML的顶部,并在它们之间执行每个像素的比较。

pixelperfect-11

另一个Lorem输液器

直接将盲文本插入网站上的文本字段,或将盲文本复制到剪贴板以供其他使用。以交互,可视的方式选择文本的类型和数量。

loren-ipsum-12

HTML5大纲器

此扩展使用HTML5大纲算法创建目录。也应与具有结构化标题的HTML4(或更旧的)页面一起使用。目录是可单击的,并在跳转后尝试突出显示有问题的标题/部分。

html5-outliner-13

带有Google Web字体的Font Changer

使用Google Web字体有很多选择。您可以为所有站点或仅特定站点设置字体。

字体转换器14

页面标尺

页面标尺可让您在任何页面上绘制标尺,并显示其宽度,高度和位置。

第15条规则

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.