Google_Chrome_開發(fā)人員工具詳解

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

2、以及監(jiān)控。Google Chrome 瀏覽器開發(fā)人員工具不僅僅能幫助您診斷、修復在網(wǎng)頁加載、腳本執(zhí) 行以及頁面呈現(xiàn)中出現(xiàn)的問題，還可以幫助您最大限度地了解您的網(wǎng)頁或網(wǎng)絡應用程序?qū)PU以及內(nèi)存的使用情況。本篇教程將從以下幾部分系統(tǒng)地講解如何使用Google Chrome 瀏覽器開發(fā)人員工具來幫助您的開發(fā)：準備工作*如何使用元素（Eleme nts） 面板如何使用資源（Resources） 面板如何使用腳本(Scripts)面板如何使用時間軸(Timeli ne) 面板如何使用剖析(Profiles)面板如何使用存儲(Storage)面板如何使用審計(Audits)面板* 如何使用 JavaSc

3、ript 控制臺（Co nsole）準備工作要開始使用開發(fā)人員工具，請先下載Google Chrome 瀏覽器。（如果您想試用最新版本的的開發(fā)人員工具，可以下載開發(fā)版或測試版（英文網(wǎng)頁）Google Chrome 瀏覽器。）在Google Chrome 瀏覽器安裝完成后，您可以打開自己感興趣的網(wǎng)頁或網(wǎng)絡應用程序，然后通過下面任何一種方式進入開發(fā)人員工具：點擊位于瀏覽器用戶界面右上角的頁面'下拉菜單口”，然后選擇開發(fā)人員”一開'發(fā)人員工具”。右鍵點擊網(wǎng)頁上的任一元素，在彈出菜單中選擇審查元素”。*在Windows或Linux操作系統(tǒng)上，使用 Ctrl+Shift+I快捷鍵打開開發(fā)

4、人員工 具（或使用 Ctrl+Shift+J 直接進入JavaScript控制臺）。«在Mac上，使用Command+Option+1快捷鍵打開開發(fā)人員工具(或使用Command+Option+J 直接進入 JavaScript 控制臺)?，F(xiàn)在您應該已經(jīng)看到開發(fā)人員工具的窗口了吧？在窗口的最上方的工具欄里排列著8個圖標，分別對應不同的功能，每一個圖標點擊后都會打開相應的調(diào)試面板，幫助您獲 取各種不同的信息，女口DOM樹、資源占用情況、頁面相關(guān)的腳本等。通過Ctrl+和Ctd+鍵，可以在這些項之間進行切換。工具欄最右方還提供了一個搜索框，方便在當 前面板中進行搜索。Took -腫用2

5、.im tiktjojIlesut* Feis'Jicti Sixi-pH 71 mi les工具窗口下部的按鈕可以讓調(diào)試窗口?？康街鞔翱趦?nèi)，切換JavaScript控制臺狀態(tài)，以及其它一些功能。當然您也可以使用Esc鍵來更快地切換 JavaScript控制臺狀態(tài)。直接點擊控制臺圖標會使控制臺調(diào)試界面會占據(jù)了整個開發(fā)工具窗口。窗口右下角顯示的是錯誤和警告計數(shù)，點擊它們也會打開控制臺。接下來的單元，讓我們一起來一一分解這些圖標所對應面板具有的強大功能吧！元素(Elements ) 面板在元素(Elements )面板中，可以看到整個頁面的DOM樹結(jié)構(gòu)和每個元素的所有屬性，同時也可以實時地

6、修改這些元素及其屬性，并可以實時看到修改后的效果。我們這里以Google簡體中文首頁為例，鼠標右鍵單擊 “ Google搜索”按鈕，選擇審 查元素”，您會看到如下的窗口界面(注：此處使用的內(nèi)嵌工具窗口模式，如您的工具窗口為獨立窗口模式，可通過點擊窗口左下方的?？俊眻D標口將其變?yōu)閮?nèi)嵌模式)：在工具窗口右側(cè)，顯示的是被選元素的樣式信息，如有興趣，可以嘗試通過雙擊現(xiàn)有屬 性來修改該元素的 style屬性或應用的某個選擇器中的屬性值，也可以通過取消勾選的方式去掉一些屬性，同時觀察頁面的實時變化。那怎樣給現(xiàn)有的元素或者選擇器增加一 個屬性值呢？不用著急， 鼠標雙擊您所想修改的元素的eleme nt.st

