前端開發者的 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

爲代碼建立酷炫的快照

若是你有其餘好用的擴展或應用，但願不吝分享。