Google Chrome 在日常生活中扮演的角色不只是一個功能強大的網(wǎng)絡瀏覽器，它內(nèi)置的 DevTools 同樣也是網(wǎng)絡開發(fā)者進行網(wǎng)絡開發(fā)的重要工具。
DevTools 在不斷的進行版本更新，其中有很多重要的更新細節(jié)你可能會錯過。在這里羅列了 Google Chrome 最值得關(guān)注的七大新特性。
開始——Chrome 的 DevTools Experiment
Chrome 有一些非常棒的實驗性特性，這些特性在默認情況下都是隱藏和禁用的。在瀏覽器地址欄輸入chrome://flags/#enable-devtools-experiments可以激活 DevTool Experiment 選項，在激活后重啟瀏覽器。
重啟后，啟動 DevTools，點擊齒輪圖標移的右上角 DevTools 面板，你可以在左邊欄看到“Experiment（實驗）” 選項，在這里你可以選擇任何一個想要激活的特性。
1. 改進移動設備模擬器
在移動設備高度普及的今天，網(wǎng)站的一個必備功能就是進行移動設備的優(yōu)化。使用 Chrome 瀏覽器，你可以通過手機模擬器功能調(diào)試網(wǎng)站在移動模式的應用，這個模擬器已經(jīng)被完全修改并增加了許多新特性。
啟動 DevTools 并點擊移動設備圖標然后點擊 loop/search（循環(huán)/搜索），打開移動設備模擬器，截圖如上所示。正如你所看到的，上面的模擬器已經(jīng)配備了標尺，因此你可以清楚看到網(wǎng)站視窗的尺寸大小。
2. 鼠標的復選
你想擁有在一個源文件里同時選擇編輯多個不同主題的功能？Chrome 現(xiàn)在支持鼠標的復選。使用 Ctrl + 點擊或者 Cmd+ 點擊可以一次性選擇多個。
3. 限制網(wǎng)絡連接
現(xiàn)在你可以通過 DevTools 測試在不同連接下網(wǎng)站的響應和性能。在 DevTools 中，點擊 Esc 啟動 Console Drawer 然后選擇 Emulation。在網(wǎng)絡選項上，選擇限制網(wǎng)絡連接的速度類型，然后你就可以看到網(wǎng)站在執(zhí)行選定的速度的情況下的表現(xiàn)了。
4. 脫機模式
Google Chrome 現(xiàn)在增加了脫機模式，它允許你在沒有網(wǎng)絡連接的情況下打開網(wǎng)站。如果你在進行網(wǎng)絡開發(fā)，想要用戶在沒有網(wǎng)絡的情況下也能打開網(wǎng)站，那么這無疑是一個很有用的功能。通過在瀏覽器地址欄輸入chrome://flags/#enable-offline-mode，啟用“激活離線緩存模式”可以開啟離線模式。
不要忘記重啟 Chrome 瀏覽器使設置生效。
5. 可將 HTML 拖放到編輯器
有時你需要復制你的 HTML 元素到編輯器。取代手動復制和粘貼到編輯器，現(xiàn)在你可以更加便捷地拖動 DOM（文本對象模型）并將其放置進編輯器內(nèi)想要的位置。
目前，你只能拖動一個元素，而且它的子元素不會被一并拖動過來。這方面的缺陷可能會在以后的版本里得到改善。
6. CSS 審核
現(xiàn)在你可以對你的 CSS 進行審核，比如檢查沒有在 web 頁面使用的無用的樣式規(guī)則。在“Audits”（審核）選項，點擊“Run”（運行）按鈕，你將會看到一個目前在該頁面沒有使用到的類/選擇器的列表，如下圖所示：
7. 增加 SourceMap
使用 SourceMap，你可以看到未創(chuàng)建或未編譯的 CSS 或 JavaScript (JS）版本。此功能對于那些在創(chuàng)作風格或者腳本語言上使用 Sass、 LESS 或者 CoffeeScript 作為預處理器的開發(fā)者來說是非常有用的。啟用 SourceMap，你可以通過某行某列的具體數(shù)字找到生成的 JS 或 CSS 的代碼位置。最新版本的 Chrome 允許你手動添加 SourceMap。
要做到這一點的話，首先你要確保處于源面板，接著打開一個文件，在那之后右鍵單擊并選擇 Add Source Map. 添加到 .map 文件。