> Google Chrome 是由 Goole 公司開發的一款網頁瀏覽器，自 2008 年 9 月第一個測試版本發布以來，其市場占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成為全球市場占有率第二的瀏覽器。Chrome 的受歡迎程度與其優秀的性能與兼容性密不可分，并且越來越多的網絡應用程序都添加了對 Chrome 的支持，也足以體現網絡應用的開發人員對 Chrome 的認可與青睞，而其中最重要的原因之一，莫過于 Chrome 所提供的強大的開發者工具。Chrome 開發者工具包含諸多強大的功能模塊，適應于多個不同場合的需要。本文先簡單介紹 Chrome 開發者工具的各個模塊及其基本功能，再著重針對網頁腳本調試，闡述如何巧妙運用 Chrome 開發者工具定位與調試問題。 ## Chrome 開發者工具介紹 雖然對于 Chrome 開發者工具的介紹，Google 官方以及互聯網中都有眾多文章進行闡述，但為了有助于讀者更好地理解本文后面對如何巧妙運用開發者工具定位及調試腳本的闡述，在此對開發者工具中的各個模塊做一個概要性的介紹。如果對其中某些模塊特別有興趣，請參考文末的鏈接，從中進行深入了解。 Chrome版本中的開發者工具分為 8 個大模塊，每個模塊及其主要功能為： * Element 標簽頁： 用于查看和編輯當前頁面中的 HTML 和 CSS 元素。 * Network 標簽頁：用于查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。 * Source 標簽頁：用于查看和調試當前頁面所加載的腳本的源文件。 * TimeLine 標簽頁： 用于查看腳本的執行時間、頁面元素渲染時間等信息。 * Profiles 標簽頁：用于查看 CPU 執行時間與內存占用等信息。 * Resource 標簽頁：用于查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。 * Audits 標簽頁：用于優化前端頁面，加速網頁加載速度等。 * Console 標簽頁：用于顯示腳本中所輸出的調試信息，或運行測試腳本等。 后文會在闡述過程中，會提及使用 Element 標簽頁探測頁面元素并查看該元素的 HTML 內容，也會使用 Source 標簽頁與 Console 標簽頁調試腳本及查看調試信息，并不會詳細介紹他們的基本功能，請在閱讀時提前了解以上相關標簽頁的基本功能。 ### 使用 Chrome 開發者工具巧妙定位腳本代碼 目前很多的網頁應用程序都會使用各種諸如 JavaScript 之類的腳本語言，來增強事件處理、頁面展現或是樣式控制等方面的功能。很多網站或網絡應用系統都已做成單頁面模式，該頁面只負責加載相關的腳本與樣式，這些腳本與樣式來負責動態生成更多的子頁面或對話框。因此，該類網頁應用程序的腳本數量會非常大，從而使開發人員在如此之多的腳本中定位某個問題變得困難起來，但也并非毫無技巧。 ## 合理命名模塊 ID，根據 ID 找到相關腳本文件。 單頁面的網絡應用程序一般會引入復雜的 JavaScript 框架，如 JQuery, Dojo 或 ExtJS 等。這些框架都支持聲明自定義的網頁小組件，如 Dojo 中的 widget。一般而言，每一個 widget 會被單獨寫在一個 JS 文件中。因此，在定義該組件時，可以將儲存它的 JS 文件名做為其 id 成員屬性的一部分（例如前綴），并在描述該組件的 HTML 模板中，將 id 的值加入到 HTML 標簽的屬性中。當應用程序在 Chrome 瀏覽器中運行時，在使用 Chrome 開發者工具的"元素"模塊中的元素探測功能查找 HTML 時，可以很直觀地看見每一個 div 對應的 JS 文件。因此，當某一個 div 出現問題時，對其 HTML 進行探測后，便可根據其中的 id 定位到相應的腳本文件，從而使問題調試的范圍大大縮小。以下通過實際項目中的例子加以說明。 **清單 1. Dojo 中自定義 widget 引入 id 的聲明方式** ~~~ dojo.declare("exc.fe.bijits.FeLogon.FeLogonLogonPanel",[exc.kc._Bijit, dojox.dtl._Templated,], { templatePath: dojo.moduleUrl('exc.fe.bijits.FeLogon', "FeLogonLogonPanel.html"), select : null, SESSION_ID_OFFSET : 0, sessionid : null, launchType: "Standard Login", langcnt: 0, currentLang:null, ……//省略之后不相關的方法和屬性 …… }); ~~~ 在清單 1 中給出的是使用 Dojo 創建自定義 widget 并將該 widget id 引入其模板 HTML 中的方式。自定義的 widget 在繼承了 dojox.dtl._Templated 之后，Dojo 有內部機制可將該 widget 聲明的名稱作為 id 自動加到其 HTML 模板中。因此開發人員只要保證該 widget 聲明的名稱與其所儲存的文件名對應即可。清單 1 中的 id 與儲存該腳本的文件名均為"exc.fe.bijits.FeLogon.FeLogonLog- -onPanel"。 在此前提下，打開瀏覽器運行網頁加載該 widget 后，使用 Chrome 開發者工具的網頁元素探測功能找到該 widget，便可看見其 id，即相應的腳本文件，如圖 1 所示。如若該 widget 中的行為出現異常，例如 user id 不能進行校驗，便可打開其相關的腳本文件進行調試。 **圖 1. 查看 widget 在 HTML 模板中的 id**  **開啟運行時錯誤自動暫停功能，準確定位出錯腳本位置** 在 Chrome 開發者工具中，可以開戶運行時錯誤自動暫停這一功能（如圖 2 所示），從而使開發者工具能在發現運行時腳本異常時，在異常腳本處暫停運行，跳轉至調試頁面，供開發人員進一步查找該運行時異常產生的原因。 **圖 2. Source 面板中的自動暫停按鈕**  自動暫停按鈕的下方有一個選項，Pause On Caught Exceptions，如果勾選上，則即使所發生運行時異常的代碼在 try/catch 范圍內，Chrome 開發者工具也能夠在錯誤代碼處停住。 **合理添加調試日志，通過 Console 標簽頁定位** 在進行腳本開發過程中，在重要的方法中添加必要的調試日志輸出語句，可以方便開發人員進行問題定位與調試。清單 2 中的 JavaScript 腳本方法中，在其開始和結束處添加了 debug 級別的日志輸出，從而使該方法在被執行時，可在 Console 標簽頁找到相關日志，并且能通過點擊該日志的末端文件鏈接直接跳轉到 Source 標簽頁的腳本源文件中，極大方便了相關代碼的定位，如圖 3 所示。 **清單 2. Dojo 中自定義 widget 引入 id 的聲明方式** ~~~ _containerSelect : function( /*ContentPane*/ cp ) { var F = this.declaredClass + "._containerSelect(): "; console.debug(F,"Starting: ", cp);//當方法被執行時，在控制臺輸出相關日志 dojo.forEach( this.children, function(child) { if ( cp.id === child.targetId ) { this.showChild( child.id ); //-- Save requested module this._history.push( child.id ); //kak if(this.globalArgs._showModuleTopic) dojo.publish(this.globalArgs._showModuleTopic, [ child.id,"open" ]); } }, this); console.debug(F,"End");//當方法執行結束后，在控制臺輸出相關日志 }, ~~~ **圖 3. Console 面板中的日志輸出**  ## 使用 Chrome 開發者工具調試 JavaScript 的技巧與心得 上文介紹了 3 種定位相關腳本的方法，在定位腳本之后，通常會對腳本中的部分代碼進行調試，本章主要詳細講解高效快捷地利用 Chrome 開發者工具進行 JavaScript 腳本調試的幾種技巧與心得。 ### 設置條件斷點 與 Java 調試類似，Chrome 開發者工具提供了斷點設置、刪除與斷點存儲等基本功能。同時，開發者工具也提供了設置條件斷點的功能，使開發者可以控制該斷點只有在滿足某一條件時才會被觸發。 條件斷點的設置如圖 4 所示，在所需要設置斷點的行最前端的行號處點擊右鍵，選擇添加條件斷點后，會彈出一個對話框用于輸入具體的條件。合理運用好條件斷點能夠提高調試的效率與準確性，使開發人員能更專注于在期望的場景下進行調試。 **圖 4. Source 面板中添加條件斷點**  ### 修改 JavaScript 文件中的代碼 這是 Chrome 開發者工具提供的一種非常實用的功能，即使開發人員可直接對開發者工具的 Source 標簽頁中的代碼進行修改，并將其保存，使瀏覽器在下次執行該段腳本時，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發者工具都不支持對腳本的直接修改，導致在 Firefox 或 IE 中調試腳本時，如果需要對代碼進行修改，需要先去修改腳本源文件，再同步至應用服務器，再清理瀏覽器緩存，最終再次打開應用程序時，才會看到代碼修改后的效果。可見 Chrome 開發者工具提供的這一功能，大大提供了開發者調試腳本的效果。 需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會影響到腳本的源文件。當開發人員決定采用修改之后的腳本時，需要將其復制到腳本的源文件中。 ### 使用控制臺打印變量值或方法的返回結果 當斷點被觸發進入到調試模式時，我們可以將當前任意存在的變量或方法輸入到控制臺中，按下回車后，控制臺便會返回相關的結果。該功能可使開發人員方便了解程序運行至斷點處時各個所需要變量或方法的返回值。 需要注意的是，當在控制臺中輸入的方法名字不帶括號時，控制臺輸出的是該方法所包含的代碼信息，而并不是運行結果。 ## 結合 Element 標簽頁調試 JavaScript 中對 CSS 的控制 在網頁開發過程中，經常需要在腳本中控制不同條件下頁面的樣式展示，例如要求某一個按鈕的顏色在用戶停留十秒鐘之后由白色變成灰色。此時我們便需要在腳本中通過具體的數值指定這個"灰色"該如何表示，一般情況下我們需要查找相關資料或使用其他工具才能得到期望的"灰色"所對應的 RGB 數值或十六進制數值。然而在 Chrome 開發者工具的 Element 標簽頁中，其實已經提供了包括該功能在內的一系列對樣式進行實時修改的功能，并且在修改之后能夠立即從頁面中看到變化。 圖 4 給出的是 Element 標簽頁的右半部分，當要對某個樣式類中的顏色進行修改時，它提供出一個非常直觀的圖譜供選擇，并在下方將其十六進制代碼顯示出來。開發人員可直接在此進行顏色選擇，確定顏色后，在 JavaScript 代碼中引用其十六進制數值即可。 **圖 5. Element 面板中的顏色樣式編輯**  ## 結語 Chrome 開發者工具的功能豐富而強大，本文著眼于對 JavaScript 的定位與調試，介紹了其中的技巧與心得。相對于 Firebug 與 IE 開發者工具而言，Chrome 所提供的一些獨特功能如對腳本源碼的直接修改，極大方便了開發者對腳本的開發與調試。隨著 Chrome 新版本的推出，相信其開發者工具的功能也會日益增強，我們可以通過閱讀其官方更新說明，了解到新功能，借助 Chrome 開發者工具的支持，提高網頁應用程序開發與調試的效率。 ## 參考資料 學習 查看 Chrome 瀏覽器官網，了解最新版本 Chrome 中開發者工具的更新內容。 關注 Chrome 官方blog，了解 Chrome 及開發者工具的最新發展動態。 閱讀文章 Google Chrome 瀏覽器 開發者工具 使用教程，了解更多 Chrome 開發者工具各模塊之間的功能。 閱讀文章 Chrome developer tool 介紹，進一步了解開發者工具各模塊之間的具體功能與用法。 developerWorks Web development 專區：通過專門關于 Web 技術的文章和教程，擴展您在網站開發方面的技能。 developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。 查看 HTML5 專題，了解更多和 HTML5 相關的知識和動向。