修改 DevTools 中的設(shè)置

• 點(diǎn)擊設(shè)置齒輪 http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_gear.png" alt="gear.png" />，打開(kāi) General Settings 面板進(jìn)行修改。或者，也可以使用快捷鍵 ？ 打開(kāi) Setting 窗格。

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

通用設(shè)置

禁用緩存

只對(duì)打開(kāi)了 DevTools 的網(wǎng)頁(yè)禁止資源緩存。如果 DevTools 關(guān)閉，就會(huì)停止作用。

禁用 JavaScript

當(dāng)使用這個(gè)檢查，立即暫停所有注入在有 DevTools 實(shí)例的標(biāo)簽上的JavaScript 代碼。

注意：無(wú)論是禁用緩存和禁用 JavaScript 的設(shè)置都只適用于在DevTools 是打開(kāi)的情況下。當(dāng)它被打開(kāi)后，對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)就是它的 DevTools 是開(kāi)啟狀態(tài)。

使用 Ctr + 1-9 快捷鍵來(lái)切換面板

當(dāng)多個(gè)選項(xiàng)卡打開(kāi)狀態(tài)，若多于 9 個(gè)，則有標(biāo)簽 1-8 和 9 作為最后一個(gè)選項(xiàng)卡，你可以使用 Ctrl + 1-9 快捷鍵跳轉(zhuǎn)到 Chrome 瀏覽器中指定的標(biāo)簽。此設(shè)置將使 DevTools 以同樣的方式運(yùn)作，因此你可以快速在面板之間進(jìn)行切換。

注意：?jiǎn)⒂眠@個(gè)可能會(huì)導(dǎo)致與其他應(yīng)用程序的快捷鍵發(fā)生沖突。

界面（Appearance)

當(dāng)它停向右邊垂直拆分面板

使用這個(gè)會(huì)改變面板的布局，使主部分被堆疊在側(cè)欄部分的頂部。你會(huì)發(fā)現(xiàn)這是有用的，當(dāng)他們并排側(cè)欄是小屏幕的情況下是沒(méi)有足夠的水平空間的。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_dock-to-right.png" alt="dock-to-right.png" />

元素（Elements）

顏色格式

• As authored 官方定義 - （顏色代碼如何寫(xiě)在樣式表）
• HEX: #DAC0DE
• RGB: rgb(128, 255, 255)
• HSL: hsl(300, 80%, 90%)

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_color-format-settings.png" alt="color-format-settings.png" />

顏色格式（color format）設(shè)置，可以讓你控制顏色代碼如何顯示在元素面板的樣式邊欄 （Styles Sidebar）。除了為控制顏色代碼格式設(shè)置選項(xiàng)，你還可以點(diǎn)擊樣式欄頂部的齒輪圖標(biāo)，來(lái)改變顏色代碼的格式。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_color-picker-format.png" alt="color-picker-format.png" />

選擇 As authored 將為樣式表中定義的屬性使用顏色格式。

顯示用戶代理樣式（user agent styles)

你可能會(huì)發(fā)現(xiàn)在元素面板的樣式邊欄顯示的 user agent style 很有用。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_show-user-agent-styles.png" alt="show-user-agent-styles.png" />

用戶代理 (user agent) 是指瀏覽器。每個(gè)瀏覽器實(shí)現(xiàn)了一個(gè)默認(rèn)的樣式表，包括基本的風(fēng)格規(guī)則，在頁(yè)面中應(yīng)用到 DOM 元素。如果你曾經(jīng)很難去除兩個(gè)元素之間的空白，例如，它可能是因?yàn)橛脩舸順邮奖硖砑恿四J(rèn) margin 或 padding 指向特定類型的元素的。

自動(dòng)換行

正如任何文本編輯器，你可以在元素面板中選擇性的對(duì)長(zhǎng)行的代碼進(jìn)行換行。

顯示陰影（Shadow) DOM

有了影子 DOM，元素可以得到一個(gè)與它們相關(guān)聯(lián)的新節(jié)點(diǎn)。這個(gè)新節(jié)點(diǎn)被稱為陰影根（shadow root)。具有與其相關(guān)聯(lián)的陰影的根元素被稱為陰影主機(jī)。陰影主機(jī)的子節(jié)點(diǎn)不會(huì)呈現(xiàn);用陰影根的內(nèi)容代替呈現(xiàn)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_show-shadow-dom.png" alt="show-shadow-dom.png" />