7、yle部分或者它應用的選擇器的空白部分（如下圖所示），即可添加屬性。需要注意的是，添加任何屬性都 必須以分號結(jié)束。穴茁退些墮白瞇,司駅俞.kb晨邊擇輯澤加第強畀“性。4, isb*dPJW的亞科真勿F書出用一4立;T , 丘可曲入痢靜拝弍桂.井反甘腎（；辮索-.1, r_. : i e ；7 ci 亓 rsjrw*?.拖動工具窗口最右側(cè)的滾動條，在展開的Styles模塊下方還有 Metrics、Properties、Eve nt Liste ners 幾大模塊。Metrics模塊以圖形方式展示出左側(cè)面板中選中元素的盒模 型并標出了各部分的詳細數(shù)值，在調(diào)試頁面布局問題時，這樣的展示方式往往更直觀

8、、 更清晰。向上拖動工具窗口中部的滾動條，找到圖片”元素，點擊后，可看到在頁面上相應的元素被選中，這時我們將工具窗口右側(cè)的滾動條拖到最下方，展開Eve nt Liste ners 中個各項，可看到這個鏈接（元素）的相關(guān)事件監(jiān)聽函數(shù)。通過Eve nt Liste ners 項右側(cè)的齒輪”圖標，您可以選擇是只顯示選中節(jié)點上的注冊的事件，還是顯示整個事件流中所 有注冊的事件。GooqIco稈就 a* Mdi- tev.tr tmew lli* Bn«rtttr 討陽a 1 lib * ' ?Mb*At.f.q.和1*鼻|；化腫L.Et .)內(nèi)廠匚1 «'i wg&

9、#174;s/irprym .',loic 15 的."工A ；dw"(i ' 1atHiMlIfry:noi>»u)X 1 t#x1 «rf< di > 丄y * CMMitT -i r>3 C?r >- V密禪ua"毗畑f趴 cn.m 牡時內(nèi) 1冷亡iiat.3：i.7j -1 -J p-516 . qa i t r L1) Llaii* ED L11 tot 3 -< hnrfAfrtt. / HteA.lafCW管<Fnclik«"ftw _qi(thlE)&

10、#39; :Iasi"£&!'a> a hrfT» Bnttd >'aituu(&o| r«ufix-t<l zh CN1tabvh1u j*1 c I cimt：- i&a- htffi :'<a hr<« on4 http:yI, ne«icgw. nkMU .tai”勺費卄：昇clai- g-b|"aH -B ' aBJ*r . 4¥ i tI*亍年'ihttp f 丿 wc*ic3JMi|ri丘f問 *比d-Ego

11、g率 dfqh*no«rFuflKer |.4n4|wbnw« «>¥*w a*. D"H 1： 叱F«w* 護曰片啊 .$早Tjrt fl 6*點擊工具窗口左下角的放大鏡圖標Q可進入 審查模式”選中后，放大鏡變?yōu)樗{色,這時隨鼠標在主窗口的頁面中的移動，你會看到相應的元素被高亮標識出來，點擊后， 工具窗口會顯示選中元素的 DOM節(jié)點信息。另外值得注意的一點是，在Google Chrome瀏覽器開發(fā)人員工具里，所有腳本和樣式表是按語法著色的，調(diào)試起來更加清晰資源（Resources ）面板在資源面板中，你可以看到從網(wǎng)絡上下載的所有

12、資源。打開資源面板的時候，您通常會 看到如下的界面：由于資源跟蹤會對性能產(chǎn)生一定影響，可以選擇只對本次會話進行追蹤還是對所有會話 都進行資源跟蹤。選擇好后點擊啟用資源追蹤(“Enable resource tracking )按鈕，你會看到如下的狀態(tài):這是加載此網(wǎng)頁使用網(wǎng)絡資源的時間表。每個水平的棒狀圖示代表一個資源占用網(wǎng)絡的時間，而在每個棒狀圖示的左側(cè)顏色較淺的部分代表延遲時間(Latency )，即從向服務器發(fā)出請求到服務器第一次響應之間的時長。鼠標移至棒狀圖示上，可看到每個部分所花銷的精確時間。圖中藍色和紅色的兩條垂直線分別代表 DOMContent加載完成和Load事件被觸發(fā) 的時間點

