引言

Google Chrome 是由 Goole 公司開發(fā)的一款網(wǎng)頁瀏覽器，自 2008 年 9 月第一個(gè)測試版本發(fā)布以來，其市場占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成為全球市場占有率第二的瀏覽器。Chrome 的受歡迎程度與其優(yōu)秀的性能與兼容性密不可分，并且越來越多的網(wǎng)絡(luò)應(yīng)用程序都添加了對 Chrome 的支持，也足以體現(xiàn)網(wǎng)絡(luò)應(yīng)用的開發(fā)人員對 Chrome 的認(rèn)可與青睞，而其中最重要的原因之一，莫過于 Chrome 所提供的強(qiáng)大的開發(fā)者工具。Chrome 開發(fā)者工具包含諸多強(qiáng)大的功能模塊，適應(yīng)于多個(gè)不同場合的需要。本文先簡單介紹 Chrome 開發(fā)者工具的各個(gè)模塊及其基本功能，再著重針對網(wǎng)頁腳本調(diào)試，闡述如何巧妙運(yùn)用 Chrome 開發(fā)者工具定位與調(diào)試問題。（本文所選的 Chrome 開發(fā)者工具為 Chrome V35 版本中內(nèi)置，較之前版本可能略有不同，請留意）

回頁首

Chrome 開發(fā)者工具介紹

雖然對于 Chrome 開發(fā)者工具的介紹，Google 官方以及互聯(lián)網(wǎng)中都有眾多文章進(jìn)行闡述，但為了有助于讀者更好地理解本文后面對如何巧妙運(yùn)用開發(fā)者工具定位及調(diào)試腳本的闡述，在此對開發(fā)者工具中的各個(gè)模塊做一個(gè)概要性的介紹。如果對其中某些模塊特別有興趣，請參考文末的鏈接，從中進(jìn)行深入了解。

Chrome V35 版本中的開發(fā)者工具分為 8 個(gè)大模塊，每個(gè)模塊及其主要功能為：

• Element 標(biāo)簽頁： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。
• Network 標(biāo)簽頁：用于查看 HTTP 請求的詳細(xì)信息，如請求頭、響應(yīng)頭及返回內(nèi)容等。
• Source 標(biāo)簽頁：用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件。
• TimeLine 標(biāo)簽頁： 用于查看腳本的執(zhí)行時(shí)間、頁面元素渲染時(shí)間等信息。
• Profiles 標(biāo)簽頁：用于查看 CPU 執(zhí)行時(shí)間與內(nèi)存占用等信息。
• Resource 標(biāo)簽頁：用于查看當(dāng)前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。
• Audits 標(biāo)簽頁：用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等。
• Console 標(biāo)簽頁：用于顯示腳本中所輸出的調(diào)試信息，或運(yùn)行測試腳本等。

后文會(huì)在闡述過程中，會(huì)提及使用 Element 標(biāo)簽頁探測頁面元素并查看該元素的 HTML 內(nèi)容，也會(huì)使用 Source 標(biāo)簽頁與 Console 標(biāo)簽頁調(diào)試腳本及查看調(diào)試信息，并不會(huì)詳細(xì)介紹他們的基本功能，請?jiān)陂喿x時(shí)提前了解以上相關(guān)標(biāo)簽頁的基本功能。

回頁首

使用 Chrome 開發(fā)者工具巧妙定位腳本代碼

目前很多的網(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ū)υ捒颉Ｒ虼?#xff0c;該類網(wǎng)頁應(yīng)用程序的腳本數(shù)量會(huì)非常大，從而使開發(fā)人員在如此之多的腳本中定位某個(gè)問題變得困難起來，但也并非毫無技巧。

合理命名模塊 ID，根據(jù) ID 找到相關(guān)腳本文件。

單頁面的網(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ā)者工具的"元素"模塊中的元素探測功能查找 HTML 時(shí)，可以很直觀地看見每一個(gè) div 對應(yīng)的 JS 文件。因此，當(dāng)某一個(gè) div 出現(xiàn)問題時(shí)，對其 HTML 進(jìn)行探測后，便可根據(jù)其中的 id 定位到相應(yīng)的腳本文件，從而使問題調(diào)試的范圍大大縮小。以下通過實(shí)際項(xiàng)目中的例子加以說明。

