chrome前端插件推荐

用了这么久的Chrome,感觉越用越顺手了。以前总觉得firefox的插件给力,现在Chrome的插件也跟上步伐了,越来越给力了。今天推荐几个Web前端相关的插件,来武装你的Chrome,让它给你的工作带来更大的便利。

以下插件排名不分先后(都比较给力)

(一)调试类插件

1.firebug:大名鼎鼎的firebug,虽然Chrome自带的审查元素就很牛叉,不过有的地方还是firebug用得要顺手些。审查元素+firebug,双剑出鞘,威力惊人啊。

2.WebDeveloper:这个也是名气很大的插件,不错值得推荐使用。

3.code cola :一款在线修改css的插件,使用很傻瓜化,可以完全不用神马css代码,拖动滑块,选择属性是类的操作帮你很迅速的修改css。相当帅气(国人开发的哟,绝对要支持),对于css不是很熟的童鞋,此插件吐血推荐啊!

4.Editor Lite:一个在线编辑html代码的插件,可以当成一个简洁版的Dw编辑器,一些少点的代码可以在此插件内,很快的编写,还加入了w3c认证功能,灰常不错。

(二)检测优化类:

1.Yslow:这个不必多说,yahoo出品的检测web前端性能和提供优化建议的神器。

2.PageSpeed:之前《双陈记》就推荐过的谷歌出的东东,和Yslow一起,堪称业界的干净莫邪啊!

3.Monster:这个插件可以检测你网站的代码错误和警告,给出改进建议,还有整体评分。不错的东东。

4.浏览器兼容测试工具:测试网站的兼容性插件。

5.Resolution Test:一个测试各个显示分辨率下的显示情况的插件

(三)辅助类

1.EyeDropper:一个取色插件,功能不错,取色很方便快捷。

2.Awesome Screenshot:Capture& Annotate:一个不错的截图插件,在贴图上还可以进行标注,添加文字等。

3.IE tab:这个东东,应该很多童鞋用过,用蛋疼的ie模式浏览(似乎有点必备的意思)。

(四)SEO类:

1.SEO for Chrome:一个综合的SEO查询插件。

2.Woorank:这个以弹出新页面的方式对网站进行SEO相关查询(洋文)。

3.百度Seo工具:查询各大搜索引擎的收录数很外链数,百度首页位置的查询。

4.PageRank Status:PR查询,Alexa排名,网站地址查询等

到此推荐完毕。以上所有插件都可以去Chrome的应用商品免费下载使用,需要的童鞋赶快尝试吧!

Chrome的应用商品地址:https://chrome.google.com/webstore?hl=zh-CN

=================

越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊。

Postman - REST Client

Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求。它还支持认证,比如简单的用户名/密码,或者Oauth1.0。Rest Console也是一个不错的选择。

Edit This Cookie

这是一个强大的cookie管理器。你可以添加、删除、编辑、搜索、保护和阻止cookies。Cookies也是一个非常强大的Cookie工具。

Web Developer

安装Web Developer扩展后,会在浏览器的工具栏中添加一个按钮,点击该按钮,会弹出各种Web开发工具。此扩展工具的作者同时也是非常流行的Firefox扩展Web Developer extension for Firefox的作者。。

JSON Lint

一个在线验证和格式化JSON文件的应用。

网页截图

截取网页为图片,支持窗口截图,区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页,新版引进自动截图保存功能。截图后,可以利用图片编辑工具编辑图片,然后将编辑后的图片保存为PNG格式的图片文件,并且提供了高亮工具,涂改工具和文字添加工具。

YSlow

YSlow可以分析网页,并为改善网页性能提出修改建议,这些功能基于高性能网页的规则集。YSlow可以根据预定义的三个规则集或用户自定义规则集来对网页进行分级。,PageSpeed Insights是谷歌开发的类似功能的插件。

ColorZilla

可以从页面上任何一点获取颜色,维护获取历史等。

Measure It!

MeasureIt! 给你测量一个网站中的任何元素的尺寸(像素宽度和高度)。 Page Ruler也是一个不错的选择。

JavaScript Errors Notifier

安装该扩展后,会在Chrome地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。

Window Resizer

此扩展可以调整浏览器窗口的大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同的屏幕分辨率下测试网站布局。

Firebug Lite

Firebug的精简版允许您检查的HTML,CSS和JavaScript代码,生活在任何页面。 你也可以编辑代码,立即测试新的变化。 这是一个开发者最喜欢的Firefox扩展Firebug的精简版。

JQuery 扩展

jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。

Pretty Beautiful Javascript

该扩展可以使Javascript文件更容易阅读。其整合了BeautifierPrettify的功能,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能,也就是点击"{ }"图标。

IE Tab

在Chrome中打开IE浏览器标签页,你可以打开一个标签来运行Internet Explorer,让你看到的网页在IE浏览器看起来如何。

参考文献

10个针对Web开发者的优秀Chrome插件

原文地址:https://www.cnblogs.com/rammstein/p/3984958.html