進行 HTML、JavaScript 和 Ajax 開發和調試的必用工具

使用最好的開源工具處理 Web 頁面、指令碼和樣式，簡化新網站和頁面的開發。動態檢查和修改 HTML 標籤、CSS 和 JavaScript，檢查 DOM 以及客戶機-伺服器通訊並瞭解 bookmarklet 如何讓開發變得更為安全和容易。

JavaScript 應用程式變得越來越複雜了 —— 為了在伺服器和用戶端調試代碼，開發人員必須要瞭解大量的工具和應用程式。而且他們還需要各種工具來檢查兩者間的通訊 —— 往往要涉及標記、指令碼、CSS 以及其他構建 Web 網站常用的技術。

本文側重於開發過程的用戶端，展示了一些可簡化開發人員工作的 Firefox 工具。這些工具可用來檢查頁面、更改資料，甚至調試 JavaScript，而且全部都是動態進行的。藉助這些工具，無須再在 JavaScript 原始碼中使用 alert() 語句，進而實現最為先進的調試、檢查和修改。

本文結束後，您應該可以獨立使用本文中介紹的 Firefox 擴充和工具並將這些知識應用到您自己的項目中。

內容

在本文中，將使用工具來動態檢查頁面的 HTML 程式碼和修改頁面的部分內容，進行進階 JavaScript 調試、修改 DOM、查看客戶機和伺服器間的通訊並將開發代碼注入實際的 Web 網站來測試這些新特性。

要跟隨本文的學習，您將需要如下工具：

• 用於 Firefox 的 Web Developer Toolbar，用來動態檢查 HTML 程式碼和修改其部分內容，以及調試 JavaScript
• Firebug，用來調試 JavaScript 和 CSS，修改 DOM，以及查看客戶機和伺服器間的通訊
• Greasemonkey 與包括 jQuery 的 bookmarklet，用來將開發代碼注入實際 Web 網站以測試新特性

如您所見，本文涵蓋的內容很多，因此只能對這些工具的功能做簡單的介紹。不過，通過本文，您將能夠大致瞭解如何使用這些工具以及這些工具有哪些功能。客戶機/伺服器間的通訊沒有在本文中給予介紹，但有可能會在未來一期的文章中涉及到。

開始之前

這裡介紹的所有工具均可免費得到，您可以從上述連結下載，也可以藉助本文末尾的 參考資料 部分中給出的連結。若想跟隨本文的樣本學習，應該馬上下載。不要忘記重啟瀏覽器以便讓所做的更改生效。

很多例子都使用了 IBM 支援網站（http://www.ibm.com/support）或 Google 結果頁面，所以不妨在新的瀏覽器視窗開啟其中一個，也可以兩個都開啟。

檢查用戶端代碼

假設您剛開始接觸一個新的應用程式，往往想要瞭解關於它的更多內容 —— 它是如何工作以及如何構建的。這可能是因為您必須要調試或擴充此程式，也可能是因為您想要瞭解其工作原理以便為自己的項目做一些參考。

“Web Developer Toolbar for Firefox”（參見 參考資料）是一個很棒的 Firefox 擴充，讓您可以迅速檢查和修改 Web 網站或 Web 應用程式。它可以作為單獨的工具列顯示，也可能會出現於操作功能表。假設您當前正處於 http://www.ibm.com/support/ 網站並想要迅速確定貫穿此網站所使用的那些類和 id。轉到 Information > Display ID & Class details，在此文檔內可以看到所有的 id 和類。如果您跟隨了這些樣本進行操作，那麼將會看到這可迅速展現諸如 IBM 的左側導航這類結構。

圖 1. IBM 的左側導航結構，包括 id 和類的細節

此外，還有其他的一些很棒的 outline 特性可用。比如，可以 outline 所有的表（無一在 ibm.com 上！）或所有塊層級的元素。這樣一來，就可以很容易地看到 div 元素是如何在螢幕上布局的 —— 在開發新網站時，這是一個很好的工具。

