十款Chrome扩展帮助前端设计师提升编码效率

稀土圈 · 发布于 2016-08-05 · 字数4522 · 浏览 1675 · 评论 0

对于前端设计师来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你网页设计效率的强大扩展。我们就整理了十款前端设计者相关的 Chrome 插件,在这里推荐给你。

1. 掘金 Chrome 插件

对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧。那么,开发者能够在哪里获取需要的技术内容呢?

过去你可能需要在 Behance、Dribbble 等许多网站之间不停地跳转来寻找自己需要的内容,现在有了掘金 Chrome 插件,只需要一个新标签页面,你所需要的内容,它都能够为你聚合呈现出来,绝对算得上是发现干货的利器。

掘金 Chrome 插件汇集了国内外顶尖的设计资源站点内容,除了 Dribbble、Behance、Unsplash 以及 500PX 等国外网站之外,还有国内的优设、站酷、UI 中国等国内站点,绝对是你找图找资源的不二选择。

十款Chrome扩展帮助前端设计师提升编码效率

2. Vue.js devtools

Chrome 开发者工具扩展,用于调试 Vue.js 应用。

十款Chrome扩展帮助前端设计师提升编码效率

3. React Developer Tools

React Developer Tools,可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。

十款Chrome扩展帮助前端设计师提升编码效率

4. AngularJS Batarang

AngularJS Batarang 是适用于 Chrome 的 AngularJS WebInspector 扩展。AngularJS Batarang 是开发者工具扩展,用来调试和分析 AngularJS 应用。

十款Chrome扩展帮助前端设计师提升编码效率

5. ng-inspector for AngularJS

ng-inspector for AngularJS 是一个在「检查元素」面板中显示当前页面实时 AngularJS 范围层次结构、以及它的控制器或指令与范围相关的浏览器扩展。

十款Chrome扩展帮助前端设计师提升编码效率

6. EnjoyCSS

EnjoyCSS 能够通过图形化的界面帮助你在线生成 CSS3 代码,可谓前端开发者的一大利器。

十款Chrome扩展帮助前端设计师提升编码效率

7. LiveReload

LiveReload 会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面,这样我们不用每次修改文件后,都要去按下 F5 刷新页面。

十款Chrome扩展帮助前端设计师提升编码效率

8. jSonView

很方便地帮助你验证和查看 jSON 文档。

十款Chrome扩展帮助前端设计师提升编码效率

9. User-Agent Switcher for Chrome

有了 User-Agent Switcher for Chrome,只需要一个浏览器插件,你可以随时更换 UA,测试网页的自适应情况,能够帮你很好地提高开发效率。

十款Chrome扩展帮助前端设计师提升编码效率

10. Page Ruler

Page Ruler 能够帮你快速查看网页中某个具体控件或者整个网页具体尺寸的情况,,测量网页元素,再也不用打开占据大片空间的「检查元素」窗口了。

十款Chrome扩展帮助前端设计师提升编码效率

不管怎么说,工具只是我们在开发过程中的辅助工具,探索好用的工具的同时,提升我们自己的开发实力才是最主要的。最后,也祝各位开发者们开发愉快!

本文系作者 稀土圈 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-01-17编程能力和代码控制的能力
  • 2016-03-28您的提交带有不合法参数谢谢合作
  • 2016-05-14Layer Guides实用的PS参考线插件
  • 2016-05-16实用设计指南!IOS8 最新设计参考指南
  • 2016-05-17写实日历图标教程
  • 2016-06-14Kalendae轻量级时间日期选择JavaScript插件
  • 2016-06-30io.js衍生自Node.js并兼容npm的开发平台
  • 2016-07-06SVN
  • 发布评论

    为您推荐

    问说网 · 发布于 2014-10-26

    如何解决wordpress中使用Shortcode自动添加的br或者p标签

    我们在使用 WordPress Shortcode API 开发插件的时候,有个比较麻烦的问题,就是 WordPress 会自动在 shortcode 内添加 …

    WOW.js页面滚动元素动画JavaScript插件
    问说网 · 发布于 2016-03-03

    WOW.js页面滚动元素动画JavaScript插件

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画…

    问说网 · 发布于 2016-03-25

    使用X-tag和Web组件快速开发Web应用程序

    对于其他原生技术,可扩展性组件不大能为Web进行扩展。很快一切都变了。我们即将迎来一个复兴,将极大推动Web平台的应用开发,Web控件将会驱动这一切。

    问说网 · 发布于 2016-04-08

    分享Web前端重构相关细节

    完全换血的重新设计相当消耗时间,因为所有的组件都需要重新书写,这里不仅仅包括那些被管理者看着不满的东西,还包括许多良好的组件,以及数据交换方式等,这里面隐患相当…

    问说网 · 发布于 2016-05-13

    使用HTML5中的Canvas绘图

    在HTML5中我觉得最重要的就是引入了Canvas,使得我们可以在Web中绘制各种图形。给人感觉单在这点上有点模糊我们Web和桌面程序的感觉。

    你怎么看?设计师应该具备的视野和角色
    HenleyChloe · 发布于 2016-05-16

    你怎么看?设计师应该具备的视野和角色

    《星际迷航》电影第四部中出现过劳伦斯的一首诗:”在最深、最冰冷的海底,有着最火热血,和最狂野的心。“这闷骚的个性最像我们设计师了,所以这里我用鲸鱼表示设计师。

    Timelinr简单的时间线jQuery插件
    问说网 · 发布于 2016-07-04

    Timelinr简单的时间线jQuery插件

    Timelinr是一个简单的时间线jQuery插件,这个简单的插件可以帮助你给更多的生活无聊的时间线。支持水平和垂直布局,你可以为大多数属性指定参数:速度,透明…

    POI
    Vincent · 发布于 2016-07-06

    POI

    官方网站 http://poi.apache.org/   术语 OOXML Office Open XML standards,基于XML格式的新标…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    稀土圈

    挖掘最优质的互联网技术 http://gold.xitu.io,经常搞抽奖,快关注快关注快关注我!

    1 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 4032

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 4066

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 4109

    图片素材

    关注 图片素材

    文章 29463 · 浏览 3274

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3534

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 走了留下什么

    文章 110 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 呼吸快窒息

    文章 104 · 评论 0

    关注 失戀德標簽

    文章 92 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!