前端开发者的 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

为代码建立酷炫的快照

若是你有其余好用的扩展或应用，但愿不吝分享。