前端开发工程师的 Chrome 浏览器 插件推荐

🌙
手机阅读
本文目录结构

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

Devtools Terminal

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

LiveReload

集成 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

快速修改网站样式。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang