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的工具，也請讀者留言告知喔！
沒有留言:
張貼留言