清單 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,……//省略之后不相關(guān)的方法和屬性…… });

在清單 1 中給出的是使用 Dojo 創(chuàng)建自定義 widget 并將該 widget id 引入其模板 HTML 中的方式。自定義的 widget 在繼承了 dojox.dtl._Templated 之后，Dojo 有內(nèi)部機(jī)制可將該 widget 聲明的名稱作為 id 自動(dòng)加到其 HTML 模板中。因此開發(fā)人員只要保證該 widget 聲明的名稱與其所儲(chǔ)存的文件名對應(yīng)即可。清單 1 中的 id 與儲(chǔ)存該腳本的文件名均為"exc.fe.bijits.FeLogon.FeLogonLog-

-onPanel"。

在此前提下，打開瀏覽器運(yùn)行網(wǎng)頁加載該 widget 后，使用 Chrome 開發(fā)者工具的網(wǎng)頁元素探測功能找到該 widget，便可看見其 id，即相應(yīng)的腳本文件，如圖 1 所示。如若該 widget 中的行為出現(xiàn)異常，例如 user id 不能進(jìn)行校驗(yàn)，便可打開其相關(guān)的腳本文件進(jìn)行調(diào)試。

圖 1. 查看 widget 在 HTML 模板中的 id

開啟運(yùn)行時(shí)錯(cuò)誤自動(dòng)暫停功能，準(zhǔn)確定位出錯(cuò)腳本位置

在 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)生的原因。

圖 2. Source 面板中的自動(dòng)暫停按鈕

自動(dòng)暫停按鈕的下方有一個(gè)選項(xiàng)，Pause On Caught Exceptions，如果勾選上，則即使所發(fā)生運(yùn)行時(shí)異常的代碼在 try/catch 范圍內(nèi)，Chrome 開發(fā)者工具也能夠在錯(cuò)誤代碼處停住。

合理添加調(diào)試日志，通過 Console 標(biāo)簽頁定位

