GoogleChrome開(kāi)發(fā)人員工具詳解

1、.Google Chrome 瀏覽器開(kāi)發(fā)人員工具，讓網(wǎng)頁(yè)開(kāi)發(fā)變得更輕松無(wú)論是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自帶的 Developer Tools，還是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他們的宗旨只有一個(gè)幫助程序員方便、更高效地進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)。作為瀏覽器中生力軍，Google Chrome 瀏覽器 (4.0及以上版本) 也自帶了豐富的開(kāi)發(fā)人員工具，讓您可以隨時(shí)隨地對(duì)任何網(wǎng)頁(yè)的 CSS、 HTML 和 JavaScript

2、進(jìn)行實(shí)時(shí)編輯、調(diào)試以及監(jiān)控。Google Chrome 瀏覽器開(kāi)發(fā)人員工具不僅僅能幫助您診斷、修復(fù)在網(wǎng)頁(yè)加載、腳本執(zhí)行以及頁(yè)面呈現(xiàn)中出現(xiàn)的問(wèn)題，還可以幫助您最大限度地了解您的網(wǎng)頁(yè)或網(wǎng)絡(luò)應(yīng)用程序?qū)PU以及內(nèi)存的使用情況。本篇教程將從以下幾部分系統(tǒng)地講解如何使用 Google Chrome 瀏覽器開(kāi)發(fā)人員工具來(lái)幫助您的開(kāi)發(fā)： · 準(zhǔn)備工作 · 如何使用元素 (Elements) 面板 · 如何使用資源 (Resources) 面板 · 如何使用腳本 (Scripts) 面板 · 如何使用時(shí)間軸 (Timeline) 面板 · 如何使用剖

3、析 (Profiles) 面板 · 如何使用存儲(chǔ) (Storage) 面板 · 如何使用審計(jì) (Audits) 面板 · 如何使用 JavaScript 控制臺(tái) (Console) 準(zhǔn)備工作要開(kāi)始使用開(kāi)發(fā)人員工具，請(qǐng)先下載 Google Chrome 瀏覽器。（如果您想試用最新版本的的開(kāi)發(fā)人員工具，可以下載開(kāi)發(fā)版或測(cè)試版（英文網(wǎng)頁(yè)）Google Chrome 瀏覽器。）在 Google Chrome 瀏覽器安裝完成后，您可以打開(kāi)自己感興趣的網(wǎng)頁(yè)或網(wǎng)絡(luò)應(yīng)用程序，然后通過(guò)下面任何一種方式進(jìn)入開(kāi)發(fā)人員工具： · 點(diǎn)擊位于瀏覽器用戶(hù)界面右上角的“頁(yè)面”下拉菜單

4、，然后選擇“開(kāi)發(fā)人員”“開(kāi)發(fā)人員工具”。 · 右鍵點(diǎn)擊網(wǎng)頁(yè)上的任一元素，在彈出菜單中選擇“審查元素”。 · 在 Windows 或 Linux 操作系統(tǒng)上，使用 Ctrl+Shift+I 快捷鍵打開(kāi)開(kāi)發(fā)人員工具（或使用 Ctrl+Shift+J 直接進(jìn)入 JavaScript 控制臺(tái)）。 · 在 Mac 上，使用 Command+Option+I 快捷鍵打開(kāi)開(kāi)發(fā)人員工具（或使用 Command+Option+J 直接進(jìn)入 JavaScript 控制臺(tái)）。 現(xiàn)在您應(yīng)該已經(jīng)看到開(kāi)發(fā)人員工具的窗口了吧？在窗口的最上方的工具欄里排列著 8 個(gè)圖標(biāo)，分別對(duì)應(yīng)不同的功能，每一

