有哪些好用的前端開發軟體？

01-02

以下的內容無圖，有gif配圖的請看，在線圖文地址：4. web前端開發分享-css,js工具篇

web前端開發乃及其它的相關開發，推薦sublime text, webstorm(jetbrains公司系列產品)這兩個的原因在於，有個技術叫emmet, Emmet Documentation，而這兩個對他的支持是：

sublime text 是所有編輯器裡邊支持emmet比較好的的唯一一款。

webstorm是所有編輯器裡邊唯一內置emmet的一款，並且將emmet的精神往前推動的一款。

phpstorm，idea包括所有webstorm的功能。只是phpstorm是針對phper的，idea是針對javaer，webstorm針對前端er。

他們的詳細對比： http://www.36ria.com/5884

一. css工具:

1. emmet Emmet Documentation

a. 可以以插件的形式安裝在dreamweaver,notepad++,editplus,sublime各個編輯器上。

Zen Coding: 一種快速編寫HTML/CSS代碼的方法前端觀察

zen coding更名為emmet，新加更多特性前端觀察

zen coding更新到 0.7前端觀察

zen coding資源更新前端觀察

zen coding的dreamweaver插件安裝教程前端觀察

emmet在sublime上的效果：

1). css ：他與其它編輯器的區別在於細節上，比如ctrl,alt+方向鍵可以修和裡邊的數值

2). html 效果：

3). sublime的emmet規則修改：

packages-&>Emmet-&>emmet-&>snippets.json

b. 只有一個例外jetbrain公司的產品線：webstorm,phpstorm,intellij idea都是內置的，不需要安裝。

1).

寫js的效果：

2). webstorm的emmet規則修改：Files -&> settings -&> Live Templates

2. css壓縮辦法：

a. 通過正則五步替換法，適用於任何編輯器：

五步整理你的css文件

b. 模塊化工具

二. js工具：

1. 壓縮等：

Javascript代碼壓縮與加密解密美化器等各種小工具 -&> JS百寶箱

在線壓縮

JS壓縮, CSS壓縮, javascript compress, js在線壓縮，javascript在線壓縮，css在線壓縮，YUI Compressor壓縮，Google Closure Compiler壓縮，js壓縮，uglifyjs壓縮，javascript壓縮，js美化，javascript美化，js加密，js解密，js混淆，javascript加密，javascript解密，js格式化，javascript格式化

在線壓縮

在線工具 —

工具集

2. 以emmet的方式開發js,php,jsp,java and so on。

Js,jQuery版Zencoding之webstorm phpstorm

php版Zencoding之 phpstorm

3. firebug,chrome調試工具的使用：

chrome developer tool 調試技巧
chrome調試
作為Web開發人員，我為什麼喜歡Google Chrome瀏覽器

chrome的調試
https://developers.google.com/chrome-developer-tools/docs/commandline-api
chrome console 命令詳解
Firebug入門指南
Firebug入門指南
Firebug控制台詳解
Firebug控制台詳解
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
chrome移動版調試
Android上的遠程調試

【譯】Android上的遠程調試
用Chrome開發者工具做JavaScript性能分析
用Chrome開發者工具做JavaScript性能分析
用谷歌(Chrome)瀏覽器來當手機模擬器
用谷歌(Chrome)瀏覽器來當手機模擬器
查看html元素綁定的事件與方法的利器
查看事件綁定
chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/
綜合瀏覽器開發工具

關於FireBug和Chrome的控制台
關於FireBug和Chrome的控制台
使用Chrome DevTools的Timeline和Profiles提高Web應用程序的性能
提示信息 - HTML5開發者社區
chrome profiles
Chrome神器Vimium快捷鍵學習記錄
Chrome神器Vimium快捷鍵學習記錄
Chrome 開發工具 Workspace 使用
Chrome 開發工具 Workspace 使用

4. js參考手冊：

w3c手冊

5. 其它開發工具：

新手推薦：editplus，vim

團隊開發：

webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).

有道雲筆記

6. 模塊化開發grunt

新手上路 - Grunt 中文社區

入門

command line

擴展工具grunt

Grunt 中文社區

前端項目構建工具---Grunt

Grunt：任務自動管理工具 -- JavaScript 標準參考教程（alpha）

基於Node.js的自動化構建工具Grunt.js

享受 Grunt - SegmentFault

享受 Grunt

