使用 Eclipse (Aptana Studio) 調試 iPhone Web 應用程式

前言

iPhone Web 應用開發雖可利用 Safari 的 WebKit 引擎，但在真機上調試 JavaScript/Ajax 非常不便。Aptana Studio (基於 Eclipse) 提供整合式調試環境：內建 Web 伺服器、JavaScript 調試器、Firebug 整合、iPhone 模擬預覽，讓開發者能在桌面瀏覽器甚至真機 WiFi 連線下高效調試。

環境建置

1. 下載安裝 Aptana Studio Community Edition (免費)，支援 Windows/Mac/Linux，需 JRE 1.5+。
2. 啟動 Aptana，從 Start Page 的 Plugins 區安裝 Aptana iPhone Development Plug-in (Apple iPhone Support)，重啟完成安裝。

iPhone Web 開發關鍵特性

• 水平/垂直 iPhone 預覽模式
• 專案向導快速啟動
• 一鍵導入 Ajax 函式庫 (jQuery, Prototype 等)
• 內建 Web 伺服器支援本機 WiFi 真機訪問
• 整合 Firebug：DOM/CSS 檢查、網路監控、控制台日志、斷點調試

JavaScript 調試器安裝與配置

1. 點擊工具列 Debug 圖示 > Debug > New Launch Configuration
2. 名稱自訂，Start Action 選 Use current page，勾選使用內建伺服器
3. 點擊 Debug，系統提示安裝 Aptana Debugger Extension (Firefox 專用)，確認安裝。

Debug 透視圖元件

安裝完成後自動切換至 Debug 透視圖，包含：

• Debug 視圖：執行緒與堆疊
• Variables：當前作用域變數值
• Breakpoints：斷點管理
• Scripts：載入的腳本檔
• Expressions：運算式監看
• Ajax Requests：Ajax 請求追蹤
• Editor/Outline/Console：編輯器、大綱、控制台輸出

實機與模擬器測試

1. 專案右鍵 > Debug As > JavaScript Web Application，啟動內建伺服器 (預設 https://127.0.0.1:8000)
2. 本機 Firefox 自動開啟並附載調試器
3. 真機 iPhone 連同一 WiFi，輸入電腦區域網 IP (如 https://192.168.1.106:8000) 即可訪問
4. Mac 可使用 iPhoney (免費開源模擬器) 像素級預覽

斷點與單步調試

• 編輯器左側灰色區域右鍵 > Toggle Breakpoint 設定/移除斷點
• 調試暫停時，Variables 視圖顯示當前作用域變數
• 單步操作：F5 (Step Into)、F6 (Step Over)、F7 (Step Return) 或工具列圖示

控制台日誌與 Console API

真機運行時無法互動調試，但可透過 console.log() 等 API 將訊息送回 Aptana Console 視圖。

• View > Show View > Console 開啟控制台
• 支援 console.log/debug/info/warn/error/assert/dir/dirxml/trace/group/groupEnd/time/timeEnd/profile/profileEnd/count 等豐富 API

Firebug 整合功能

Firebug 與 Aptana 調試器雙向同步斷點，提供：

• HTML/CSS 即時檢查與編輯 (Inspect 模式)
• Net 面板監控網路請求 (含 XHR/Ajax)
• Profiler 分析 JavaScript 效能 (關鍵：iPhone Safari 強制 5 秒執行上限)

總結

Aptana Studio 整合 JavaScript 調試器、Firebug、內建伺服器與 iPhone 預覽，構建完整的 iPhone Web 應用調試工具鏈。開發者可在桌面環境高效開發、調試、分析效能，並無縫延伸至真機驗證，極大提升開發效率與程式碼品質。