5、個(gè)圖標(biāo)點(diǎn)擊后都會(huì)打開(kāi)相應(yīng)的調(diào)試面板，幫助您獲取各種不同的信息，如 DOM 樹(shù)、資源占用情況、頁(yè)面相關(guān)的腳本等。通過(guò) Ctrl+ 和 Ctrl+ 鍵，可以在這些項(xiàng)之間進(jìn)行切換。工具欄最右方還提供了一個(gè)搜索框，方便在當(dāng)前面板中進(jìn)行搜索。  工具窗口下部的按鈕可以讓調(diào)試窗口?？康街鞔翱趦?nèi)，切換 JavaScript 控制臺(tái)狀態(tài)，以及其它一些功能。當(dāng)然您也可以使用 Esc 鍵來(lái)更快地切換 JavaScript 控制臺(tái)狀態(tài)。直接點(diǎn)擊控制臺(tái)圖標(biāo)會(huì)使控制臺(tái)調(diào)試界面會(huì)占據(jù)了整個(gè)開(kāi)發(fā)工具窗口。窗口右下角顯示的是錯(cuò)誤和警告計(jì)數(shù)，點(diǎn)擊它們也會(huì)打開(kāi)控制臺(tái)。 接下來(lái)的單元，讓我們一起來(lái)一一分解這些圖

6、標(biāo)所對(duì)應(yīng)面板具有的強(qiáng)大功能吧！ 元素（Elements）面板在元素（Elements）面板中，可以看到整個(gè)頁(yè)面的 DOM 樹(shù)結(jié)構(gòu)和每個(gè)元素的所有屬性，同時(shí)也可以實(shí)時(shí)地修改這些元素及其屬性，并可以實(shí)時(shí)看到修改后的效果。我們這里以 Google 簡(jiǎn)體中文首頁(yè)為例，鼠標(biāo)右鍵單擊“ Google 搜索” 按鈕，選擇“審查元素”，您會(huì)看到如下的窗口界面（注：此處使用的內(nèi)嵌工具窗口模式，如您的工具窗口為獨(dú)立窗口模式，可通過(guò)點(diǎn)擊窗口左下方的“停靠” 圖標(biāo) 將其變?yōu)閮?nèi)嵌模式）： 在工具窗口右側(cè)，顯示的是被選元素的樣式信息，如有興趣，可以嘗試通過(guò)雙擊現(xiàn)有屬性來(lái)修改該元素的 style 屬性或應(yīng)用的某個(gè)

7、選擇器中的屬性值，也可以通過(guò)取消勾選的方式去掉一些屬性，同時(shí)觀察頁(yè)面的實(shí)時(shí)變化。那怎樣給現(xiàn)有的元素或者選擇器增加一個(gè)屬性值呢？不用著急，鼠標(biāo)雙擊您所想修改的元素的 element.style 部分或者它應(yīng)用的選擇器的空白部分（如下圖所示），即可添加屬性。需要注意的是，添加任何屬性都必須以分號(hào)結(jié)束。 拖動(dòng)工具窗口最右側(cè)的滾動(dòng)條，在展開(kāi)的 Styles 模塊下方還有 Metrics、Properties、Event Listeners 幾大模塊。Metrics 模塊以圖形方式展示出左側(cè)面板中選中元素的盒模型并標(biāo)出了各部分的詳細(xì)數(shù)值，在調(diào)試頁(yè)面布局問(wèn)題時(shí)，這樣的展示方式往往更直觀、更清晰。