13、。在了解了網(wǎng)頁各部分加載所花費的的時間后， 您可以進行有效改進從而提高 網(wǎng)站的效率。位于時間表上方的軸，列出了可供選擇的不同類型的資源，您可以選擇查看所有資源， 或僅查看某一類的資源。通過時間表下方的下拉菜單， 你可以指定排序方式。同時您還可以通過下拉菜單左側(cè)的 列表”選擇使用寬行或窄行的方式來查看所有資源的信息。Sort try Start Timef Refpome TimoSoil 如y TLm« Sort M Ouratian St* Lung點擊左側(cè)工具欄的Size圖標，可以看到下載的各項資源的大小logo_c n.png 這項，我們將點擊左側(cè)各項資源，則可以看到它的詳細信

14、息，例如點擊 會看到：打開“ Headers標簽頁可以查看完整的頭信息。您甚至可以直接將資源圖標拖入瀏覽器 窗口，在瀏覽器中直接直接訪問該項資源。腳本（Scripts ）面板在腳本面板里，您可以方便的調(diào)試 JavaScript代碼。下面的圖中標注了在腳本面板里 的幾個主要功能：中勺蛙摒誤稈此明可減韋M 左挨聾覇的吏盤J& 土此上.斤說 雷畀口異率時 赴莓中R 土軒月可訂 在或訐處&克 C啟薩T.A圖中的一的3個圖標分別代表: 單步調(diào)試，不進入函數(shù)體內(nèi)部 單步調(diào)試，進入函數(shù)體內(nèi)部 跳出當前函數(shù) 設置斷點后按 F5刷新，頁面會在執(zhí)行到斷點語句處停下，如圖:您可以在右側(cè)添加所需觀察的

15、變量，來進行跟蹤變量值的變化，也可查看堆棧調(diào)用情況及全局變量和函數(shù)的信息，也可以將鼠標移到感興趣的變量名上直接查看此變量當前的 值。在腳本面板中，您可能會用到以下快捷鍵幫助調(diào)試：Win dows/L inuxMac功能Ctrl+/F8 或 Command+/繼續(xù)運行Ctrl +?F10 或 Command+?單步調(diào)試，不進入函數(shù)體內(nèi)部Ctrl+;F11 或 Command+;單步調(diào)試，進入函數(shù)體內(nèi)部Shift+Ctrl+;Shift+F11 或 Shift+Command+;跳出當前函數(shù)Ctrl+.Ctrl+.進入上一層調(diào)用棧Ctrl+,Ctrl+,進入下一層調(diào)用棧時間軸(Timeline )

16、面板時間軸面板為您的網(wǎng)頁及網(wǎng)絡應用程序做了一個詳細的性能分析，告訴您載入頁面的時間究竟花在哪些地方。從加載資源到解析JavaScript腳本、計算樣式表及頁面渲染的所有步驟，您都可以在這里看到它們消耗的時間和內(nèi)存。打開時間軸面板，您會看到這樣的界面:話陰記常一開蠟13錄昱茅小于】5ms的記錄這次我們以 Google的更多產(chǎn)品頁 舉例，看一下這個面板的功能:1. 首先，在 Google Chrome 瀏覽器標簽頁中打開： .hk/ ntl/zh-CN/optio ns/2. 如果您尚未打開開發(fā)人員工具，請按照準備工作這一章節(jié)的介紹打開開發(fā)人員工具，并切換到時間軸(Timeline )面板3. 點

17、擊 開始記錄”圖標，您會看到圓點變?yōu)榧t色4. F5刷新頁面，待頁面載入完成后，再次點擊開始記錄”圖標，紅色圓點變?yōu)榛疑鷷吹綍r間軸面板里記錄下來的時間消耗情況：鼠標移到棒狀圖示上，會看到相應的事件在載入、腳本解析及渲染三步驟所花費的詳細 時間：您還可以拖動上半部分區(qū)域的時間軸上的灰色豎條，設定下方詳細數(shù)據(jù)區(qū)的時間范圍, 如下圖所示：切換到Memory行，并重新記錄，可以觀察頁面載入的過程中每個時刻使用堆的大小。1rKDf I開旳停上CPU鬟莊杭左皤再匚隼> Dmtapcr Tach - KttszffvZ .eMriKodecMtViviVdMa/tcnf hnurks/vrun,