但，還遠遠不止這些 —— 尤其是對於測試而言。您可以很輕鬆地禁用 JavaScript、cookie 或樣式以檢查網站是否還能工作，或者它對螢幕助讀程式應用程式或搜尋引擎又作何顯示。禁用映像和顯示所有 alt 標記可以很快顯露可用性問題，也可以提供有關頁面上所用映像的大量資訊。

另一個重要特性，尤其是測試應用程式安全性所需的，是工具列的 Forms 部分。在這裡，不僅可以插入表單，還可以嘗試 JavaScript 驗證，方法可以是讓表單欄位成為可寫的，或是刪除文字欄位的最大長度，也可以將選擇 下拉式清單更改為文本輸入欄位。這樣一來，測試資料修改後應用程式是否還能工作就顯得異常簡單，無須修改任何原始碼。轉到 Forms > Convert Form Methods > GETs to POSTs 以修改位於 ibm.com 頂部的 Search 表單的行為。圖 2 顯示了此步驟：

圖 2. Search 表單的細節

如果現在輸入一個搜尋字詞並按 Search 按鈕，您不會得到結果清單，反而會被重新導向到協助頁面。而這正是 ibm.com 搜尋引擎的理想行為。

Web Developer Toolbar 的另外兩個重要特性是能使用一種非常簡單的介面查看和編輯 cookie 資訊（Cookies > View Cookie Information）以及查看頁面上所使用的所有 JavaScript（Information > View Java）。最後的這個特性既包括內聯（inline）指令碼也包括動態載入的指令碼，所以搜尋會在這兩個地方找到結果。

在繼續學習之前，不妨花些時間瞭解一下 Web Development Toolbar 提供的所有特性，您將來很快就會發現缺少它，工作很難開展。Internet Explorer Developer Toolbar（參見 參考資料）針對 Internet Explorer 提供了類似特性。

探索 DOM

探索了靜態頁面之後，就可以利用 JavaScript 開發人員所能使用的一種最為強大的擴充處理一些動態內容了。如果您還不曾使用過它，現在就可以立即安裝 Firebug 擴充（參見 參考資料）並重啟 Firefox 以載入它。從現在開始，您將擁有一個單獨的面板，可以通過單擊瀏覽器右下角的小的選定標記啟用它。圖 3 顯示了這個 Firebug 控制台:

圖 3. Firebug 控制台

此控制台需要佔用很多記憶體空間，所以只有在需要的時候才能為某些網站啟用。它也能針對特定的主機啟用 —— 在需要在某台測試機器上開發代碼並要在此機器上進行調試時，藉助 Firebug 就顯得非常必要。

一旦啟用，不同的 Firebug 特性就會在頂部列出 —— 目前而言，只側重於 HTML 選項。它以一種易讀的格式顯示了頁面的 HTML 原始碼。可以層疊和擴充不同的部分並使用強大的 Inspect 按鈕來瀏覽此 DOM。請注意所顯示的 DOM 是應用了所有動態更改的網站的當前 DOM，注意到這一點很重要。如果指令碼刪除了一個元素，該元素也會從 Firebug 視圖刪除。

使用 Inspect 特性來選擇 IBM Support 頁面（http://www.ibm.com/support/）上的 Choose support type 下拉式清單。一旦元素被選中，DOM 視圖就會更新並顯示選中檔案的 HTML 程式碼。如果在不同的元素上單擊並編輯它們，這些更改就立即會在 DOM 和所呈現的視圖上生效。繼續並向 onchange 事件處理常式添加 alert() 語句， 4 所示:

圖 4. 使用 Firebug 添加定製代碼

單擊 Enter 以儲存更改，並選擇下拉式清單中的其他項。瞧，訊息出現了。請注意更改並不會永久儲存 —— 一旦頁面重載，更改就失效了。此特性對於快速測試更改或修改 DOM 以測試指令碼的功能性尤其有用（這將在下一章節進行進一步討論）。

