Google Chrome 在日常生活中扮演的角色不只是一個功能強大的網路瀏覽器，它內建的 DevTools 同樣也是網路開發者進行網路開發的重要工具。

DevTools 在不斷的進行版本更新，其中有很多重要的更新細節你可能會錯過。在這裡羅列了 Google Chrome 最值得關注的七大新特性。

開始——Chrome 的 DevTools Experiment

Chrome 有一些非常棒的實驗性特性，這些特性在預設情況下都是隱藏和禁用的。在瀏覽器位址列輸入chrome://flags/#enable-devtools-experiments可以啟用 DevTool Experiment 選項，在啟用後重啟瀏覽器。

重啟後，啟動 DevTools，點選齒輪圖示移的右上角 DevTools 面板，你可以在左邊欄看到“Experiment（實驗）” 選項，在這裡你可以選擇任何一個想要啟用的特性。

1. 改進移動裝置模擬器

在移動裝置高度普及的今天，網站的一個必備功能就是進行移動裝置的優化。使用 Chrome 瀏覽器，你可以通過手機模擬器功能除錯網站在移動模式的應用，這個模擬器已經被完全修改並增加了許多新特性。

啟動 DevTools 並點選移動裝置圖示然後點選 loop/search（迴圈/搜尋），開啟移動裝置模擬器，截圖如上所示。正如你所看到的，上面的模擬器已經配備了標尺，因此你可以清楚看到網站視窗的尺寸大小。

2. 滑鼠的複選

你想擁有在一個原始檔裡同時選擇編輯多個不同主題的功能？Chrome 現在支援滑鼠的複選。使用 Ctrl + 點選或者 Cmd+ 點選可以一次性選擇多個。

3. 限制網路連線

現在你可以通過 DevTools 測試在不同連線下網站的響應和效能。在 DevTools 中，點選 Esc 啟動 Console Drawer 然後選擇 Emulation。在網路選項上，選擇限制網路連線的速度型別，然後你就可以看到網站在執行選定的速度的情況下的表現了。

4. 離線模式

Google Chrome 現在增加了離線模式，它允許你在沒有網路連線的情況下開啟網站。如果你在進行網路開發，想要使用者在沒有網路的情況下也能開啟網站，那麼這無疑是一個很有用的功能。通過在瀏覽器位址列輸入chrome://flags/#enable-offline-mode

不要忘記重啟 Chrome 瀏覽器使設定生效。

5. 可將 HTML 拖放到編輯器

有時你需要複製你的 HTML 元素到編輯器。取代手動複製和貼上到編輯器，現在你可以更加便捷地拖動 DOM（文字物件模型）並將其放置進編輯器內想要的位置。

目前，你只能拖動一個元素，而且它的子元素不會被一併拖動過來。這方面的缺陷可能會在以後的版本里得到改善。

6. CSS 稽核

現在你可以對你的 CSS 進行稽核，比如檢查沒有在 web 頁面使用的無用的樣式規則。在“Audits”（稽核）選項，點選“Run”（執行）按鈕，你將會看到一個目前在該頁面沒有使用到的類/選擇器的列表，如下圖所示：

7. 增加 SourceMap

使用 SourceMap，你可以看到未建立或未編譯的 CSS 或 JavaScript (JS）版本。此功能對於那些在創作風格或者指令碼語言上使用 Sass、 LESS 或者 CoffeeScript 作為前處理器的開發者來說是非常有用的。啟用 SourceMap，你可以通過某行某列的具體數字找到生成的 JS 或 CSS 的程式碼位置。最新版本的 Chrome 允許你手動新增 SourceMap。

要做到這一點的話，首先你要確保處於源面板，接著開啟一個檔案，在那之後右鍵單擊並選擇 Add Source Map. 新增到 .map 檔案。