前端开发工具、函式库与参考文件,这些工具仅针对一般桌上型/笔记本电脑的显示环境为主 (不含平板或手机等行动版网页相关工具)。
程序代码编写工具 (Coding Tools)
工作流程/建置/组合 (Workflow/Builds/Assemblers)
浏览器套件管理员 (Browser Package Managers) (参见: Front-End Package Manager Comparison)
CSS 基底样式/样板
HTML 基底结构/样板
操作 DOM 的相关函式库 (FYI: dojo, yui, ext, qooxdoo 都有自己的 DOM 工具)
各式 JavaScript 辅助工具/函式库
键盘控制相关工具/函式库
事件相关辅助工具/函式库 (mouse/touch/pointer)
CSS 关辅助工具/函式库
模块与脚本加载工具/函式库 (参见: Javascript Loaders Comparison)
UMD (Universal Module Definition)
UMD-inspired Module Boilerplate
JavaScript 模板引擎 (template chooser)
UI Widgets (comparison)
bootstrap components & javascript
测试执行工具 (Test Runners)
使用者自动化测试工具 (User Automated Testing)
测试框架 (Testing Frameworks)
其他测试函式库 (Assertion Libraries)
远程 DOM 与 JS 测试工具
JavaScript 效能检测工具 (JS Performance Testing)
jsPerf — JavaScript performance playground
JavaScript 自动化文件工具 (JS Auto Documentation Tools)
CSS 自动化文件工具 (CSS Auto Documentation Tools)
JavaScript 程序代码质量验证工具 (JS Quality Validators)
CSS 质量验证工具 (CSS Quality Validators)
HTML 质量验证工具 (HTML Quality Validators)
JavaScript 优化/最小化/压缩工具 (JS Optimizer/Minification/Compression Tools)
CSS 优化/最小化/压缩工具 (CSS Optimizer/Minification/Compression Tools)
CSS 预处理器 (Languages Compiling to CSS)
Bourbon: Mixins library for Sass
Neat: Semantic CSS grid framework
LESS Elements: Mixins library for LESS
Semantic.gs: Semantic CSS grid system
JavaScript 预处理器 (Languages Compiling to JS) (http://altjs.org/)
HTML 预处理器 (Languages Compiling to HTML)
纯前端应用程序框架 (Front End Application Structure) (somewhat backend agnostic)
包含后端技术的前端应用程序框架 (Front End Application Structure) (with backend opinions)
derby (requires NodeJS)
flatiron (requires NodeJS)
batman.js (requires NodeJS)
jsMVC (requires Java)
montage (requires NodeJS)
整合式应用程序框架 (Full Stack Application Structure/Frameworks)
tower.js (requires NodeJS)
前端 JavaScript 框架 (Frontend JavaScript Frameworks) (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)
参考数据/教学手册/兼容性套件/程序产生器等相关工具 (Reference/Guide/Polyfill/Generator Tools)
文件翻阅工具
DevDocs — API Documentation Reader
DocHub | Instant Documentation Search
浏览器兼容性工具/文件 (Browser X Supports X)
http://www.browsersupport.net/
HTML5 – Information and samples for HTML5 and related APIs
CSS3 – Information and samples
JavaScript tests & Compatibility tables
Cross Browser Handbook Knowledgebase
HTML 语言参考 & 兼容性工具 (HTML Language References & Polyfills)
HTML5 A technical specification for Web developers
HTML5 A vocabulary and associated APIs for HTML and XHTML
HTML 5 Reference A Web Developer’s Guide to HTML 5
HyperText Markup Language (HTML), from Mozilla
HTML5 相关规格/参考数据与兼容性套件 (HTML5 & Friends Specs/Ref & Polyfills)
HTML5 – Information and samples for HTML5 and related APIs
DOM 相关规格/参考数据与兼容性套件 (DOM Specs/Ref & Polyfills)
DOM Parsing and Serialization Living Standard
Document Object Model (DOM) Technical Reports, from W3C
Document Object Model, from Microsoft
Document Object Model, from Mozilla
CSS 相关规格/参考数据与兼容性套件 (CSS Specs/Ref & Polyfills)
CSS SPEC-I-FI-CA-TIONS, from W3C
CSS contents and browser compatibility
CSS Compatibility and Internet Explorer
HTML5 Cross Browser Polyfills (look for CSS)
CSS Selectors from CSS4 till CSS1
CSS 产生器 (CSS Generators)
Ultimate CSS Gradient Generator
CSS 编写风格与惯例指引 (CSS Style/Conventions Guides)
General CSS notes, advice and guidelines
JavaScript ES5 相关规格/参考数据与兼容性套件 (JavaScript ES5 Specs/Ref & Polyfills)
ECMAScript Language Specification
ECMAScript 5 compatibility table
JavaScript Reference, from Mozilla
The sample usage of ECMA 5 Features Implemented in V8
JavaScript, aka. Web ECMAScript Living Standard
JavaScript ES6 相关规格/参考数据与兼容性套件 (JavaScript ES6 Specs/Ref & Polyfills)
ES6 what can be shimmed and what not
ECMAScript 6 compatibility table
Draft Specification for ES.next (Ecma-262 Edition 6)
JavaScript 编写风格与惯例指引 (JavaScript Style/Conventions Guides)
Code Conventions for the JavaScript Programming Language
JSON 产生器
JSON Generator – tool for generating random JSON data
一般前端开发实务与开发习惯 (General Front-end Practices/Conventions)
效能调校
相关工具
PageSpeed Insights Browser Extensions
Chrome Developer Tools: Network Panel
Chrome Developer Tools: Timeline Panel
Chrome Developer Tools: Profiles Panel
准则与实务
Web Performance Best Practices
Best Practices for Speeding Up Your Web Site
High Performance Web Sites – 14 Rules for Faster-Loading Web Sites
各式在线编辑器/开发工具 (REPL)
JS REPL
JavaScript 在线编辑器 (JS focused editors)
正规表示式编辑器 (Regular Expression editors)
Debuggex: The online visual regex tester. JavaScript, Python, and PCRE.
HTML/CSS 编辑器
HTML/CSS/JS 编辑器
执行/测试代码工具 (Execute/Test live code)
云端开发工具 (Browser IDE’s)
JSON 编辑器
浏览器安全性 (Browser Security)
各式 CSS/HTML Hacks 整理 (Browser Hacks)
给前端开发人员的后端服务 (Backend services for frontend developers)
API 开发与测试工具
JSON 数据操作/查询工具 (JSON Query Tools)