您可能會注意到應用於選定元素的所有 CSS 樣式均在 Firebug 面板的右側顯示為藍色。這對於通過指令碼進行動態更改以及 CSS 調試（比如為了尋找一個間隔問題）尤其有用。Layout 選項卡給出了元素的間隔和邊界的概覽，而 DOM 選項卡則對 JavaScript 開發有協助，因為它會列出所選定元素的所有 DOM 屬性。

無須多言的是，Firebug 既能修改 CSS 樣式，又能修改 DOM 屬性，而且這些更改還會立即生效。圖 5 顯示了 Firebug 的 CSS 檢查控制台:

圖 5. Firebug 的 CSS 檢查控制台

調試 JavaScript

很長一段時間，JavaScript 都未能獲得其應有的榮譽。很多人都將其視為一種 “玩具” 程式設計語言，IDE 和調試器都非常缺乏。雖然現在有了一些解決方案 —— 比如 Venkman Debugger 或 IE Script Debugger（參見 參考資料） —— 但它們很難使用而且所提供的特性也不多。在需要重新載入網站和持續單擊直至觸發了正確的函數時，很多開發人員還是要繼續在其代碼和開發中使用 alert() 語句。

隨著 Firebug 的出現，這一切才有了改觀，它具有一個整合的 JavaScript 調試器，能動態提供斷點、變數檢查和命令執行。是應該超越 alert() 的時候了！

在本文的第 1 節，使用了 Web developer Toolbar 的 Information > View JavaScript 功能，並藉此發現 IBM Support Web 網站上的下拉式清單調用了 IBMSupportDropdowns.selectChange(this) 函數，而且知道了該函數存在於名為 “ddnav.js” 的指令碼內。現在，選擇 Firebug 內的 Script 選項卡，從下拉式清單中選擇 ddnav.js 指令碼並導航到 IBMSupportDropDowns.selectChange 函數。通過單擊行號設定一個斷點。圖 6 顯示了這個步驟:

圖 6. 在 Firebug 設定一個斷點

現在，選擇下拉式清單中的任一元素以查看 JavaScript 執行如何停止。通過使用功能表列中的任意按鈕 —— 或快速鍵 F8 （繼續）、F10（單步跟蹤跳過子函數）和 F11（單步跟蹤進入子函數）—— 就可以逐行執行代碼。

Firebug 在左側顯示代碼；在右側顯示針對當前範圍的所有已定義的變數和對象。在 DOM 元素上單擊直接轉到 HTML DOM 視圖，並且，正如先前一樣，仍然可以動態修改資料。在原始碼內的變數上懸停則會顯示其內容。要添加新的被觀察元素，可以將其輸入到 New watch expression 並按 Enter。

如果選擇 Console 選項卡，代碼會在執行停止了的函數的上下文內執行—— 這就讓您得以動態修改變數內容或調用函數。在 Console 或代碼的任何部分內產生的錯誤都會顯示於 Console 內。直接選擇此錯誤會將您帶到錯誤發生的程式碼片段。

毫無疑問，Firebug 提供了一種更加自然的處理 JavaScript 的方式，並且提供了更好的靈活性。熟悉了 Firebug 之後，您就會離不開它，而且不禁會問，之前沒有使用 Firebug 時是如何編寫出 JavaScript 代碼的。

查看客戶機和伺服器間的通訊

Web 2.0 應用程式在後台非同步通訊，所發送的資料可以是 JavaScript、JSON 或者是 XML。由於 JavaScript 代碼接收資料，前端不會直接看到後端發來的任何調試資料。因此，這類通訊必須直接查看。

選擇 Firebug 中的 Net 選項卡 —— 在後台，該工具已經記錄了所有的頁面請求:

圖 7. 使用 Firebug 查看網路流量

功能表列讓您可以按請求類型進行過濾，而請求前面的小三角則讓您可以看到請求和回應標頭以及響應本身。時間欄則可展示應用程式中有無瓶頸。

還有很多其他的方式可以查看客戶機和伺服器間的通訊，比如 Fiddler2 工具、Wireshark、Microsoft Network Monitor 等。有關這些工具的介紹超出了本文的範圍，但希望將來能有文章對此做更詳細的介紹。

