Chrome開發(fā)工具 綜述
谷歌瀏覽器開發(fā)工具綜述
谷歌開發(fā)工具(以下用開發(fā)者工具簡稱），是基于谷歌瀏覽器內(nèi)含的一套網(wǎng)頁制作和調(diào)試工具。開發(fā)者工具允許網(wǎng)頁開發(fā)者深入瀏覽器和網(wǎng)頁應(yīng)用程序的內(nèi)部。該工具可以有效地追蹤布局問題，設(shè)置 JavaScript 斷點(diǎn)并可深入理解代碼的最優(yōu)化策略。
注意：如果你是一個(gè)網(wǎng)頁開發(fā)者同時(shí)想要獲得最新版本的開發(fā)工具，那么你應(yīng)該使用<a rel="nofollow" rel="external nofollow" target="_blank" >谷歌瀏覽器（金絲雀）Canary 版。
使用開發(fā)工具
要使用開發(fā)工具，直接打開一個(gè)網(wǎng)頁或者谷歌瀏覽器的一個(gè)網(wǎng)頁應(yīng)用。另一種方式：
選擇瀏覽器位于瀏覽器窗口右上方的菜單欄的工具目錄
，選擇開發(fā)者工具選項(xiàng)。- 右擊頁面任何位置并選擇審查元素。
開發(fā)工具將會在瀏覽器的下方打開。
有一些快捷鍵也可以用來打開開發(fā)工具：Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。
Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打開開發(fā)者工具同時(shí)集中焦點(diǎn)于控制臺。
Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發(fā)者工具或是在開發(fā)者工具已經(jīng)打開的情況下開啟查閱選項(xiàng)。
學(xué)習(xí)使用快捷鍵可以為你每天的工作流節(jié)省時(shí)間。
開發(fā)者工具窗口
開發(fā)者工具窗口的頂部工具欄中排列著任務(wù)相關(guān)的組。每個(gè)工具欄項(xiàng)目和相應(yīng)的面板讓你能夠使用網(wǎng)頁或應(yīng)用程序的特定信息來工作，包括 DOM 元素，資源，和源。
圖為開發(fā)者工具中的顏色選擇器。
總體而言，有八個(gè)主要的工具可供查看開發(fā)工具：
你可以使用 Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動。
查閱 DOM 和格式
元素面板讓你看到一個(gè) DOM 樹的全部相關(guān)信息，并允許你檢查以及在傳輸過程中編輯 DOM 元素。當(dāng)你需要確認(rèn)頁面某些方面的 HTML 代碼段時(shí)，你會經(jīng)常訪問元素標(biāo)簽。例如，你對圖像的 HTML id 屬性和值是什么感到好奇的時(shí)候。
在 DOM 中查看標(biāo)題元素。
利用控制臺進(jìn)行工作
JavaScript 控制臺為開發(fā)者提供了測試 Web 頁面和應(yīng)用程序兩個(gè)主要功能,其中包括：
在開發(fā)過程中記錄診斷信息。
- 一個(gè)可與文檔和工具交互的 shell 提示符。
您可以使用控制臺編程接口提供的方法來記錄診斷信息。如 console.log() 或 console.profile()。
您可以直接在控制臺中評估表達(dá)式，并使用命令行提供的方法。這些包括使用 $() 命令選擇元素或通過 profile() 方法啟動 CPU 分析器命令。
在 JS 控制臺上評估一些命令。
JavaScript 的調(diào)試
由于 JavaScript 應(yīng)用程序復(fù)雜性的增加，開發(fā)商需要強(qiáng)大的調(diào)試工具來幫助開發(fā)者快速發(fā)現(xiàn)問題的原因和并找出有效的解決方法。Chrome 開發(fā)工具包含了一些有用的工具來使得調(diào)試 JavaScript 更加輕松。
一個(gè)在控制臺輸出日志的條件斷點(diǎn)。
閱讀更多關(guān)于如何應(yīng)用調(diào)試工具調(diào)試 JavaScript
提高網(wǎng)絡(luò)性能
網(wǎng)絡(luò)面板提供了有關(guān)已經(jīng)下載和加載過的資源的詳細(xì)分析。在優(yōu)化頁面的基本過程中，確定和找到那些請求通常要比預(yù)計(jì)的時(shí)間更長。
網(wǎng)絡(luò)請求的上下文菜單。
想了解更多關(guān)于如何提高你的網(wǎng)絡(luò)性能的知識，請點(diǎn)擊
審計(jì)
審計(jì)面板可以像加載頁面時(shí)那樣分析一個(gè)頁面。然后提供關(guān)于減少頁面加載時(shí)間的建議和優(yōu)化，以此提高感知（和真實(shí)）的響應(yīng)。要進(jìn)一步的了解該功能，我們推薦使用 pagespeed 。
提高渲染性能
在加載和使用你的網(wǎng)頁應(yīng)用程序或網(wǎng)頁時(shí)，時(shí)間軸面板給你關(guān)于時(shí)間開銷的完整概述。包括從加載資源到解析 JavaScript，以及計(jì)算方式在內(nèi)的所有事件，都會重新繪制在一個(gè)時(shí)間表中。
一個(gè)有著多種時(shí)間的時(shí)間軸示例。
JavaScript 和 CSS 的性能
配置面板允許您為網(wǎng)絡(luò)應(yīng)用程序或頁面配置執(zhí)行時(shí)間和內(nèi)存使用量。這些有助于你理解資源的消耗，以幫助你優(yōu)化你的代碼。提供的分析器有：
- CPU 分析器會顯示你頁面上的 JavaScript 函數(shù)的執(zhí)行時(shí)間
- 堆內(nèi)存分配器 顯示頁面的 JavaScript 對象和 DOM 節(jié)點(diǎn)。
- JavaScript 配置文件會顯示腳本的執(zhí)行時(shí)間。
堆快照的示例。
閱讀更多關(guān)于使用JavaScript和CSS如何提高性能
監(jiān)視存儲
資源面板允許你監(jiān)視頁面中加載的資源。它可以讓你使用 HTML5 的本地存儲，數(shù)據(jù)庫，緩存，appcache，等。
Web Starter Kit 的 JavaScript 文件會顯示在資源面板中。
要閱讀更多關(guān)于監(jiān)視存儲的內(nèi)容，請點(diǎn)擊
進(jìn)一步閱讀
還有一些其他的開發(fā)工具文檔內(nèi)容，這些內(nèi)容會有對你有用的東西。具體包括：
更多資源
獲得更多
您也可以在 @chromiumdev 上尋求我們的幫助或使用論壇問個(gè)問題。
在控制臺中的樣式輸出。
確定在 Google+ 上檢查谷歌瀏覽器開發(fā)頁面。
參與
提交一個(gè) bug 錯(cuò)誤或工具的特征請求，請?jiān)?http://crbug.com 使用問題追蹤。請同時(shí)提到“工具”的錯(cuò)誤總結(jié)中。
crbug.com 的錯(cuò)誤報(bào)告類選擇器。
請直接回饋給我們以讓開發(fā)者工具變得更好。
調(diào)試擴(kuò)展
想使用工具來調(diào)試 Chrome 擴(kuò)展插件？觀看開發(fā)和調(diào)試擴(kuò)展插件。該教程也可以用于調(diào)試。
更多建議：