2011/06/11

Powerful Web Development & Debug Tool: Aptana & Firebug

1. Aptana

Aptana是一個免費、功能強大、open-source的網頁開發工具,它是基於eclipse的一套IDE軟體。不論是用來編寫HTML, CSS, JavaScript, PHP, Ruby on Rails, Django都有原生支援。以下是他的特點:

Code Assist:

它可以用來幫你檢查程式錯誤,並且給你建議該如何解決,這就像原本的eclipse對Java的錯誤建議一樣好用。而且在你寫程式時,它還會列出支援的瀏覽器,讓你不再為跨瀏覽器支援度苦惱。

code assist

Aptana Code Assist 自動列出html tag

Auto Complete (Intellisense):

這是我最主要使用Aptana的原因之一,它可以自動幫我們填上function的名稱、檔案名稱,懶人必備!

aptana

Aptana Auto Complete (Intellisense) 增加web開發速度

版控軟體Git:

讓你可以跟你的夥伴多方工作,這也是現代軟體開發必須的功能。

git

Aptana與Git的整合

ftp上傳工具:

寫完程式還要另外開ftp clinet上傳程式嗎?Aptana也有內建了!而且他還支援SFTP, FTPS等加密傳輸。

ftp

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 (2)

在Aptana加入jquery.1.4.2.sdocml

這時候我們再寫jQuery時就可以看到效果了。function的說明、範例一應俱全!

aptana (1)

Aptana對jQuery的Auto Complete (Intellisense)效果

2. Firebug

Firebug真是網頁設計師的好朋友,它可以動態的執行javascript,讓開發者可以很容易知道各function、變數的情況。我們就以jQuery為例來說明:

比如有一個table長這樣:

2011-06-11_174829

Table範例

我們在使用jQuery的selector想要抓出最右邊的column,也就是host id。使用jQuery的語法:

$('#host_list_area tr').find('td[name="hostId"]');

這時候就可以抓顯示出到底這個selector可不可以抓到你想要的element。如下圖,我們可以看到回傳了3個td元素。

aptana (3)

Firebug主控台可以下javascript指令

把滑鼠移到其中一個td,網頁上就會顯示出相對應被選到的元素,實在太方便了。

aptana (4)

被選取的元素

如果我們想要看其中一個td的html碼,就上其上按一下滑鼠左鍵,就會跳到HTML頁面:

aptana (5)       

Firebug HTML頁面: 選擇到的td的html

即使這個html是我使用jQuery動態產生的,一樣可以顯示的出來喔。眼見為憑總是比虛無飄渺的程式碼容易debug!

PS:如果還有其他好用的網頁開發、debug的工具,也請讀者留言告知喔!

Buddhism and Software Developer

In today's fast-paced society, we are often surrounded by work, goals, and external pressures. However, the wisdom found in Buddhism off...