• Shadow DOM 201
• Shadow DOM 301
• Shadow DOM Polyfill
• Visualizing Shadow DOM Concepts（可視化陰影 DOM 概念）
• Define presentational boxes using shadow DOM（定義使用陰影 DOM 表象盒）

顯示直尺

這將顯示一個(gè)沿著頂部，左側(cè)和底部覆蓋視口的標(biāo)尺。

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

源面板（Sources）

內(nèi)容腳本搜索

內(nèi)容腳本 (Content script) 是一些 JavaScript 文件，在 Chrome 插件中，插件運(yùn)行在網(wǎng)頁(yè)主體，但與普通網(wǎng)頁(yè)的 JavaScript 是完全分離的，處于一個(gè)受保護(hù)的范圍。這樣，內(nèi)容的腳本和頁(yè)面腳本彼此不能以一個(gè)普通的方式進(jìn)行交互。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_search-content-scripts.png" alt="search-content-scripts.png" />

當(dāng)在 Sources 面板中觀察內(nèi)容腳本的標(biāo)簽，你會(huì)看到兩個(gè)不同的腳本都是通過(guò)插件模塊（或通過(guò)用戶腳本 User Script 被編譯成 Chrome 里的插件）被添加的，同樣，內(nèi)容腳本也被內(nèi)置成為瀏覽器的一部分，特別是插件能夠使用的 API 。

注意：在開(kāi)發(fā) Chrome 應(yīng)用或插件時(shí)啟用此設(shè)置，以便你可以在這些原生 API 的腳本中搜索，否則啟用它是沒(méi)有用的。

啟用 JS 源映射（source maps）

如果你的代碼是級(jí)聯(lián)的、簡(jiǎn)潔的，當(dāng)你需要調(diào)試很難講什么文件中的一段代碼可能被調(diào)用。啟用此設(shè)置，對(duì)于調(diào)試 JavaScript 和與一般的源映射活動(dòng)是有用的。

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

啟用 CSS 源映射（source maps）

式源映射用于使用預(yù)處理器（例 Sass）生成CSS文件。

有關(guān)詳細(xì)信息，請(qǐng)參閱使用CSS預(yù)處理程序。

自動(dòng)重裝產(chǎn)生CSS

只有啟用了 CSS 源映射才被使用。當(dāng)源文件被保存時(shí)，確定生成 CSS 文件是否應(yīng)該被重新加載。

檢測(cè)縮進(jìn)

指定如何在DevTools編輯代碼時(shí)縮進(jìn)：

• 2 spaces
• 4 spaces
• 8 spaces
• Tab character

顯示空白字符

這將在 Source 面板將空格和制表符顯示為點(diǎn)。

Profiler

高分辨率 CPU 性能分析

使你在 Flame charts 中可以放大到 0.1 ms 進(jìn)行查看。

Console

XMLHttpRequests 日志

在擴(kuò)展顯示具體的要求控制臺(tái)中顯示 XHR 請(qǐng)求的對(duì)象。

Preserve log upon Navigation

當(dāng)通過(guò)一個(gè)站點(diǎn)的多頁(yè)導(dǎo)航，你可以選擇不清除控制臺(tái)日志而在每個(gè)頁(yè)面載入，所以你可以觀察在網(wǎng)頁(yè)的歷史輸出。

注意：這兩種設(shè)置都可以通過(guò)右鍵點(diǎn)擊控制臺(tái)上進(jìn)行更改。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_console-right-click.png" alt="console-right-click.png" />

擴(kuò)展

打開(kāi)鏈接：a panel chosen automatically

工作空間 Workspace

Workspaces 允許你選擇自定義目錄（custom directories ) 中的文件系統(tǒng)，它始終為你提供的 Sources 面板中的編輯。這可以是一個(gè)特定的項(xiàng)目目錄或包含在其內(nèi)多個(gè)不同項(xiàng)目在內(nèi)的目錄。

要使用此功能，在設(shè)置面板中打開(kāi)工作空間選項(xiàng)卡 Workspaces tab。在這里你會(huì)看到一個(gè)添加文件夾鏈接 Add Folder，允許你添加本地目錄來(lái)編輯（如：項(xiàng)目根目錄）。

一旦你添加一個(gè)文件夾目錄，你就可以查看，編輯和保存任何時(shí)候你在 Sources 面板上編輯的文件。所有的文件更改將持續(xù)保存到包含在路徑里的本地文件。

除了為你的工作空間增加一個(gè)文件系統(tǒng)，你也能單獨(dú)添加文件映射到該文件在本地計(jì)算機(jī)上的路徑。