Chrome開發(fā)工具 設(shè)置

Settings

修改 DevTools 中的設(shè)置

• 點擊設(shè)置齒輪 ，打開 General Settings 面板進行修改?；蛘?，也可以使用快捷鍵 ？ 打開 Setting 窗格。

通用設(shè)置

禁用緩存

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

禁用 JavaScript

當使用這個檢查，立即暫停所有注入在有 DevTools 實例的標簽上的JavaScript 代碼。

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

使用 Ctr + 1-9 快捷鍵來切換面板

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

注意：啟用這個可能會導(dǎo)致與其他應(yīng)用程序的快捷鍵發(fā)生沖突。

界面（Appearance)

當它停向右邊垂直拆分面板

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

元素（Elements）

顏色格式

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

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

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

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

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

用戶代理 (user agent) 是指瀏覽器。每個瀏覽器實現(xiàn)了一個默認的樣式表，包括基本的風(fēng)格規(guī)則，在頁面中應(yīng)用到 DOM 元素。如果你曾經(jīng)很難去除兩個元素之間的空白，例如，它可能是因為用戶代理樣式表添加了默認 margin 或 padding 指向特定類型的元素的。

自動換行

正如任何文本編輯器，你可以在元素面板中選擇性的對長行的代碼進行換行。

顯示陰影（Shadow) DOM

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

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

顯示直尺

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

源面板（Sources）

內(nèi)容腳本搜索

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

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

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

啟用 JS 源映射（source maps）

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

啟用 CSS 源映射（source maps）

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

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

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

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

檢測縮進

指定如何在DevTools編輯代碼時縮進：

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

顯示空白字符

這將在 Source 面板將空格和制表符顯示為點。

Profiler

高分辨率 CPU 性能分析

使你在 Flame charts 中可以放大到 0.1 ms 進行查看。

Console

XMLHttpRequests 日志

在擴展顯示具體的要求控制臺中顯示 XHR 請求的對象。

Preserve log upon Navigation

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

注意：這兩種設(shè)置都可以通過右鍵點擊控制臺上進行更改。

擴展

打開鏈接：a panel chosen automatically

工作空間 Workspace

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

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

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

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