谷歌瀏覽器開(kāi)發(fā)工具綜述

谷歌開(kāi)發(fā)工具(以下用開(kāi)發(fā)者工具簡(jiǎn)稱(chēng)），是基于谷歌瀏覽器內(nèi)含的一套網(wǎng)頁(yè)制作和調(diào)試工具。開(kāi)發(fā)者工具允許網(wǎng)頁(yè)開(kāi)發(fā)者深入瀏覽器和網(wǎng)頁(yè)應(yīng)用程序的內(nèi)部。該工具可以有效地追蹤布局問(wèn)題，設(shè)置 JavaScript 斷點(diǎn)并可深入理解代碼的最優(yōu)化策略。

注意：如果你是一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)者同時(shí)想要獲得最新版本的開(kāi)發(fā)工具，那么你應(yīng)該使用<a rel="nofollow" rel="external nofollow" target="_blank" >谷歌瀏覽器（金絲雀）Canary 版。

使用開(kāi)發(fā)工具

要使用開(kāi)發(fā)工具，直接打開(kāi)一個(gè)網(wǎng)頁(yè)或者谷歌瀏覽器的一個(gè)網(wǎng)頁(yè)應(yīng)用。另一種方式：

• 選擇瀏覽器位于瀏覽器窗口右上方的菜單欄的工具目錄，選擇開(kāi)發(fā)者工具選項(xiàng)。

• 右擊頁(yè)面任何位置并選擇審查元素。

開(kāi)發(fā)工具將會(huì)在瀏覽器的下方打開(kāi)。

有一些快捷鍵也可以用來(lái)打開(kāi)開(kāi)發(fā)工具：Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。

Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打開(kāi)開(kāi)發(fā)者工具同時(shí)集中焦點(diǎn)于控制臺(tái)。

Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開(kāi)開(kāi)發(fā)者工具或是在開(kāi)發(fā)者工具已經(jīng)打開(kāi)的情況下開(kāi)啟查閱選項(xiàng)。

學(xué)習(xí)使用快捷鍵可以為你每天的工作流節(jié)省時(shí)間。

開(kāi)發(fā)者工具窗口

開(kāi)發(fā)者工具窗口的頂部工具欄中排列著任務(wù)相關(guān)的組。每個(gè)工具欄項(xiàng)目和相應(yīng)的面板讓你能夠使用網(wǎng)頁(yè)或應(yīng)用程序的特定信息來(lái)工作，包括 DOM 元素，資源，和源。

圖為開(kāi)發(fā)者工具中的顏色選擇器。

總體而言，有八個(gè)主要的工具可供查看開(kāi)發(fā)工具：

• 元素

• 資源

• 網(wǎng)絡(luò)

• 源

• 時(shí)間表

• 簡(jiǎn)介

• 審核

• 控制臺(tái)

你可以使用 Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動(dòng)。

查閱 DOM 和格式

元素面板讓你看到一個(gè) DOM 樹(shù)的全部相關(guān)信息，并允許你檢查以及在傳輸過(guò)程中編輯 DOM 元素。當(dāng)你需要確認(rèn)頁(yè)面某些方面的 HTML 代碼段時(shí)，你會(huì)經(jīng)常訪(fǎng)問(wèn)元素標(biāo)簽。例如，你對(duì)圖像的 HTML id 屬性和值是什么感到好奇的時(shí)候。

在 DOM 中查看標(biāo)題元素。

閱讀更多關(guān)于查閱 DOM 和格式

利用控制臺(tái)進(jìn)行工作

JavaScript 控制臺(tái)為開(kāi)發(fā)者提供了測(cè)試 Web 頁(yè)面和應(yīng)用程序兩個(gè)主要功能,其中包括：

• 在開(kāi)發(fā)過(guò)程中記錄診斷信息。

• 一個(gè)可與文檔和工具交互的 shell 提示符。

您可以使用控制臺(tái)編程接口提供的方法來(lái)記錄診斷信息。如 console.log() 或 console.profile()。

您可以直接在控制臺(tái)中評(píng)估表達(dá)式，并使用命令行提供的方法。這些包括使用 $() 命令選擇元素或通過(guò) profile() 方法啟動(dòng) CPU 分析器命令。

在 JS 控制臺(tái)上評(píng)估一些命令。

閱讀更多關(guān)于工作的控制臺(tái)

JavaScript 的調(diào)試