在實際網站做測試

若能將指令碼應用於現有的實際網站豈不是很妙? 這類網站一般為他人所有，我們無從訪問其應用程式原始碼，只想測試新特性同時又不會影響其他網站。對於大多數人而言，Google 搜尋結果頁面滿足這三個條件，而且也是我們下一個樣本的重點。在單獨的一個瀏覽器視窗，用 www.google.com 進行搜尋，並看看如何能提高搜尋結果。

最簡單的一種修改 DOM 的方法是結合使用 Firebug Console 和 jQuerify Bookmarklet（參看 參考資料）。jQuery 是一種雖小但卻功能強大的庫，允許使用 CSS3 文法訪問和修改 DOM 。有關 jQuery 的更多細節可以在文章 “Simplify Ajax development with jQuery”（參看 參考資料）中找到。

bookmarklet 則讓您可以將 jQuery 注入現有的頁面，因此 jQuery 的強大功能可以很容易在 Firebug 控制台內使用。您應該在您的 Google 結果頁面上嘗試這麼做。對頁面做 jQuer 處理，然後開啟 Firebug 控制台，輸入如下代碼並執行（只一行代碼！）：

 

$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p=%27 + encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');

搜尋結果應該類似圖 8。

圖 8. 用 jQuery 增強 Google

這會向搜尋欄添加一個新連結，讓您可以針對 Yahoo 執行完全相同的搜尋。不幸的是，您必須每次都要在頁面上運行 jQuery，而且代碼必須要手動執行，這顯然很不方便。但是開發能更改頁面的代碼很簡單，而且還可以對代碼進行測試直到它能很好地工作為止。

一旦代碼能夠很好地工作，就可以使用 Greasemonkey 擴充來永久地在每次使用 Google 時都使用這一小指令碼。Greasemonkey 能在網站或網頁載入時將所謂的 “使用者指令碼” 應用於該網站或網頁。要添加新指令碼，按右鍵狀態列中的 Greasemonkey 表徵圖並選擇 New User Script。輸入名稱、名稱空間和描述。includes 列表必須變更以便與所有的 Google Search 結果匹配。圖 9 顯示了添加新 Greasemonkey 指令碼的步驟:

圖 9. 添加新的 Greasmonkey 指令碼

現在，開啟任一文字編輯器並輸入如清單 1 所示的使用者指令碼:

清單 1. Greasemonkey 指令碼擴充 Google

// ==UserScript== // @name Yahoo Search on Google // @namespace google_yahoo // @description Adds a Yahoo link to the Google results page // @include http://www.google.com/search // ==/UserScript== var jq = document.createElement('script'); jq.src = 'http://code.jquery.com/jquery-latest.js'; jq.type = 'text/javascript'; document.getElementsByTagName('head') [0].appendChild(jq); // Wait for jQuery to be loaded (function wait_jq() { if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(wait_jq,100); return; } $ = unsafeWindow.jQuery; $('#sd').append( ' > Search at <a href="http://search.yahoo.com/search?p=' + encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>' ); })();

儲存此指令碼，該連結自動顯示在每個 Google 結果頁面。現在已經有很多使用者指令碼存在，讓您可以執行各種修改。在 userscripts.org 上可用找到其中一些優秀的使用者指令碼。

針對 Internet Explorer 也有類似擴充，稱為 IE7Pro，正如其名稱所暗示的，它只能用於 Internet Explorer 版本 7。但它提供了該瀏覽器所缺乏的很多特性，比如增強了的選項卡、滑鼠動作、廣告攔截器以及 “類似 Greasemonkey 的使用者指令碼”。

有了這兩個擴充，就能將小的程式碼片段應用到任何網站。這對於將所需特性添加到您不能訪問其原始碼的網站十分有用，如果想要快速在您自己的網站測試（和展 示）某些新特性，而又不想觸及原始碼，這個功能也很有協助。當然，這僅限於 JavaScript —— 將內容注入實際網站的最終辦法是使用代理，這一主題更加高深，同樣，亦超出了本文的討論範圍。

結束語

