1. Aptana
Aptana是一個免費、功能強大、open-source的網頁開發工具,它是基於eclipse的一套IDE軟體。不論是用來編寫HTML, CSS, JavaScript, PHP, Ruby on Rails, Django都有原生支援。以下是他的特點:
Code Assist:
它可以用來幫你檢查程式錯誤,並且給你建議該如何解決,這就像原本的eclipse對Java的錯誤建議一樣好用。而且在你寫程式時,它還會列出支援的瀏覽器,讓你不再為跨瀏覽器支援度苦惱。
Aptana Code Assist 自動列出html tag
Auto Complete (Intellisense):
這是我最主要使用Aptana的原因之一,它可以自動幫我們填上function的名稱、檔案名稱,懶人必備!
Aptana Auto Complete (Intellisense) 增加web開發速度
版控軟體Git:
讓你可以跟你的夥伴多方工作,這也是現代軟體開發必須的功能。
Aptana與Git的整合
ftp上傳工具:
寫完程式還要另外開ftp clinet上傳程式嗎?Aptana也有內建了!而且他還支援SFTP, FTPS等加密傳輸。
Aptana 以內建ftp client
Aptana與jQuery的Auto Complete (Intellisense)
如果你的程式不只是用標準的html tag、javascript function,而是需要3rd party的libraty如jQuery的支援,這時候如果還想要支援Auto Complete (Intellisense)功能,則需要再專案加入.sdocml檔案。可以到appcelerator找到完整的.sdocml列表,比如我們要的jQuery則可以下載jquery.1.4.2.sdocml。把它加入專案個根目錄即可。
在Aptana加入jquery.1.4.2.sdocml
這時候我們再寫jQuery時就可以看到效果了。function的說明、範例一應俱全!
Aptana對jQuery的Auto Complete (Intellisense)效果
2. Firebug
Firebug真是網頁設計師的好朋友,它可以動態的執行javascript,讓開發者可以很容易知道各function、變數的情況。我們就以jQuery為例來說明:
比如有一個table長這樣:
Table範例
我們在使用jQuery的selector想要抓出最右邊的column,也就是host id。使用jQuery的語法:
$('#host_list_area tr').find('td[name="hostId"]');
這時候就可以抓顯示出到底這個selector可不可以抓到你想要的element。如下圖,我們可以看到回傳了3個td元素。
Firebug主控台可以下javascript指令
把滑鼠移到其中一個td,網頁上就會顯示出相對應被選到的元素,實在太方便了。
被選取的元素
如果我們想要看其中一個td的html碼,就上其上按一下滑鼠左鍵,就會跳到HTML頁面:
Firebug HTML頁面: 選擇到的td的html
即使這個html是我使用jQuery動態產生的,一樣可以顯示的出來喔。眼見為憑總是比虛無飄渺的程式碼容易debug!
PS:如果還有其他好用的網頁開發、debug的工具,也請讀者留言告知喔!