由于 JavaScript 應(yīng)用程序復(fù)雜性的增加，開(kāi)發(fā)商需要強(qiáng)大的調(diào)試工具來(lái)幫助開(kāi)發(fā)者快速發(fā)現(xiàn)問(wèn)題的原因和并找出有效的解決方法。Chrome 開(kāi)發(fā)工具包含了一些有用的工具來(lái)使得調(diào)試 JavaScript 更加輕松。

一個(gè)在控制臺(tái)輸出日志的條件斷點(diǎn)。

閱讀更多關(guān)于如何應(yīng)用調(diào)試工具調(diào)試 JavaScript

提高網(wǎng)絡(luò)性能

網(wǎng)絡(luò)面板提供了有關(guān)已經(jīng)下載和加載過(guò)的資源的詳細(xì)分析。在優(yōu)化頁(yè)面的基本過(guò)程中，確定和找到那些請(qǐng)求通常要比預(yù)計(jì)的時(shí)間更長(zhǎng)。

網(wǎng)絡(luò)請(qǐng)求的上下文菜單。

想了解更多關(guān)于如何提高你的網(wǎng)絡(luò)性能的知識(shí)，請(qǐng)點(diǎn)擊

審計(jì)

審計(jì)面板可以像加載頁(yè)面時(shí)那樣分析一個(gè)頁(yè)面。然后提供關(guān)于減少頁(yè)面加載時(shí)間的建議和優(yōu)化，以此提高感知（和真實(shí)）的響應(yīng)。要進(jìn)一步的了解該功能，我們推薦使用 pagespeed 。

提高渲染性能

在加載和使用你的網(wǎng)頁(yè)應(yīng)用程序或網(wǎng)頁(yè)時(shí)，時(shí)間軸面板給你關(guān)于時(shí)間開(kāi)銷(xiāo)的完整概述。包括從加載資源到解析 JavaScript，以及計(jì)算方式在內(nèi)的所有事件，都會(huì)重新繪制在一個(gè)時(shí)間表中。

一個(gè)有著多種時(shí)間的時(shí)間軸示例。

閱讀更多關(guān)于如何提高渲染性能

JavaScript 和 CSS 的性能

配置面板允許您為網(wǎng)絡(luò)應(yīng)用程序或頁(yè)面配置執(zhí)行時(shí)間和內(nèi)存使用量。這些有助于你理解資源的消耗，以幫助你優(yōu)化你的代碼。提供的分析器有：

• CPU 分析器會(huì)顯示你頁(yè)面上的 JavaScript 函數(shù)的執(zhí)行時(shí)間
• 堆內(nèi)存分配器 顯示頁(yè)面的 JavaScript 對(duì)象和 DOM 節(jié)點(diǎn)。
• JavaScript 配置文件會(huì)顯示腳本的執(zhí)行時(shí)間。

堆快照的示例。

閱讀更多關(guān)于使用JavaScript和CSS如何提高性能

監(jiān)視存儲(chǔ)

資源面板允許你監(jiān)視頁(yè)面中加載的資源。它可以讓你使用 HTML5 的本地存儲(chǔ)，數(shù)據(jù)庫(kù)，緩存，appcache，等。

Web Starter Kit 的 JavaScript 文件會(huì)顯示在資源面板中。

要閱讀更多關(guān)于監(jiān)視存儲(chǔ)的內(nèi)容，請(qǐng)點(diǎn)擊

進(jìn)一步閱讀

還有一些其他的開(kāi)發(fā)工具文檔內(nèi)容，這些內(nèi)容會(huì)有對(duì)你有用的東西。具體包括：

• 堆分析
• 中央處理器
• 設(shè)備模式與移動(dòng)仿真
• 遠(yuǎn)程調(diào)試
• 視頻工具

更多資源

獲得更多

您也可以在 @chromiumdev 上尋求我們的幫助或使用論壇問(wèn)個(gè)問(wèn)題。

在控制臺(tái)中的樣式輸出。

確定在 Google+ 上檢查谷歌瀏覽器開(kāi)發(fā)頁(yè)面。

參與

提交一個(gè) bug 錯(cuò)誤或工具的特征請(qǐng)求，請(qǐng)?jiān)?http://crbug.com 使用問(wèn)題追蹤。請(qǐng)同時(shí)提到“工具”的錯(cuò)誤總結(jié)中。

crbug.com 的錯(cuò)誤報(bào)告類(lèi)選擇器。

請(qǐng)直接回饋給我們以讓開(kāi)發(fā)者工具變得更好。

調(diào)試擴(kuò)展

想使用工具來(lái)調(diào)試 Chrome 擴(kuò)展插件？觀看開(kāi)發(fā)和調(diào)試擴(kuò)展插件。該教程也可以用于調(diào)試。