谷歌開(kāi)發(fā)工具(以下用開(kāi)發(fā)者工具簡(jiǎn)稱），是基于谷歌瀏覽器內(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)該使用谷歌瀏覽器（金絲雀）Canary 版。

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

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

選擇瀏覽器位于瀏覽器窗口右上方的菜單欄的工具目錄http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-chrome-menu1.png" alt="chrome-menu" />，選擇開(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 元素，資源，和源。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-devtools-window.png" alt="devtools-window" />

圖為開(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)常訪問(wèn)元素標(biāo)簽。例如，你對(duì)圖像的 HTML id 屬性和值是什么感到好奇的時(shí)候。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-elements-panel.png" alt="elements-panel" />

在 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 分析器命令。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-expression-evaluation.png" alt="expression-evaluation" />

在 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 更加輕松。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-js-debugging.png" alt="js-debugging" />

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-network-panel.png" alt="network-panel" />

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

審計(jì)

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-audits-panel.png" alt="audits-panel" />

提高渲染性能

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-timeline-panel.png" alt="timeline-panel" />

一個(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í)間。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-profiles-panel.png" alt="profiles-panel" />

堆快照的示例。

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/chrome-devtools-resources-panel.png" alt="resources-panel" />

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

進(jìn)一步閱讀

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

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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