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

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

1、掘金Chrome插件

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

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

  2、Vue.js devtools

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

  3、React Developer Tools

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

  4、AngularJS Batarang

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

  5、ng-inspector for AngularJS

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

  6、EnjoyCSS

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

  7、LiveReload

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

  8、jSonView

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

  9、User-Agent Switcher for Chrome

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

  10、Page Ruler

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

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

====================================分割线================================

本文转自d1net(转载)

时间: 2024-09-19 07:22:35

如何在前端开发中增加编码效率?这里有十款Chrome扩展可以帮你的相关文章

一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

Dojo前端开发中非常优秀的Ajax框架之一

在应用中我们可能会碰见这样的情况,我们需要在一个图表上展示包含多个维度的信息,随着维度的增加,我们会发现一般的图表无法充分和直观的展现这些信息.如企业经营状况各项指标数据的分析以及http://www.aliyun.com/zixun/aggregation/8172.html">用户行为各项特征的数据分析等.在最近的应用中我也遇到了这样的情况,经过分析发现,对于这类数据,使用蜘蛛图来展示能达到非常直观的效果.因为蜘蛛图能直观的展示数据的变动趋势和差异对比.在用来绘制蜘蛛图的第三方类库和框

前端开发中一些常用技巧总结

原文发布于Mr.Think的博客: http://mrthink.net/css-common-summary/ 自己前端开发中常用到的一些技巧及问题解决方法,会常更新,希望对前端路上的朋友有帮助. 1.文章标题列表中日期居右显示的方法(提供了两种方法,使用时视情况而定): 方法一:本版2楼思路(感谢~),耗资源比较少,多两句代码. 代码: <p>@Mr.Think这是文章标题<span>2010-10-10</span></p> CSS定义: 代码: p{

PHP前端开发中的性能那点事

 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,function a()调用了多少次,function b()又消耗了多少时间,我们到底怎么查找是哪个蛀虫拉慢了我们的程序运行速度呢?在这里给大家介绍一款工具xdebug,相信很多人已经听说过了,希望借助这个工具我们可以起到简单分析php程序性能瓶颈的问题. A)假设1,假设用户目录在/home/ad B)假设2,假设php目录在/home/ad/php 1.x

前端开发中使用”有限状态机“解决复杂的交互问题

前端开发是有逻辑的,这点毋庸置疑.程序员的思维逻辑赋予了代码各种能力,但是前端开发中经常面对的是用户的操作.在一个比较复杂的页面中(貌似现在也很少有简单页面了),用户的操作是不可预见的,假如有很多按钮,每个按钮都会做一件自己独一无二的事,如果上帝保佑所有的这些操作,这些事件都彼此没有限制,而且结果互不影响,那没有问题.但在开发中好像没有这种好运气,所以经常需要协调和平衡这些函数之间的执行. 如果你使用的是纯JS或者单独仅有jQuery的情况下,遇到这种让人焦头烂额的情形会尤为明显,前端MVC一定

ajax-web前端开发中使用接口获取数据,然后获取到的结果编译成表格形式

问题描述 web前端开发中使用接口获取数据,然后获取到的结果编译成表格形式 jquery的post请求从接口(json){ "m":"dh", "oper":"fdghgh", "sqlid":"2455", "params":{ "PHONE":"手机号码" } },中获取到结果后,然后将结果解析并编译成表格形式.这个怎么弄,

Web前端开发中的MCRV模式

摘要 针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为基础,结合Web前端开发中"内容-结构-表现-行为"相分离的开发标准,提出一种将Web页面代码分为视图(View,页面静态部分,包括内容.结构.表现).模型(Model,负责数据缓存.数据校验与本地逻辑处理.发起ajax请求).控制器(Controller,负责用户和系统事件响应.模型和渲染器调度).渲染器(Renderer,对视图的渲染,控制器与

WEB 前端开发中防治重复提交的实现方法_javascript技巧

web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性.而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦.下面就来讲讲如何有效避免前端的表单重复提交 表单提交有以下几种方式: <form name="form" method="post" action=&qu

前端开发调试线上代码的两款工具

原文:前端开发调试线上代码的两款工具 用过 Charles 和 Fiddler 这两款,记录如下.   一.Charles Charles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便.全平台支持 win,mac,linux.   1. 安装前提Charles 需要有 Java 环境,请提前下载安装 JDK.JDK 已经 8 了. 根据自己的系统选择对应的JDK.我的是 win7,双击安装,一直下一步就哦了.在命令行窗口输入以下命令,出现截图所示就表示 JDK