【grunt整合版】30分鐘學會使用grunt打包前端代碼

【grunt第一彈】30分鐘學會使用grunt打包前端代碼

葉小釵第一彈

7. gulpjs

gulp.js - the streaming build system

官網

Gulp.js：比 Grunt 更簡單的自動化的項目構建利器

教程

gulp plugins

gulpjs/gulp · GitHub

前端構建工具gulp入門教程

Gulp —— 另一種自動化流水線 - 折騰喵的喵星雜記 - 知乎專欄

Gulp 另一種自動化流水線

三：jq工具

1. oschina參考手冊大全。

2. w3c_all.chm，w3cschool離線版，包含了javascript,jquery,php,sql,html,css2.x,3.x的手冊。

前端開發qq群：159758989 ！

在線圖文地址：4. web前端開發分享-css,js工具篇

前些天才發現一個好傢夥, 叫 brackets, 本身也是 js 寫的, 爽爽爽~ (注意順手安插件, 比如 emmet, 這東西裝插件也比 sublime 方便.)

另外推薦 Visual Studio + Web Essentials, 也是常見的 less, sass, TypeScript, coffeescript 什麼的保存編譯一應俱全, 腳本壓縮打包也非常方便, 也集成了 git 等~ 大殺器. VS 2013 Update 2 (現在是 Update 3, 很快 Update 4) Express 也可以安裝 Web Essentials 了, 都是免費的~

輕重結合才是王道.

今天發現了一個名為 Koala 的軟體！！

可以實時編譯Less、Sass、Compass、CoffeeScript！！

http://koala-app.com/index-zh.html

WebStorm,你值得擁有，再加上固態硬碟和大點的內存，寫代碼就是一種享受。。

MarkMan index.title

誰用誰知道

很多別人說過的我就不說了

1.workspace 這個很多人沒用過，反正我覺得效率提高2倍

2.emmet 誰用誰知道，大大提高效率

3.fiddler 遠程調試在線文件

HBuilder 有MAX 版本和win版本，今天是剛裝的，我覺得超好用，我最喜歡的是JS和JQUERY還有CSS以及DIV的提示符，簡單方便..

我是在Mac上開發的所以推薦你使用coda2.5 還有就是webstorm。 webstorm簡直就是前端開發神器，webstorm在win平台也有，不過我覺得在Mac上更好看好用，呵呵他不僅繼承了zen coding 還有node.js 各種庫，非常好用

目前我的工作流是先用yeoman，具體不介紹了，前端腳手架工具，對於要做的項目選一個generator。

這些模板還是很有用的，比如angular的模板，先要讀懂gruntfile，這份gruntfile非常全，開發時只需要grunt serve一下測試服務就在本地了，所有文件改動都會在瀏覽器裡面直接看到。

yeoman帶的bower是個好東西，當然你也可以選擇其他方案，我覺得前端庫里好像bower的支持度最高。

這樣，開發工具的選擇就很明了了，一個好用的文本編輯器+一個好用的term+主力debug的瀏覽器(當然其他瀏覽器也是需要的)。這三樣就滿足大部分開發需求了。

當然，版本管理，diff，圖片調整，取色器，科學上網什麼的該裝的早晚都要裝的，新配置環境第一天最好也裝上。

我了解的和知道的：

Visual Studio 2010 with Visual Web Developer (Windows)

Chrome + Chrome Dev Tools

Firefox + Firebug (Windows, Linux, Mac OS X)

Aptana Studio (Windows)

Komodo IDE (Windows, Linux, Mac OS X)

Komodo Edit (Free) (Windows, Linux, Mac OS X)

Eclipse + JSEclipse Plugin (Windows, Linux, Mac OS X)

NetBeans (Windows, Linux, Mac OS X and Solaris)

WebStorm (Windows, Linux, Mac OS X)

Brackets

Atom（Github 出品）

這麼整齊，你一定覺得不對勁；對，我是複製的：

Top 8 IDEs for JavaScript Development and Debugging

同最高贊..

webstorm，一款非常優秀的前端開發軟體

webstorm(sublime)+chrome+charles

gulp

weinre 能夠調試手機上的網頁。調試面板的功能和chrome 的開發者工具類似。

weinre - Home

webstrom Sublime intellidea（如果需要java的話）瀏覽器的debug 熟練使用火狐跟google的就行了別的基本能通吃還有一些在線的js編輯器也可以做小例子的時候試用