在進(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 所示。

清單 2. Dojo 中自定義 widget 引入 id 的聲明方式

_containerSelect : function( /*ContentPane*/ cp ) {var F = this.declaredClass + "._containerSelect(): ";console.debug(F,"Starting: ", cp);//當(dāng)方法被執(zhí)行時(shí)，在控制臺(tái)輸出相關(guān)日志dojo.forEach( this.children, function(child) {if ( cp.id === child.targetId ) {this.showChild( child.id );//-- Save requested modulethis._history.push( child.id );//kakif(this.globalArgs._showModuleTopic)dojo.publish(this.globalArgs._showModuleTopic, [ child.id,"open" ]);}}, this);console.debug(F,"End");//當(dāng)方法執(zhí)行結(jié)束后，在控制臺(tái)輸出相關(guān)日志},

圖 3. Console 面板中的日志輸出

回頁首

使用 Chrome 開發(fā)者工具調(diào)試 JavaScript 的技巧與心得

上文介紹了 3 種定位相關(guān)腳本的方法，在定位腳本之后，通常會(huì)對腳本中的部分代碼進(jìn)行調(diào)試，本章主要詳細(xì)講解高效快捷地利用 Chrome 開發(fā)者工具進(jìn)行 JavaScript 腳本調(diào)試的幾種技巧與心得。

設(shè)置條件斷點(diǎn)

與 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è)對話框用于輸入具體的條件。合理運(yùn)用好條件斷點(diǎn)能夠提高調(diào)試的效率與準(zhǔn)確性，使開發(fā)人員能更專注于在期望的場景下進(jìn)行調(diào)試。

圖 4. Source 面板中添加條件斷點(diǎn)

修改 JavaScript 文件中的代碼

這是 Chrome 開發(fā)者工具提供的一種非常實(shí)用的功能，即使開發(fā)人員可直接對開發(fā)者工具的 Source 標(biāo)簽頁中的代碼進(jìn)行修改，并將其保存，使瀏覽器在下次執(zhí)行該段腳本時(shí)，直接加載最新修改的版本。目前的 Firebug 及 IE 自帶的開發(fā)者工具都不支持對腳本的直接修改，導(dǎo)致在 Firefox 或 IE 中調(diào)試腳本時(shí)，如果需要對代碼進(jìn)行修改，需要先去修改腳本源文件，再同步至應(yīng)用服務(wù)器，再清理瀏覽器緩存，最終再次打開應(yīng)用程序時(shí)，才會(huì)看到代碼修改后的效果。可見 Chrome 開發(fā)者工具提供的這一功能，大大提供了開發(fā)者調(diào)試腳本的效果。

需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會(huì)影響到腳本的源文件。當(dāng)開發(fā)人員決定采用修改之后的腳本時(shí)，需要將其復(fù)制到腳本的源文件中。

使用控制臺(tái)打印變量值或方法的返回結(jié)果

當(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é)果。

結(jié)合 Element 標(biāo)簽頁調(diào)試 JavaScript 中對 CSS 的控制

在網(wǎng)頁開發(fā)過程中，經(jīng)常需要在腳本中控制不同條件下頁面的樣式展示，例如要求某一個(gè)按鈕的顏色在用戶停留十秒鐘之后由白色變成灰色。此時(shí)我們便需要在腳本中通過具體的數(shù)值指定這個(gè)"灰色"該如何表示，一般情況下我們需要查找相關(guān)資料或使用其他工具才能得到期望的"灰色"所對應(yīng)的 RGB 數(shù)值或十六進(jìn)制數(shù)值。然而在 Chrome 開發(fā)者工具的 Element 標(biāo)簽頁中，其實(shí)已經(jīng)提供了包括該功能在內(nèi)的一系列對樣式進(jìn)行實(shí)時(shí)修改的功能，并且在修改之后能夠立即從頁面中看到變化。

圖 4 給出的是 Element 標(biāo)簽頁的右半部分，當(dāng)要對某個(gè)樣式類中的顏色進(jìn)行修改時(shí)，它提供出一個(gè)非常直觀的圖譜供選擇，并在下方將其十六進(jìn)制代碼顯示出來。開發(fā)人員可直接在此進(jìn)行顏色選擇，確定顏色后，在 JavaScript 代碼中引用其十六進(jìn)制數(shù)值即可。

圖 5. Element 面板中的顏色樣式編輯

回頁首

結(jié)語

Chrome 開發(fā)者工具的功能豐富而強(qiáng)大，本文著眼于對 JavaScript 的定位與調(diào)試，介紹了其中的技巧與心得。相對于 Firebug 與 IE 開發(fā)者工具而言，Chrome 所提供的一些獨(dú)特功能如對腳本源碼的直接修改，極大方便了開發(fā)者對腳本的開發(fā)與調(diào)試。隨著 Chrome 新版本的推出，相信其開發(fā)者工具的功能也會(huì)日益增強(qiáng)，我們可以通過閱讀其官方更新說明，了解到新功能，借助 Chrome 開發(fā)者工具的支持，提高網(wǎng)頁應(yīng)用程序開發(fā)與調(diào)試的效率。

參考資料

學(xué)習(xí)

• 查看?Chrome?瀏覽器官網(wǎng)，了解最新版本 Chrome 中開發(fā)者工具的更新內(nèi)容。
• 關(guān)注?Chrome?官方blog，了解 Chrome 及開發(fā)者工具的最新發(fā)展動(dòng)態(tài)。
• 閱讀文章?Google Chrome?瀏覽器 開發(fā)者工具 使用教程，了解更多 Chrome 開發(fā)者工具各模塊之間的功能。
• 閱讀文章?Chrome developer tool?介紹，進(jìn)一步了解開發(fā)者工具各模塊之間的具體功能與用法。
• developerWorks Web development 專區(qū)：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開發(fā)方面的技能。
• developerWorks Ajax 資源中心：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
• 查看?HTML5 專題，了解更多和 HTML5 相關(guān)的知識(shí)和動(dòng)向。

from:?https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的使用 Chrome 开发者工具进行 JavaScript 问题定位与调试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。