前端Chrome插件

   Google Chrome 是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器。今天,我来分享下自己收集的一系列Chrome插件,希望能够提高大家的工作效率。

Devtools Termina

在浏览器中的终端。开发调试利器!

LiveReloa

成LiveReload官方应用(Mac和Windows)以及guard-livereload、yeoman等第三方工具。帮助开发者快速构建Web应用。

BrowserStack Local

本地测试工具,借助它可以快速完成本地/内部服务器配置和测试工作,以及HTML、CSS、JavaScript静态文件的配置和测试。用BrowserStack提供的安全、便捷的云服务,在700多个真实的桌面系统和移动浏览器中,测试应用的布局、工作流和交互性。

JSONView

来验证和查看JSON文件。

Postman

口调试工具。接口编写、调试、文档撰写过程使用它能提升工作效率。有100多万用户了。

Window Resizer

整浏览器窗口大小,模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。

WhatFont

识别网页所使用的字体。

Page Ruler

取任意网页中元素大小、位置信息。

Web Developer Checklist 

自己的网站是否符合Web设计、开发的最佳实践?对照这份清单,就能很容易发现网站是否有问题。

Image Downloader

查看和下载网页中的图像。

Alexa Traffic Rank

Alexa Internet为Chrome开发的免费网站流量排名查看工具。在不干扰用户访问网站的情况下,给出当前网站的Alexa数据。

Eye Dropper

开源拾色器软件,可以从网页、其他拾色器和你用过的颜色中拾取颜色。

Firebug Lite

它可不是用来替代Firebug或Chrome的开发者工具,而是配合这些工具来使用。你可以像使用Firebug那样,用它来查看HTML、DOM元素和盒子模型。它还能提供其他比较酷的功能,比如用鼠标查看HTML元素,编辑CSS属性后能立马看到效果等。

Web Developer

工具栏形式提供一系列Web开发工具, 这是Web Developer官方为Chrome开发的版本,他们也为 Firefox、Opera开发了相应插件。

Responsive Inspector

于查看被访问网站的媒体特性(media query)。开发响应式Web布局时,可以直观地显示CSS样式表所定义的分辨率的效果。

BuiltWith

用于查看当前网站使用什么技术搭建。

Corporate Ipsum

随机生成企业相关信息,作为占位文本,方便查看布局效果。

User-Agent Switcher

修改用户代理(User-Agent)字符串,以伪装成某些浏览器和操作系统,还可以伪造特定的URL。

YSlow

分析网页,根据能够提高网页性能的一组规则,提出性能改进建议。

CSS Shapes Editor

在所选中元素上方显示交互式编辑器,用于新建和调整用CSS写的图形。

Pesticide

在当前网页插入Pesticide CSS,为元素添加明显的边框,方便查看元素位置。

Responsive Web Design Tester

试移动网站在移动设备上的效果。该插件能够模拟不同尺寸、装有不同浏览器的移动设备。

Palettab

安装后,新开一页卡,就能看到5种颜色和字体搭配方案!每次点击新页卡,就能有新发现。

jQuery Audit

在元素面板创建侧边栏,显示jQuery委托代理事件、内部数据、当前选中的DOM节点、函数和对象等信息。

Font Changer

改包括Facebook、Twitter、Google、Youtube在内的任意网站的字体。可以试试Google Web Fonts字体的效果。

HTML5 Outliner

使用网页中的标题和分区信息,创建可点击的大纲视图。

PerfectPixel

在页面上显示半透明的图像,便于逐像素对比调整前后的页面效果,以达到最佳水准。

SelectorGadget

有了这个开源工具,为复杂网站的元素生成CSS选择器,以及查看选择器所匹配的元素都将变得轻而易举。

Stylebot

快速修改网站样式。

文章目录
  1. 1. Devtools Termina
  2. 2. LiveReloa
  3. 3. BrowserStack Local
  4. 4. JSONView
  5. 5. Postman
  6. 6. Window Resizer
  7. 7. WhatFont
  8. 8. Page Ruler
  9. 9. Web Developer Checklist 
  10. 10. Image Downloader
  11. 11. Alexa Traffic Rank
  12. 12. Eye Dropper
  13. 13. Firebug Lite
  14. 14. Web Developer
  15. 15. Responsive Inspector
  16. 16. BuiltWith
  17. 17. Corporate Ipsum
  18. 18. User-Agent Switcher
  19. 19. YSlow
  20. 20. CSS Shapes Editor
  21. 21. Pesticide
  22. 22. Responsive Web Design Tester
  23. 23. Palettab
  24. 24. jQuery Audit
  25. 25. Font Changer
  26. 26. HTML5 Outliner
  27. 27. PerfectPixel
  28. 28. SelectorGadget
  29. 29. Stylebot
,