8、 向上拖動(dòng)工具窗口中部的滾動(dòng)條，找到“圖片”元素，點(diǎn)擊后，可看到在頁(yè)面上相應(yīng)的元素被選中，這時(shí)我們將工具窗口右側(cè)的滾動(dòng)條拖到最下方，展開(kāi) Event Listeners 中個(gè)各項(xiàng)，可看到這個(gè)鏈接（元素）的相關(guān)事件監(jiān)聽(tīng)函數(shù)。通過(guò) Event Listeners 項(xiàng)右側(cè)的“齒輪”圖標(biāo)，您可以選擇是只顯示選中節(jié)點(diǎn)上的注冊(cè)的事件，還是顯示整個(gè)事件流中所有注冊(cè)的事件。 點(diǎn)擊工具窗口左下角的放大鏡圖標(biāo) 可進(jìn)入“審查模式”，選中后，放大鏡變?yōu)樗{(lán)色，這時(shí)隨鼠標(biāo)在主窗口的頁(yè)面中的移動(dòng)，你會(huì)看到相應(yīng)的元素被高亮標(biāo)識(shí)出來(lái)，點(diǎn)擊后，工具窗口會(huì)顯示選中元素的 DOM 節(jié)點(diǎn)信息。另外值得注意的一點(diǎn)是，

9、在 Google Chrome 瀏覽器開(kāi)發(fā)人員工具里，所有腳本和樣式表是按語(yǔ)法著色的，調(diào)試起來(lái)更加清晰。資源（Resources）面板在資源面板中，你可以看到從網(wǎng)絡(luò)上下載的所有資源。打開(kāi)資源面板的時(shí)候，您通常會(huì)看到如下的界面： 由于資源跟蹤會(huì)對(duì)性能產(chǎn)生一定影響，可以選擇只對(duì)本次會(huì)話(huà)進(jìn)行追蹤還是對(duì)所有會(huì)話(huà)都進(jìn)行資源跟蹤。選擇好后點(diǎn)擊啟用資源追蹤（“Enable resource tracking”）按鈕，你會(huì)看到如下的狀態(tài)： 這是加載此網(wǎng)頁(yè)使用網(wǎng)絡(luò)資源的時(shí)間表。每個(gè)水平的棒狀圖示代表一個(gè)資源占用網(wǎng)絡(luò)的時(shí)間，而在每個(gè)棒狀圖示的左側(cè)顏色較淺的部分代表延遲時(shí)間（Latency），即

10、從向服務(wù)器發(fā)出請(qǐng)求到服務(wù)器第一次響應(yīng)之間的時(shí)長(zhǎng)。鼠標(biāo)移至棒狀圖示上，可看到每個(gè)部分所花銷(xiāo)的精確時(shí)間。圖中藍(lán)色和紅色的兩條垂直線(xiàn)分別代表 DOMContent 加載完成和 Load 事件被觸發(fā)的時(shí)間點(diǎn)。在了解了網(wǎng)頁(yè)各部分加載所花費(fèi)的的時(shí)間后，您可以進(jìn)行有效改進(jìn)從而提高網(wǎng)站的效率。位于時(shí)間表上方的軸，列出了可供選擇的不同類(lèi)型的資源，您可以選擇查看所有資源，或僅查看某一類(lèi)的資源。通過(guò)時(shí)間表下方的下拉菜單，你可以指定排序方式。同時(shí)您還可以通過(guò)下拉菜單左側(cè)的“列表”選擇使用寬行或窄行的方式來(lái)查看所有資源的信息。 點(diǎn)擊左側(cè)工具欄的 Size 圖標(biāo)，可以看到下載的各項(xiàng)資源的大小。 點(diǎn)擊左

11、側(cè)各項(xiàng)資源，則可以看到它的詳細(xì)信息，例如點(diǎn)擊 logo_cn.png 這項(xiàng)，我們將會(huì)看到：  打開(kāi)“ Headers ”標(biāo)簽頁(yè)可以查看完整的頭信息。您甚至可以直接將資源圖標(biāo)拖入瀏覽器窗口，在瀏覽器中直接直接訪(fǎng)問(wèn)該項(xiàng)資源。腳本（Scripts）面板在腳本面板里，您可以方便的調(diào)試 JavaScript 代碼。下面的圖中標(biāo)注了在腳本面板里的幾個(gè)主要功能： 圖中的的3個(gè)圖標(biāo)分別代表： 單步調(diào)試，不進(jìn)入函數(shù)體內(nèi)部 單步調(diào)試，進(jìn)入函數(shù)體內(nèi)部 跳出當(dāng)前函數(shù)設(shè)置斷點(diǎn)后按 F5 刷新，頁(yè)面會(huì)在執(zhí)行到斷點(diǎn)語(yǔ)句處停下，如圖： 您可以在右側(cè)添加所需觀察的變量，來(lái)進(jìn)行跟蹤變量值的變化，也可

12、查看堆棧調(diào)用情況及全局變量和函數(shù)的信息，也可以將鼠標(biāo)移到感興趣的變量名上直接查看此變量當(dāng)前的值。在腳本面板中，您可能會(huì)用到以下快捷鍵幫助調(diào)試：Windows/LinuxMac功能Ctrl+/F8 或 Command+/繼續(xù)運(yùn)行Ctrl+F10 或 Command+單步調(diào)試，不進(jìn)入函數(shù)體內(nèi)部Ctrl+;F11 或 Command+;單步調(diào)試，進(jìn)入函數(shù)體內(nèi)部Shift+Ctrl+;Shift+F11 或 Shift+Command+;跳出當(dāng)前函數(shù)Ctrl+.Ctrl+.進(jìn)入上一層調(diào)用棧Ctrl+,Ctrl+,進(jìn)入下一層調(diào)用棧  時(shí)間軸（Timeline）面板時(shí)間軸面板為您的網(wǎng)頁(yè)及網(wǎng)絡(luò)應(yīng)用

13、程序做了一個(gè)詳細(xì)的性能分析，告訴您載入頁(yè)面的時(shí)間究竟花在哪些地方。從加載資源到解析 JavaScript 腳本、計(jì)算樣式表及頁(yè)面渲染的所有步驟，您都可以在這里看到它們消耗的時(shí)間和內(nèi)存。打開(kāi)時(shí)間軸面板，您會(huì)看到這樣的界面： 這次我們以 Google 的更多產(chǎn)品頁(yè)舉例，看一下這個(gè)面板的功能： 1. 首先，在 Google Chrome 瀏覽器標(biāo)簽頁(yè)中打開(kāi)：.hk/intl/zh-CN/options/ 2. 如果您尚未打開(kāi)開(kāi)發(fā)人員工具，請(qǐng)按照準(zhǔn)備工作這一章節(jié)的介紹打開(kāi)開(kāi)發(fā)人員工具，并切換到時(shí)間軸（Timeline）面板 3. 點(diǎn)擊“開(kāi)始記錄”圖標(biāo)，您會(huì)看到圓點(diǎn)變?yōu)榧t色 4. F5 刷新頁(yè)

