如何在前端开发中增加编码效率,这里有十款 Chrome 扩展可以帮你
2016-07-30 00:29
513 查看
[align=left]发布时间:2016-07-29 22:59:00.0 [/align]
对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你编码效率的强大扩展。我们就整理了十款前端开发相关的 Chrome 插件,在这里推荐给你。
1. Vue.js devtools
Chrome 开发者工具扩展,用于调试 Vue.js 应用。
2. React Developer Tools
React Developer Tools,可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。
3. AngularJS Batarang
AngularJS Batarang 是适用于 Chrome 的 AngularJS WebInspector 扩展。AngularJS Batarang 是开发者工具扩展,用来调试和分析 AngularJS 应用。
4. ng-inspector for AngularJS
ng-inspector for AngularJS 是一个在「检查元素」面板中显示当前页面实时 AngularJS 范围层次结构、以及它的控制器或指令与范围相关的浏览器扩展。
5. EnjoyCSS
EnjoyCSS 能够通过图形化的界面帮助你在线生成 CSS3 代码,可谓前端开发者的一大利器。
6.LiveReload
LiveReload 会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面,这样我们不用每次修改文件后,都要去按下 F5 刷新页面。
7. jSonView
很方便地帮助你验证和查看 jSON 文档。
8. User-Agent Switcher for Chrome
有了 User-Agent Switcher for Chrome,只需要一个浏览器插件,你可以随时更换 UA,测试网页的自适应情况,能够帮你很好地提高开发效率。
9. Page Ruler
Page Ruler 能够帮你快速查看网页中某个具体控件或者整个网页具体尺寸的情况,,测量网页元素,再也不用打开占据大片空间的「检查元素」窗口了。
10. 掘金 Chrome 插件
对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧。那么,开发者能够在哪里获取需要的技术内容呢?
过去,你可能需要在 GitHub、Dribbble 等许多网站之间不停地跳转来寻找自己需要的内容,现在,有了掘金 Chrome 插件,只需要一个新标签页面,你所需要的内容,它都能够为你聚合呈现出来,绝对算得上是发现干货的利器。
不管怎么说,工具只是我们在开发过程中的辅助工具,探索好用的工具的同时,提升我们自己的开发实力才是最主要的。最后,也祝各位开发者们开发愉快!
本文由Glowin投稿,首发于 https://zhuanlan.zhihu.com/p/21490434
对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你编码效率的强大扩展。我们就整理了十款前端开发相关的 Chrome 插件,在这里推荐给你。
1. Vue.js devtools
Chrome 开发者工具扩展,用于调试 Vue.js 应用。
2. React Developer Tools
React Developer Tools,可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。
3. AngularJS Batarang
AngularJS Batarang 是适用于 Chrome 的 AngularJS WebInspector 扩展。AngularJS Batarang 是开发者工具扩展,用来调试和分析 AngularJS 应用。
4. ng-inspector for AngularJS
ng-inspector for AngularJS 是一个在「检查元素」面板中显示当前页面实时 AngularJS 范围层次结构、以及它的控制器或指令与范围相关的浏览器扩展。
5. EnjoyCSS
EnjoyCSS 能够通过图形化的界面帮助你在线生成 CSS3 代码,可谓前端开发者的一大利器。
6.LiveReload
LiveReload 会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面,这样我们不用每次修改文件后,都要去按下 F5 刷新页面。
7. jSonView
很方便地帮助你验证和查看 jSON 文档。
8. User-Agent Switcher for Chrome
有了 User-Agent Switcher for Chrome,只需要一个浏览器插件,你可以随时更换 UA,测试网页的自适应情况,能够帮你很好地提高开发效率。
9. Page Ruler
Page Ruler 能够帮你快速查看网页中某个具体控件或者整个网页具体尺寸的情况,,测量网页元素,再也不用打开占据大片空间的「检查元素」窗口了。
10. 掘金 Chrome 插件
对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧。那么,开发者能够在哪里获取需要的技术内容呢?
过去,你可能需要在 GitHub、Dribbble 等许多网站之间不停地跳转来寻找自己需要的内容,现在,有了掘金 Chrome 插件,只需要一个新标签页面,你所需要的内容,它都能够为你聚合呈现出来,绝对算得上是发现干货的利器。
不管怎么说,工具只是我们在开发过程中的辅助工具,探索好用的工具的同时,提升我们自己的开发实力才是最主要的。最后,也祝各位开发者们开发愉快!
本文由Glowin投稿,首发于 https://zhuanlan.zhihu.com/p/21490434
相关文章推荐
- 如何在前端开发中增加编码效率,这里有十款 Chrome 扩展可以帮你
- 面对前端六年历史代码,如何接入并应用 ES6 解放开发效率
- 如何提升开发效率-前端技术选型篇
- 15款web设计师和前端开发必备的Chrome扩展插件
- 为前端开发人员制作的 Chrome 扩展 jsbeautifier
- 如何开发Chrome扩展程序
- 黄聪:360、chrome开发插件扩展如何跨域调用其他网站的信息并且显示在扩展、tab中的api
- 做前端开发,我只推荐这15个Chrome扩展[附带详细说明]
- [转]为前端开发人员制作的 Chrome 扩展 jsbeautifier
- 如何开发Chrome扩展程序
- 【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序
- 如何开发一个chrome扩展
- 为前端开发人员制作的 Chrome 扩展 jsbeautifier
- 如何开发Chrome扩展程序
- 面对前端六年历史代码,如何接入并应用ES6解放开发效率
- 如何开发Chrome扩展程序
- [转]十款提高开发效率的PHP编码工具
- 浏览器---Chrome前端开发必备插件,如何设置代理,react调试,定死https协议,sublime热更新,浏览器发请求post
- WEB前端开发规范文档以及如何提高代码编写效率
- 前端开发过程中,你如何提升你的开发效率?