Google Chrome 在日常生活中扮演的角色不只是一個(gè)功能強(qiáng)大的網(wǎng)絡(luò)瀏覽器，它內(nèi)置的 DevTools 同樣也是網(wǎng)絡(luò)開(kāi)發(fā)者進(jìn)行網(wǎng)絡(luò)開(kāi)發(fā)的重要工具。

DevTools 在不斷的進(jìn)行版本更新，其中有很多重要的更新細(xì)節(jié)你可能會(huì)錯(cuò)過(guò)。在這里羅列了 Google Chrome 最值得關(guān)注的七大新特性。

開(kāi)始——Chrome 的 DevTools Experiment

Chrome 有一些非常棒的實(shí)驗(yàn)性特性，這些特性在默認(rèn)情況下都是隱藏和禁用的。在瀏覽器地址欄輸入chrome://flags/#enable-devtools-experiments可以激活 DevTool Experiment 選項(xiàng)，在激活后重啟瀏覽器。

重啟后，啟動(dòng) DevTools，點(diǎn)擊齒輪圖標(biāo)移的右上角 DevTools 面板，你可以在左邊欄看到“Experiment（實(shí)驗(yàn)）” 選項(xiàng)，在這里你可以選擇任何一個(gè)想要激活的特性。

1. 改進(jìn)移動(dòng)設(shè)備模擬器

在移動(dòng)設(shè)備高度普及的今天，網(wǎng)站的一個(gè)必備功能就是進(jìn)行移動(dòng)設(shè)備的優(yōu)化。使用 Chrome 瀏覽器，你可以通過(guò)手機(jī)模擬器功能調(diào)試網(wǎng)站在移動(dòng)模式的應(yīng)用，這個(gè)模擬器已經(jīng)被完全修改并增加了許多新特性。

啟動(dòng) DevTools 并點(diǎn)擊移動(dòng)設(shè)備圖標(biāo)然后點(diǎn)擊 loop/search（循環(huán)/搜索），打開(kāi)移動(dòng)設(shè)備模擬器，截圖如上所示。正如你所看到的，上面的模擬器已經(jīng)配備了標(biāo)尺，因此你可以清楚看到網(wǎng)站視窗的尺寸大小。

2. 鼠標(biāo)的復(fù)選

你想擁有在一個(gè)源文件里同時(shí)選擇編輯多個(gè)不同主題的功能？Chrome 現(xiàn)在支持鼠標(biāo)的復(fù)選。使用 Ctrl + 點(diǎn)擊或者 Cmd+ 點(diǎn)擊可以一次性選擇多個(gè)。

3. 限制網(wǎng)絡(luò)連接

現(xiàn)在你可以通過(guò) DevTools 測(cè)試在不同連接下網(wǎng)站的響應(yīng)和性能。在 DevTools 中，點(diǎn)擊 Esc 啟動(dòng) Console Drawer 然后選擇 Emulation。在網(wǎng)絡(luò)選項(xiàng)上，選擇限制網(wǎng)絡(luò)連接的速度類型，然后你就可以看到網(wǎng)站在執(zhí)行選定的速度的情況下的表現(xiàn)了。

4. 脫機(jī)模式

Google Chrome 現(xiàn)在增加了脫機(jī)模式，它允許你在沒(méi)有網(wǎng)絡(luò)連接的情況下打開(kāi)網(wǎng)站。如果你在進(jìn)行網(wǎng)絡(luò)開(kāi)發(fā)，想要用戶在沒(méi)有網(wǎng)絡(luò)的情況下也能打開(kāi)網(wǎng)站，那么這無(wú)疑是一個(gè)很有用的功能。通過(guò)在瀏覽器地址欄輸入chrome://flags/#enable-offline-mode，啟用“激活離線緩存模式”可以開(kāi)啟離線模式。

不要忘記重啟 Chrome 瀏覽器使設(shè)置生效。

5. 可將 HTML 拖放到編輯器

有時(shí)你需要復(fù)制你的 HTML 元素到編輯器。取代手動(dòng)復(fù)制和粘貼到編輯器，現(xiàn)在你可以更加便捷地拖動(dòng) DOM（文本對(duì)象模型）并將其放置進(jìn)編輯器內(nèi)想要的位置。

目前，你只能拖動(dòng)一個(gè)元素，而且它的子元素不會(huì)被一并拖動(dòng)過(guò)來(lái)。這方面的缺陷可能會(huì)在以后的版本里得到改善。

6. CSS 審核

現(xiàn)在你可以對(duì)你的 CSS 進(jìn)行審核，比如檢查沒(méi)有在 web 頁(yè)面使用的無(wú)用的樣式規(guī)則。在“Audits”（審核）選項(xiàng)，點(diǎn)擊“Run”（運(yùn)行）按鈕，你將會(huì)看到一個(gè)目前在該頁(yè)面沒(méi)有使用到的類/選擇器的列表，如下圖所示：

7. 增加 SourceMap

使用 SourceMap，你可以看到未創(chuàng)建或未編譯的 CSS 或 JavaScript (JS）版本。此功能對(duì)于那些在創(chuàng)作風(fēng)格或者腳本語(yǔ)言上使用 Sass、 LESS 或者 CoffeeScript 作為預(yù)處理器的開(kāi)發(fā)者來(lái)說(shuō)是非常有用的。啟用 SourceMap，你可以通過(guò)某行某列的具體數(shù)字找到生成的 JS 或 CSS 的代碼位置。最新版本的 Chrome 允許你手動(dòng)添加 SourceMap。

要做到這一點(diǎn)的話，首先你要確保處于源面板，接著打開(kāi)一個(gè)文件，在那之后右鍵單擊并選擇 Add Source Map. 添加到 .map 文件。

原文來(lái)自：evget

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。