14、面，待頁(yè)面載入完成后，再次點(diǎn)擊“開(kāi)始記錄”圖標(biāo)，紅色圓點(diǎn)變?yōu)榛疑?，您?huì)看到時(shí)間軸面板里記錄下來(lái)的時(shí)間消耗情況：  鼠標(biāo)移到棒狀圖示上，會(huì)看到相應(yīng)的事件在載入、腳本解析及渲染三步驟所花費(fèi)的詳細(xì)時(shí)間： 您還可以拖動(dòng)上半部分區(qū)域的時(shí)間軸上的灰色豎條，設(shè)定下方詳細(xì)數(shù)據(jù)區(qū)的時(shí)間范圍，如下圖所示： 切換到 Memory 行，并重新記錄，可以觀察頁(yè)面載入的過(guò)程中每個(gè)時(shí)刻使用堆的大小。剖析（Profiles）面板剖析面板由 CPU 分析器和堆分析器組成，它能夠幫助您了解網(wǎng)頁(yè)和網(wǎng)絡(luò)應(yīng)用程序的執(zhí)行時(shí)間和內(nèi)存使用情況。 · CPU 分析器顯示的是 JavaScript 腳本里

15、的每個(gè)函數(shù)分別占用了多少執(zhí)行時(shí)間 · 堆分析器顯示每個(gè) JavaScript 對(duì)象所使用的內(nèi)存大小 通過(guò)了解資源使用分布，您就可以有效地對(duì)代碼進(jìn)行優(yōu)化，從而提高網(wǎng)站的效率。我們以 V8 引擎基準(zhǔn)測(cè)試頁(yè)面為例，探討剖析面板的使用。 首先在 Google Chrome 瀏覽器中打開(kāi) V8 引擎基準(zhǔn)測(cè)試頁(yè)面，并打開(kāi)開(kāi)發(fā)人員工具的剖析面板，您會(huì)看到如下界面：  點(diǎn)擊開(kāi)始按鈕，并刷新測(cè)試頁(yè)面，開(kāi)始信息收集。頁(yè)面重新載入完成后，瀏覽器在基準(zhǔn)測(cè)試中的得分會(huì)顯示出來(lái)，這時(shí)點(diǎn)擊按鈕停止 CPU 使用信息收集，您會(huì)看到“ CPU PROFILES ”項(xiàng)目下多出一個(gè)記錄，這是您此信息收集區(qū)間 C

