NoPoint 如何在前端开发中增加编码效率,这里有十款 Chrome 扩展可以帮你

Glow · 发布于 2016年7月08日 · 最后由 yesmeck 回复于 2016年7月08日 · 470 次阅读
96

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

1. 掘金 Chrome 插件

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

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

Gold.png

2. Vue.js devtools

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

Vue devtools.jpg

3. React Developer Tools

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

React Devtool.gif

4. AngularJS Batarang

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

AJSB.png

5. ng-inspector for AngularJS

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

ng-inspecter.jpg

6. EnjoyCSS

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

EnjoyCSS.png

7. LiveReload

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

LiveReload.jpg

8. jSonView

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

jSonView.jpg

9. User-Agent Switcher for Chrome

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

11:30:40.jpg

10. Page Ruler

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

11:30:55.jpg

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

此贴已暂时被屏蔽!

以下几种情况的帖子可能会进入此节点:

  1. 标题/正文描述不清不楚;
  2. 无意义的发帖;
  3. 存在广告嫌疑;
  4. 招聘信息描述不清楚,未按照招聘节点的要求发帖,或职位信息不符合社区用户群需求;
  5. 新注册的帐号发布产品推广贴是不允许的哦,付出和回报是相等的,当然如果你的产品确实非常有意思,或是和 Ruby 有关的东西,是不会进入这个栏目的。
  6. 太过弱的提问会被直接转移到此节点,请在提问前多尝试,多搜索;
  7. 理论上,不允许发布 QQ 群、微信群之类讨论群。

如果你发现你的帖子到了此节点下面,请自我检查反省,并修改帖子内容。


招聘贴被转移到此节点原因

警告: 以后招聘贴不符合要求,直接移动到本节点,管理员不再回复,如认真阅读,继续新发同样格式的贴,将会被禁用账号!

  • 排版请按 Ruby China 的 Markdown 格式要求,具体请认真阅读: 排版指导,并参考 这篇招聘 的排版;
  • 招聘内容过少,缺少公司介绍,产品介绍,职位介绍,或待遇,工作地,联系方式等必要信息;
  • 重复发帖(一家公司每月限制只能发一次招聘);
  • 专业不对口(个别不对口,但有特点的,我们会放过);

如果你有时间,请阅读 招聘栏目详细说明


学会如何合理提问,请阅读:https://ruby-china.org/topics/24325

当你修改好以后,可以回帖 @huacnlee@Rei@lgn21st 任何一人,我们将会审核,通过以后才可恢复到其他节点。

注!多次发现广告嫌疑的帐号,将会被禁用帐号。

共收到 1 条回复
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册