Web前端开发Chrome插件

Posted 2020-08-07 一个勤奋的胖子

参考：http://www.cnblogs.com/sosoft/p/3490481.html

越来越多的前端开发人员喜欢在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文件更容易阅读。其整合了Beautifier和Prettify的功能，可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能，也就是点击"{ }"图标。

WhatFont

用于查看当前页面使用了哪些字体，Firebug和Webkit Inspector也可以查看字体，但是远没有WebFont方便，WebFont可以通过把鼠标悬停在元素上来查看字体。同时还支持查看网络字体，如Typekit 和 Google Font API。

IE Tab

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