前端开发者的 Chrome extensions/apps

在文章开头，需要普及一下几个概念，那就是 Chrome 中的 extension、app 和 plugin，分别是扩展、应用和插件的意思，不能混为一谈。

• extension(扩展)：在 Chrome 地址栏输入 chrome://extensions 打开。Chrome 扩展是指可以增加 Chrome 浏览器功能或性能的小程序。“扩展”经常会被大家说成是“插件”

• app(应用)：Chrome 地址栏输入 chrome://apps 打开。利用网页技术实现与本地桌面程序一样的应用程序。不过除了 Chrome OS，Google 将不再为 Windows、Mac、Linux 提供 App 支持，并且建议我们利用 PWA 技术创建 Web app，或者改成写扩展，或者利用 Electron 或者 nw 创建本地应用

• plugin(插件)：Chrome 地址栏输入 chrome://plugins 打开。这才是 Chrome 的“插件”，这是对浏览器本身功能的增强。比如 "Chrome PDF Viewer" 插件可以使得浏览器具有浏览 PDF 文件的能力

平时我们不用关心插件，我们经常用到的是“扩展”，并且偶尔也会使用到“应用”。所以今天主要就介绍几款 Chrome 扩展和应用。

Extensions(扩展)

对于开发者来说，Chrome 不仅自身厉害（可以参见Chrome DevTools）,而且背后还有强大的社区，今天就跟大家整理一下 Chrome 中那些针对开发者的扩展及应用。

octotree

当你查看 Github 文件时你有没有因为不停切换文件而感到烦躁？octotree 能够将一个 Repository 以文件树的形式展现。

JSONView

将你的 JSON 数据更好地展现出来。

Code Cola

以可视化方式在线编辑页面样式。

CSSViewer

查看页面任意一个元素的 CSS 样式。

Font Playground

以可视化的方式为页面选中的元素设置不同的字体。

WhatFont

检查页面中任意元素的字体。

Page Ruler

在页面上画一把“尺子”，可以度量宽高、位置等信息。

PerfectPixel by WellDoneCode

将图片插入页面后可以在像素级上调整图片位置，对于像素控而言尤其有用。

Google PageSpeed Insights Extension

原理同将网址放入到 PageSpeed Insights 中，来测试网页的加载速度。这个插件可以一键为网页的加载速度打分，并且可以为你链接到 PageSpeed Insights。

Responsive Web Design Tester

测试响应式网页的利器。自认为比 Chrome DevTools 自带的 "Device Toolbar" 看得舒心。

User-Agent Switcher for Chrome

切换浏览器的 User Agent。

Usersnap - visual feedback & bug reports

让你快速以可视化的方式提交 bug。

Wappalyzer

一键识别网页中用到了哪些软件，但并不是很全。

Web Developer

添加一个工具栏供开发者调试网页。

Web Developer Checklist

为开发者提供一个最佳实践的检查表。

PicMonkey Extension

可以修改页面中的所有图片或者页面截图。

Apps(应用)

在介绍开发者用的 Apps 之前，我想先介绍一款扩展：远方 New Tab，与大家熟悉的 Momentum 相似，但我觉得这款扩展更适合我，不仅因为新的 Tab 页面上保留了 Google 原来的搜索框，也添加了几个有用的菜单：History、Bookmarks 和 Apps。所以我平时打开 Chrome apps 的入口都在这个页面。可能有人觉得搜索框影响图片的展现，你还可以将搜索框设置成隐藏，当鼠标悬浮到相应位置时，搜索框也能自动出现。

介绍了这款能够快速打开 Chrome apps 的扩展后，我们来看看有哪些适合开发者使用的应用。

Postman

使用 Postman 可以模拟向服务器发起请求。

Google 文档

具有云储存、同时编辑等功能。

Marmoset

为代码创建酷炫的快照

如果你有其他好用的扩展或应用，希望不吝分享。