學科:Web前端/輔助工具

JavaScript

• CodePen - a community of front end folks focused on inspiration and education.

與jsfiddle類似，但更強大。支持GitHub登入，支持LESS、SCSS、SASS、CoffeeScript……

• jsfiddle

功能強大。可用來分享代碼片段，調試。

• JS Bin

跟jsfiddle相似，但沒那麼多功能

• jsPerf

JS測試用例，比較幾個不同的寫法的性能，很有用的工具

受歡迎的測試： http://jsperf.com/popular

• Online JavaScript Beautifier

展開壓縮代碼，也支持html

• repl.it

在線的多語言終端，對於Js只是一個簡單的Chrome console

• gskinner.com/RegExr

很好用的正則表達式輔助工具

CSS代碼輔助生成

• CSS3 Generator

• CSS3, please!

仍然強大

• Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

• CSS Button Maker by Zhou Qi

• Font2Web

上傳.ttf或.otf字體，將其轉換為Web字體（.woff，.eot，.svg）並生成相應CSS樣式。

輔助插件

• GRUNT.js

Node.js任務自動化

• Koala

Koala is a GUI application for less, sass and coffeescript compilation, to help web developers to use less,sass and coffeescript development more efficient.

國人維護，用的 https://github.com/rogerwang/node-webkit

• Code Cola - Code Cola is a chrome extension for editing online pages' css style visually.

說明：http://www.zhouqicf.com/code-cola

顏色工具

• Color Scheme Designer

配色輔助

• Colorfy It - Website Color Analyzer

給出指定網站用色表

其他

• http://thetoolbox.cc/ The Toolbox: a directory of the best time-saving apps and tools

• Rythem

騰訊一Web前端團隊維護的抓包工具

• Unicode Code Converter

Unicode轉義

類型：可離線保存

• WhatFont Tool

比Inspector更簡單的查看頁面字體工具

類型：JS書籤

• Powerful Command Line Tools For Developers | Smashing Magazine

• 阿里測

網站質量探測工具

• https://github.com/sindresorhus/pageres

node.js 命令行工具，生成指定網頁不同解析度下的截屏