开发效率翻倍！这些扩展让你告别加班，准时下班

不少扩展都是程序员开发的，关于提升开发效率的扩展也是多多的。

在 Chrome 应用商店中，还有专门的一个「开发者工具」分类：

‍

前端页面相关

CSS：

CSS Variables Editor：可以编辑 CSS 变量，显示所有的颜色
CSS Peeper：轻松提取某个元素的 CSS 代码，界面直观友好
Code Cola：可视化编辑在线页面 CSS 样式
Page Ruler：一款尺寸测量工具
CSS Viewer：更简单直观的 CSS 查看器，开源
ColorZilla：非常流行的取色器，有 400w 安装量，类似的扩展有 Ultimate Color Picker，ColorPick Eyedropper

‍

JSON：

JSON Viewer：号称最漂亮的 JSON 美化扩展，100w 用户
JSON-handle：对 JSON 进行浏览和编辑，以树形图样式展现，10w 用户

‍

字体：

WhatFont：轻松识别网页上使用的字体
Font Tester：无需改代码，快速切换字体，调整样式

‍

Best Cookier：可以方便地编辑、查找、监控、导出 Cookie。
EditThisCookie：您可以添加，删除，编辑，搜索，锁定和屏蔽 cookies
Chrome-Best-Cookier：集颜值、操作、功能于一体，有多种主题，能监控 JS 对 Cookie 操作

‍

前端开发相关

LiveReload：实时预览、自动刷新网页，对于前端开发是很有用的小插件
Set Character Encoding：修改网页编码（GBK，UTF8 等）
Fake Filler：自动用虚假数据填充表单，专为经常使用表单的开发人员和测试人员而设计
Mobile Simulator：可以模拟 Web 在各种移动设备上的显示和功能测试
WAVE Evaluation Tool：可访问性评估工具，确保网站对所有用户都是可访问的，包括残疾人
ReRes：可以指定 URL 重定向到特定的 URL
XSwitch：阿里大佬开发，可以实现跨域，重定向 URL
Moesif Orign & CORS Changer：解除浏览器跨域限制
VisBug：谷歌开源的一款前端设计、调试工具
Web Developer：提供了一个全面的开发者工具栏，包括查看、编辑和禁用前端三大件，还提供了尺寸测量、响应式设计视图、页面资源查看等功能。
Restlet Client - REST API Testing：Restful API 测试工具（不过我一般都用 Postman）
Window Resizer：方便地调整浏览器窗口的大小，以便更好地测试和预览不同分辨率的网页和应用程序。
Code Runner：允许开发者在浏览器中直接运行代码片段，支持多种编程语言。
WEB 前端助手 (FeHelper)：国人开发的一套前端工具集，几乎是必备扩展了，2011 年维护至今，有 JSON 自动 / 手动格式化、JSON 内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片 Base64 编解码转换、Markdown、网页油猴、网页取色器、脑图 (Xmind) 等贴心工具

‍

框架：

Angular DevTools：Angular 官方开发，有 30w 用户
Vue.js devtools：Vue 官方开发，有 100w 用户
React Developer Tools：Facebook 官方开发，有 400w 用户
Redux DevTools：Redux 是一个流行的 JS 应用程序状态管理库，该扩展能轻松管理 Redux，有 100w 用户

‍

网站分析相关

Wappalyzer：可以分析网站用到的技术框架，有 200w 安装量
Website Technology Checker by Snov.io：Wappalyzer 的平替
UX Check：分析网页的可用性、可访问性和性能，帮助开发者优化网页，提高用户满意度。
WhatRuns：分析网站服务器信息，编程语言，前端框架，CMD，JS 库，Fonts，提供代码查看器
Lighthouse：谷歌出品，用于网站的性能测试、分析
Speedtest by Ookla：测试网络速度和打开网页的速度
Page load time：使用了 Web Timing API 来精确测量页面加载各个阶段的耗时，非常的简洁清晰
IP Address and Domain Information：支持更强大的 IP 分析功能
IP Whois & Flags Chrome & Websites Rating：可以显示网站的国旗，流行度，IP 等其它信息
User-Agent Switcher and Manager：自定义和切换网站的 User-Agent，查看网页在不同的 User-Agent 下的效果

‍

SEO：

Ahrefs SEO Toolbar：轻松分析网页和 SEO 情况
SEOquake：查看一个网站在各大搜索引擎的 SEO 情况
AITDK SEO Extension：流量/关键词/Whois/SEO 分析器
Detailed SEO Extension：非常全面详细的 SEO 情况分析工具

‍

GitHub 相关

GitHub 可以说是程序员离不开的网站之一，相关的扩展也是很多的：

Octotree：在项目左侧添加一个菜单，显示当前项目的整个文件夹结构，非常方便浏览项目
Octohint：代码智能高亮，提示参数属性
OctoLinker：直接从代码跳转到 GitHub 对应仓库，相对路径也能跳转，支持很多编程语言
Enhanced GitHub：也是很强大的扩展，支持显示每个文件大小，下载大文件，直接复制文件到剪贴板等功能，很多功能也被 GitHub 官方添加到了 Feature
GitZip for GitHub：让你方便地下载文件或子文件夹
GayHub：优化 GitHub 的阅读体验，支持文件目录树，暗黑主题，大屏
Git History Browser：允许用户在 GitHub 上查看文件的 Git 历史记录，包括每次提交的详细信息。
notifier-for-github：在扩展栏显示 GitHub 未读消息数，支持桌面通知
Github-hovercard：在查看头像、issue、repo 都时候都会弹出一个悬浮卡片，用以显示更多信息，十分方便
GitHub-userscripts：收录了很多油猴脚本
Material Icons for GitHub：替换原有的图标，类似的扩展有 github-file-icons，File Icon for GitHub
Sourcegraph：在线打开、阅读、运行、调试项目，还有各种 IDE 插件，以及高级功能（需付费）
Awesome Autocomplete for GitHub：加强 GitHub 的搜索框