18、httrA剖析(Profiles )面板剖析面板由CPU分析器和堆分析器組成，它能夠幫助您了解網(wǎng)頁和網(wǎng)絡應用程序的執(zhí) 行時間和內(nèi)存使用情況。 CPU分析器顯示的是 JavaScript腳本里的每個函數(shù)分別占用了多少執(zhí)行時間 *堆分析器顯示每個 JavaScript對象所使用的內(nèi)存大小通過了解資源使用分布，您就可以有效地對代碼進行優(yōu)化，從而提高網(wǎng)站的效率。我們以V8引擎基準測試頁面 為例，探討剖析面板的使用。首先在Google Chrome 瀏覽器中打開V8引擎基準測試頁面，并打開開發(fā)人員工具 的剖析面板，您會看到如下界面：UC4U5?：: ill x xl iK It "liillM

19、Rt Eeat tmmrrfCaM rol TU p-refi lin( by pref£in< the burttm on the xt st usCet a heap snaprhcrt: by presinc the Q> buttcn m the statuf barBIlCTk|«rCAKiQl*點擊開始按鈕，并刷新測試頁面，開始信息收集。頁面重新載入完成后，瀏覽器在基準 測試中的得分會顯示出來，這時點擊按鈕停止CPU使用信息收集，您會看到“ CPUPROFILES ”項目下多出一個記錄，這是您此信息收集區(qū)間CPU消耗的一個詳細分解記錄，您從中可以看出

20、每個函數(shù)占CPU時間的百分比。如果您僅僅對 JavaScript代碼中的幾個函數(shù)感興趣，您也可以選中它們，然后點擊°按鈕，面板中將只顯示被選中函數(shù)的信息，而按鈕作用恰恰相反，將只顯示除選中函數(shù)以外其它函數(shù)的信 息。CPU快用信總記錄請中聃甬啟商鈿堆除周It；兄記錄只蟲承選中的亟槪在頁面載入的過程中，您可以在任意時刻點擊內(nèi)存信息采集按鈕，獲取那一時刻內(nèi)存使 用狀況信息。內(nèi)存使用信息記錄會顯示在“ HEAP SNAPSHOTS項下面。剖析面板的搜索框不僅僅可進行函數(shù)名/對象名搜索，同時也支持數(shù)值（支持單位后綴，如ms/s/B/KB/MB 及 % ）查找和帶比較運算符（、=、=、=、）的數(shù)

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

22、鍵入第二條記錄"和第 三條記錄”在存儲面板中，您可以點擊數(shù)據(jù)庫圖標，會發(fā)現(xiàn)此頁面建立了一個名為 “ WebkitStickyNotes的表，點擊此表，可查看里面所有的記錄。您也可以點擊數(shù)據(jù)庫圖標， 然后直接在右側(cè)的命令行窗口鍵入 SQL語句進行查詢。開 發(fā)人員工具在您鍵入 SQL語句時，具有自動補齊功能，使用起來非常方便。>TmH - http: /by r»t«/>ndeK. IitmlSUi-Jfn fE&T&e*LOCAL STOMtlSJIliqii 1.TBUC1：£MB I IIi41*»ElUilax1

23、攔托1T30勢2501221Z7BILT3II 鵡1*咖3127&|73rhe9S2iSIhk1514 T-m il>ftiM-Ji276tr»aft250葉121|UtLL2二承 id舉 12Tat7l(E9«eJ<t3!E16在COOKIES項下，您可以查看到該頁保存的所有Cookies ，也可以通過右鍵菜單刪除它們。審計（Audits ）面板審計面板是在 Google Chrome 瀏覽器5.0中新引入的模塊。它可以幫助您檢查網(wǎng)頁 性能和網(wǎng)絡利用率。打開審計面板，您將看到這樣的界面：您可選擇所需檢測的項目或選擇檢查全部”(“ Select All )，”然后點擊 運行”(“ Run )”按鈕，開發(fā)人員工具將為您的網(wǎng)頁生成一份詳細的審計報告并給出關(guān)于網(wǎng)絡利用及性能 優(yōu)化方面的