16、PU 消耗的一個(gè)詳細(xì)分解記錄，您從中可以看出每個(gè)函數(shù)占CPU時(shí)間的百分比。 如果您僅僅對(duì) JavaScript 代碼中的幾個(gè)函數(shù)感興趣，您也可以選中它們，然后點(diǎn)擊 按鈕，面板中將只顯示被選中函數(shù)的信息，而 按鈕作用恰恰相反，將只顯示除選中函數(shù)以外其它函數(shù)的信息。 在頁(yè)面載入的過(guò)程中，您可以在任意時(shí)刻點(diǎn)擊內(nèi)存信息采集按鈕，獲取那一時(shí)刻內(nèi)存使用狀況信息。內(nèi)存使用信息記錄會(huì)顯示在“ HEAP SNAPSHOTS ”項(xiàng)下面。 剖析面板的搜索框不僅僅可進(jìn)行函數(shù)名/對(duì)象名搜索，同時(shí)也支持?jǐn)?shù)值（支持單位后綴，如 ms/s/B/KB/MB 及 % ）查找和帶比較運(yùn)算符（ <、<

17、=、=、>=、> ）的數(shù)值查找。例如在搜索框里輸入“ >30KB ”，您會(huì)看到所有大于30KB的記錄條被標(biāo)為淺橙色，同時(shí)左側(cè)的內(nèi)存使用記錄旁也會(huì)有數(shù)字表明在這個(gè)記錄中有多少條滿(mǎn)足搜索條件的結(jié)果。存儲(chǔ)（Storage）面板通過(guò)存儲(chǔ)面板，您可以與 HTML 5 的數(shù)據(jù)庫(kù)存儲(chǔ)和 cookie 進(jìn)行交互。您可以檢查當(dāng)前頁(yè)面打開(kāi)的所有數(shù)據(jù)庫(kù)的內(nèi)容，也可以在這些數(shù)據(jù)庫(kù)中進(jìn)行 SQL 查詢(xún)。我們以 Webkit 演示頁(yè)來(lái)簡(jiǎn)單介紹一下此面板的使用方法： 1. 在 Google Chrome 瀏覽器中打開(kāi) Webkit 演示頁(yè)，并打開(kāi)開(kāi)發(fā)人員工具的存儲(chǔ)面板 2. 在“黃色便條”中鍵入“第一條記

18、錄”，再新建兩個(gè)便條，分別鍵入“第二條記錄”和“第三條記錄”  在存儲(chǔ)面板中，您可以點(diǎn)擊數(shù)據(jù)庫(kù)圖標(biāo)，會(huì)發(fā)現(xiàn)此頁(yè)面建立了一個(gè)名為“ WebkitStickyNotes ”的表，點(diǎn)擊此表，可查看里面所有的記錄。 您也可以點(diǎn)擊數(shù)據(jù)庫(kù)圖標(biāo)，然后直接在右側(cè)的命令行窗口鍵入 SQL 語(yǔ)句進(jìn)行查詢(xún)。開(kāi)發(fā)人員工具在您鍵入 SQL 語(yǔ)句時(shí)，具有自動(dòng)補(bǔ)齊功能，使用起來(lái)非常方便。 在 COOKIES 項(xiàng)下，您可以查看到該頁(yè)保存的所有 Cookies ，也可以通過(guò)右鍵菜單刪除它們。審計(jì)（Audits）面板審計(jì)面板是在 Google Chrome 瀏覽器 5.0 中新引入的模塊。它可以幫助

19、您檢查網(wǎng)頁(yè)性能和網(wǎng)絡(luò)利用率。打開(kāi)審計(jì)面板，您將看到這樣的界面： 您可選擇所需檢測(cè)的項(xiàng)目或選擇“檢查全部”（“ Select All ”），然后點(diǎn)擊“運(yùn)行”（“ Run ”）按鈕，開(kāi)發(fā)人員工具將為您的網(wǎng)頁(yè)生成一份詳細(xì)的審計(jì)報(bào)告并給出關(guān)于網(wǎng)絡(luò)利用及性能優(yōu)化方面的建議，如下圖所示，為 Google Chrome 瀏覽器開(kāi)發(fā)人員工具為更多 Google 產(chǎn)品頁(yè)所生成的審計(jì)報(bào)告： JavaScript 控制臺(tái)（Console）JavaScript 控制臺(tái)可與其它面板聯(lián)合使用，您可以借助它來(lái)審查 DOM 元素、調(diào)試 JavaScript 代碼、查看 HTML 解析錯(cuò)誤等。我們?cè)俅我?Google 簡(jiǎn)體中文首頁(yè)為例說(shuō)明 JavaScript 控制臺(tái)的