Google Chrome 是由 Goole 公司開發(fā)的一款網(wǎng)頁瀏覽器，自 2008 年 9 月第一個(gè)測(cè)試版本發(fā)布以來，其市場(chǎng)占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成為全球市場(chǎng)占有率第二的瀏覽器。Chrome 的受歡迎程度與其優(yōu)秀的性能與兼容性密不可分，并且越來越多的網(wǎng)絡(luò)應(yīng)用程序都添加了對(duì) Chrome 的支持，也足以體現(xiàn)網(wǎng)絡(luò)應(yīng)用的開發(fā)人員對(duì) Chrome 的認(rèn)可與青睞，而其中最重要的原因之一，莫過于 Chrome 所提供的強(qiáng)大的開發(fā)者工具。Chrome 開發(fā)者工具包含諸多強(qiáng)大的功能模塊，適應(yīng)于多個(gè)不同場(chǎng)合的需要。本文先簡單介紹 Chrome 開發(fā)者工具的各個(gè)模塊及其基本功能，再著重針對(duì)網(wǎng)頁腳本調(diào)試，闡述如何巧妙運(yùn)用 Chrome 開發(fā)者工具定位與調(diào)試問題。（本文所選的 Chrome 開發(fā)者工具為 Chrome V35 版本中內(nèi)置，較之前版本可能略有不同，請(qǐng)留意）
雖然對(duì)于 Chrome 開發(fā)者工具的介紹，Google 官方以及互聯(lián)網(wǎng)中都有眾多文章進(jìn)行闡述，但為了有助于讀者更好地理解本文后面對(duì)如何巧妙運(yùn)用開發(fā)者工具定位及調(diào)試腳本的闡述，在此對(duì)開發(fā)者工具中的各個(gè)模塊做一個(gè)概要性的介紹。如果對(duì)其中某些模塊特別有興趣，請(qǐng)參考文末的鏈接，從中進(jìn)行深入了解。
Chrome V35 版本中的開發(fā)者工具分為 8 個(gè)大模塊，每個(gè)模塊及其主要功能為：
后文會(huì)在闡述過程中，會(huì)提及使用 Element 標(biāo)簽頁探測(cè)頁面元素并查看該元素的 HTML 內(nèi)容，也會(huì)使用 Source 標(biāo)簽頁與 Console 標(biāo)簽頁調(diào)試腳本及查看調(diào)試信息，并不會(huì)詳細(xì)介紹他們的基本功能，請(qǐng)?jiān)陂喿x時(shí)提前了解以上相關(guān)標(biāo)簽頁的基本功能。
目前很多的網(wǎng)頁應(yīng)用程序都會(huì)使用各種諸如 JavaScript 之類的腳本語言，來增強(qiáng)事件處理、頁面展現(xiàn)或是樣式控制等方面的功能。很多網(wǎng)站或網(wǎng)絡(luò)應(yīng)用系統(tǒng)都已做成單頁面模式，該頁面只負(fù)責(zé)加載相關(guān)的腳本與樣式，這些腳本與樣式來負(fù)責(zé)動(dòng)態(tài)生成更多的子頁面或?qū)υ捒?。因此，該類網(wǎng)頁應(yīng)用程序的腳本數(shù)量會(huì)非常大，從而使開發(fā)人員在如此之多的腳本中定位某個(gè)問題變得困難起來，但也并非毫無技巧。
單頁面的網(wǎng)絡(luò)應(yīng)用程序一般會(huì)引入復(fù)雜的 JavaScript 框架，如 JQuery, Dojo 或 ExtJS 等。這些框架都支持聲明自定義的網(wǎng)頁小組件，如 Dojo 中的 widget。一般而言，每一個(gè) widget 會(huì)被單獨(dú)寫在一個(gè) JS 文件中。因此，在定義該組件時(shí)，可以將儲(chǔ)存它的 JS 文件名做為其 id 成員屬性的一部分（例如前綴），并在描述該組件的 HTML 模板中，將 id 的值加入到 HTML 標(biāo)簽的屬性中。當(dāng)應(yīng)用程序在 Chrome 瀏覽器中運(yùn)行時(shí)，在使用 Chrome 開發(fā)者工具的'元素'模塊中的元素探測(cè)功能查找 HTML 時(shí)，可以很直觀地看見每一個(gè) div 對(duì)應(yīng)的 JS 文件。因此，當(dāng)某一個(gè) div 出現(xiàn)問題時(shí)，對(duì)其 HTML 進(jìn)行探測(cè)后，便可根據(jù)其中的 id 定位到相應(yīng)的腳本文件，從而使問題調(diào)試的范圍大大縮小。以下通過實(shí)際項(xiàng)目中的例子加以說明。
在清單 1 中給出的是使用 Dojo 創(chuàng)建自定義 widget 并將該 widget id 引入其模板 HTML 中的方式。自定義的 widget 在繼承了 dojox.dtl._Templated 之后，Dojo 有內(nèi)部機(jī)制可將該 widget 聲明的名稱作為 id 自動(dòng)加到其 HTML 模板中。因此開發(fā)人員只要保證該 widget 聲明的名稱與其所儲(chǔ)存的文件名對(duì)應(yīng)即可。清單 1 中的 id 與儲(chǔ)存該腳本的文件名均為'exc.fe.bijits.FeLogon.FeLogonLog-
-onPanel'。
在此前提下，打開瀏覽器運(yùn)行網(wǎng)頁加載該 widget 后，使用 Chrome 開發(fā)者工具的網(wǎng)頁元素探測(cè)功能找到該 widget，便可看見其 id，即相應(yīng)的腳本文件，如圖 1 所示。如若該 widget 中的行為出現(xiàn)異常，例如 user id 不能進(jìn)行校驗(yàn)，便可打開其相關(guān)的腳本文件進(jìn)行調(diào)試。
在 Chrome 開發(fā)者工具中，可以開戶運(yùn)行時(shí)錯(cuò)誤自動(dòng)暫停這一功能（如圖 2 所示），從而使開發(fā)者工具能在發(fā)現(xiàn)運(yùn)行時(shí)腳本異常時(shí)，在異常腳本處暫停運(yùn)行，跳轉(zhuǎn)至調(diào)試頁面，供開發(fā)人員進(jìn)一步查找該運(yùn)行時(shí)異常產(chǎn)生的原因。
自動(dòng)暫停按鈕的下方有一個(gè)選項(xiàng)，Pause On Caught Exceptions，如果勾選上，則即使所發(fā)生運(yùn)行時(shí)異常的代碼在 try/catch 范圍內(nèi)，Chrome 開發(fā)者工具也能夠在錯(cuò)誤代碼處停住。
在進(jìn)行腳本開發(fā)過程中，在重要的方法中添加必要的調(diào)試日志輸出語句，可以方便開發(fā)人員進(jìn)行問題定位與調(diào)試。清單 2 中的 JavaScript 腳本方法中，在其開始和結(jié)束處添加了 debug 級(jí)別的日志輸出，從而使該方法在被執(zhí)行時(shí)，可在 Console 標(biāo)簽頁找到相關(guān)日志，并且能通過點(diǎn)擊該日志的末端文件鏈接直接跳轉(zhuǎn)到 Source 標(biāo)簽頁的腳本源文件中，極大方便了相關(guān)代碼的定位，如圖 3 所示。
上文介紹了 3 種定位相關(guān)腳本的方法，在定位腳本之后，通常會(huì)對(duì)腳本中的部分代碼進(jìn)行調(diào)試，本章主要詳細(xì)講解高效快捷地利用 Chrome 開發(fā)者工具進(jìn)行 JavaScript 腳本調(diào)試的幾種技巧與心得。
與 Java 調(diào)試類似，Chrome 開發(fā)者工具提供了斷點(diǎn)設(shè)置、刪除與斷點(diǎn)存儲(chǔ)等基本功能。同時(shí)，開發(fā)者工具也提供了設(shè)置條件斷點(diǎn)的功能，使開發(fā)者可以控制該斷點(diǎn)只有在滿足某一條件時(shí)才會(huì)被觸發(fā)。
條件斷點(diǎn)的設(shè)置如圖 4 所示，在所需要設(shè)置斷點(diǎn)的行最前端的行號(hào)處點(diǎn)擊右鍵，選擇添加條件斷點(diǎn)后，會(huì)彈出一個(gè)對(duì)話框用于輸入具體的條件。合理運(yùn)用好條件斷點(diǎn)能夠提高調(diào)試的效率與準(zhǔn)確性，使開發(fā)人員能更專注于在期望的場(chǎng)景下進(jìn)行調(diào)試。
這是 Chrome 開發(fā)者工具提供的一種非常實(shí)用的功能，即使開發(fā)人員可直接對(duì)開發(fā)者工具的 Source 標(biāo)簽頁中的代碼進(jìn)行修改，并將其保存，使瀏覽器在下次執(zhí)行該段腳本時(shí)，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發(fā)者工具都不支持對(duì)腳本的直接修改，導(dǎo)致在 Firefox 或 IE 中調(diào)試腳本時(shí)，如果需要對(duì)代碼進(jìn)行修改，需要先去修改腳本源文件，再同步至應(yīng)用服務(wù)器，再清理瀏覽器緩存，最終再次打開應(yīng)用程序時(shí)，才會(huì)看到代碼修改后的效果?？梢?Chrome 開發(fā)者工具提供的這一功能，大大提供了開發(fā)者調(diào)試腳本的效果。
需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會(huì)影響到腳本的源文件。當(dāng)開發(fā)人員決定采用修改之后的腳本時(shí)，需要將其復(fù)制到腳本的源文件中。
當(dāng)斷點(diǎn)被觸發(fā)進(jìn)入到調(diào)試模式時(shí)，我們可以將當(dāng)前任意存在的變量或方法輸入到控制臺(tái)中，按下回車后，控制臺(tái)便會(huì)返回相關(guān)的結(jié)果。該功能可使開發(fā)人員方便了解程序運(yùn)行至斷點(diǎn)處時(shí)各個(gè)所需要變量或方法的返回值。
需要注意的是，當(dāng)在控制臺(tái)中輸入的方法名字不帶括號(hào)時(shí)，控制臺(tái)輸出的是該方法所包含的代碼信息，而并不是運(yùn)行結(jié)果。
在網(wǎng)頁開發(fā)過程中，經(jīng)常需要在腳本中控制不同條件下頁面的樣式展示，例如要求某一個(gè)按鈕的顏色在用戶停留十秒鐘之后由白色變成灰色。此時(shí)我們便需要在腳本中通過具體的數(shù)值指定這個(gè)'灰色'該如何表示，一般情況下我們需要查找相關(guān)資料或使用其他工具才能得到期望的'灰色'所對(duì)應(yīng)的 RGB 數(shù)值或十六進(jìn)制數(shù)值。然而在 Chrome 開發(fā)者工具的 Element 標(biāo)簽頁中，其實(shí)已經(jīng)提供了包括該功能在內(nèi)的一系列對(duì)樣式進(jìn)行實(shí)時(shí)修改的功能，并且在修改之后能夠立即從頁面中看到變化。
圖 4 給出的是 Element 標(biāo)簽頁的右半部分，當(dāng)要對(duì)某個(gè)樣式類中的顏色進(jìn)行修改時(shí)，它提供出一個(gè)非常直觀的圖譜供選擇，并在下方將其十六進(jìn)制代碼顯示出來。開發(fā)人員可直接在此進(jìn)行顏色選擇，確定顏色后，在 JavaScript 代碼中引用其十六進(jìn)制數(shù)值即可。
Chrome 開發(fā)者工具的功能豐富而強(qiáng)大，本文著眼于對(duì) JavaScript 的定位與調(diào)試，介紹了其中的技巧與心得。相對(duì)于 Firebug 與 IE 開發(fā)者工具而言，Chrome 所提供的一些獨(dú)特功能如對(duì)腳本源碼的直接修改，極大方便了開發(fā)者對(duì)腳本的開發(fā)與調(diào)試。隨著 Chrome 新版本的推出，相信其開發(fā)者工具的功能也會(huì)日益增強(qiáng)，我們可以通過閱讀其官方更新說明，了解到新功能，借助 Chrome 開發(fā)者工具的支持，提高網(wǎng)頁應(yīng)用程序開發(fā)與調(diào)試的效率。
聯(lián)系客服
