Google Chrome 瀏覽器開發(fā)人員工具

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

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

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

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

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

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

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

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

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

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

11、各項(xiàng)資源，則可以看到它的詳細(xì)信息，例如點(diǎn)擊 logo_cn.png 這項(xiàng)，我們將會看到：  打開“ Headers ”標(biāo)簽頁可以查看完整的頭信息。您甚至可以直接將資源圖標(biāo)拖入瀏覽器窗口，在瀏覽器中直接直接訪問該項(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 刷新，頁面會在執(zhí)行到斷點(diǎn)語句處停下，如圖： 您可以在右側(cè)添加所需觀察的變量，來進(jìn)行跟蹤變量值的變化，也可查

12、看堆棧調(diào)用情況及全局變量和函數(shù)的信息，也可以將鼠標(biāo)移到感興趣的變量名上直接查看此變量當(dāng)前的值。在腳本面板中，您可能會用到以下快捷鍵幫助調(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)頁及網(wǎng)絡(luò)應(yīng)用程

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

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

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

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

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

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

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