本文介紹了處理 Web 頁面、指令碼和應用程式的各種不同方式。您看到了如何使用 Web Developer Toolbar 檢查頁面，如何使用 Firebug 擴充在需要時修改內容。您還對如何使用斷點和對象檢查輕鬆地調試 JavaScript、如何永久地修改內容以提高自身經驗有了大致的瞭解。

無庸質疑，這些工具中的每一個都完全可以用整篇文章甚至一個系列文章加以介紹。但在學習所有與其相關的進階特性和功能之前，最好先開始實際使用和熟悉這些工具 —— 這也是本文所要鼓勵您去做的。

分享這篇文章……   提交到 Digg 發布到 del.icio.us Slashdot 一下！

參考資料

學習

• 您可以參閱本文在 developerWorks 全球網站上的 英文原文 。
• Web Developer for Firefox 擴充會將一個帶各種 Web 開發工具的工具列添加到 Firefox，讓您可以檢查標記和 JavaScript，甚至能夠動態進行修改。
• Firebug 是面向 JavaScript 開發人員的一個功能強大的 Firefox 擴充；可用來在任何網頁即時編輯、調試和監視 CSS、HTML 和 JavaScript。
• Internet Explorer Developer Toolbar 允許在 Internet Explorer 7 內監視 DOM。
• Greasemonkey for Firefox 擴充面向 Firefox，能在頁面載入後，將定製 JavaScript 應用於頁面。可以在 userscripts.org 找到這些定製指令碼存放庫。
• IE7Pro 用十分有用的特性擴充了 Internet Explorer 7，亦允許在頁面載入後執行定製指令碼。還可以找到針對 IE7Pro 使用者指令碼的 ieScripts 指令碼庫。
• jQuery 是一個小型的 JavaScript 庫，讓您可以使用 CSS3 選取器訪問和修改 DOM。developerWorks 文章 使用 jQuery 簡化 Ajax 開發（Jesse Skinner，2007 年 4 月）是有關 jQuery 和 jQuery 擴充的一個很好的介紹性文章。jQuery jQuery Bookmarklet 讓您可以對每個頁面進行 “jQuery 式” 處理。
• developerWorks 文章 真實世界的 Web 2.0: 用 bookmarklets 建立快捷粗略的 Web 應用程式（Uche Ogbuji，2007 年 8 月）提供了 bookmarklet 簡介。
• developerWorks 文章 掌握 Ajax 系列（Chris Laffra，2006 年 5 月）簡單介紹了 AJAX 及相關技術。
• 面向 Firefox 的 Venkman JavaScript Debugger 旨在為 基於 Gecko 的瀏覽器 提供一種功能強大的 JavaScript 調試環境。
• Microsoft Script Debugger 允許在 Internet explorer 內調試指令碼，MSDN IEBlog 的文章 Script Debugging in Internet Explorer 則大致介紹了如何啟用 Internet Explorer 內的指令碼調試。
• 需要在 Windows 環境查看通訊？ Fiddler2 Tool 可充當本地代理並允許觀察和修改所有通訊，Wireshark 可以查看網路上的所有流量，而 Microsoft Network Monitor 則可用來查看網路介面上的所有流量。
• 在 developerWorks Web 開發專區 獲得能增強您技能的資源。

獲得產品和技術

• 下載 IBM 產品的評估版 並開始使用 DB2、Lotus、Rational、Tivoli 和 WebSphere 的應用程式開發工具和中介軟體產品。

討論

• 參與 developerWorks blogs 並加入 developerWorks 社區。

關於作者

		Michael Baierl http://mbaierl.com/ 現在 IBM 擔任企業網站管理員，負責維護 100 個國家門戶網站和幾個後端應用程式。他的工作重點是跨整個 ibm.com 域的 JavaScript 整合、標準化和品質保證。在這之前，他曾經為 IBM Data Studio Administration Console Team Dev 提供過有關 JavaScript 使用的諮詢。他是一名 Zend 認證工程師，並具有為各種生產力工具以及大型應用程式使用 PHP 的經驗。