[譯]15個關於Chrome的開發必備小技巧

摘要：

谷歌Chrome，是當前最流行且被衆多web開發人員使用的瀏覽器。最快六週就更新發布一次以及伴隨着它不斷強大的開發組件，使得Chrome成爲你必備的開發工具。例如，在線編輯CSS，console以及debugger這些經常使用的調試技術，或許你已經瞭解。

谷歌Chrome，是當前最流行且被衆多web開發人員使用的瀏覽器。最快六週就更新發布一次以及伴隨着它不斷強大的開發組件，使得Chrome成爲你必備的開發工具。例如，在線編輯CSS，console以及debugger這些經常使用的調試技術，或許你已經瞭解。在本篇文章中，咱們將介紹15個炫酷且實用的技巧，這將更快的提升你的開發效率。

1、快速查找文件

若是你使用過Sublime，那麼你會知道’Go to anything’的強大。沒錯，Chrome如今也有了這一功能。

操做以下：

一、

F12打開你的Chrome調試器；

二、

按下Ctrl+P（Mac上Cmd + P）;

三、

搜索你想打開的文件名便可。

2、在源代碼中搜索

可是，若是咱們想在整個工程下，查找一段源代碼呢？

操做以下：

一、

F12打開你的Chrome調試器；

二、

按下Ctrl+Shift+F（Mac上Cmd+Opt+F）;

三、

在輸入框中輸入你想查詢的源代碼，回車，就OK啦。

注：該搜索也支持正則表達式。

3、跳到指定行

當你在Chrome調試器的sources欄，已經打開了文件，Chrome也容許你跳到指定的行數，在Windows和Linux系統下，只需按下Ctrl+G（Mac上Cmd+L），而後輸入你指定的行數便可。

另外一種，方法就是Ctrl+O，輸入」:」+行數便可。

4、在控制檯(Console)中獲取DOM元素

Chrome控制檯，提供了方法和變量來快速獲取頁面中的DOM元素，以下：

一、

$()—就是document.querySelector()原生方法的映射。功能嘛，就是獲取並返回第一個與填寫的CSS屬性匹配的DOM元素，如$(‘div’)就會返回第一個出如今頁面中的div元素。

二、

$$()—就是document.querySelectorAll()原生方法的映射。功能嘛，就是獲取並返回一個數組，數組中包含了全部與你填寫的CSS屬性匹配的DOM元素。

三、

$0--$4—表明你在Chrome調試器中操做不一樣DOM元素的歷史記錄，且最多記錄5次，故而只有$0-$4這五個變量。$0表明最近一次，依次類推。

5、多光標

另外一個牛逼的功能就是多光標。

當你想在呈現的文件中多處操做代碼時，你能夠經過按住Ctrl（Mac上Cmd），而後鼠標點擊，你想要出現的光標處便可。

6、保存日誌

在console面板上勾選‘保存日誌’選項，則不會在你每次加載頁面時，清空日誌。當你想要調查頁面關閉前的bugs時，可要記住這一選項哦。

7、格式化代碼

Chrome經過其內置的優化器，幫助你提升文件內容的可讀性。對於壓縮過或者雜亂的代碼，尤其適用。

怎麼實現呢？

操做以下：

一、

F12打開Chrome開發工具；

二、

選擇你想要閱讀的文件；

三、

點擊文件下方的」{ }」狀按鈕便可。

9、設備模擬器

另外一個十分酷炫的功能就是，模擬移動設備端。

例如咱們能夠經過Chrome模擬人爲觸摸屏幕和晃動設備。你甚至能夠經過它改變你的地理位置哦。

操做以下：

一、

F12打開Chrome調試器；

二、

在調試器底部選中Emulation選項；

三、

最後在Emulation面板中，左側選中Sensors便可。

10、顏色選擇器

當你調用了Chrome的顏色選擇器後，你能夠經過你的鼠標，懸浮在網頁中的任意處，獲取顏色，它會十分精準地將其轉換成對應的編碼格式。

是否是很炫酷？

操做以下：

一、

F12打開Chrome調試器；

二、

選中目標元素；

三、

在樣式編輯器中，點擊顏色預覽，就會出現這個顏色選擇器。

11、強制改變元素狀態

Chrome開發工具備一個強制改變元素CSS狀態的功能，如:hover和:focus。對於CSSer比較方便。

12、可視化「隱藏的DOM」

Web瀏覽器在構建例如textbox，button以及input這些元素時，一般會隱藏在其之下的展示層元素。

可是，咱們能夠經過Setting à General，在General面板中選中’Show user agent shadow DOM’這一選項，來展現這些被隱藏掉的基礎元素。

你甚至能夠單獨地去設置它們的樣式。

十3、選中下一個匹配項

當你選中一個匹配項後，利用Ctrl+D（Mac上Cmd+D），就會將下一個相同的匹配項也選中，該功能能夠幫助你同時編輯它們。

十4、 改變顏色格式

在顏色預覽中，經過Shift + 鼠標點擊，就能夠在rgba,hsl和hexadecimal三種格式中，來回切換。

十5、利用Chrome的工做空間，編輯本地文件

Chrome的工做空間，也是很是強大的，它能夠直接編輯和保存你的本地文件，無需額外的操做，例如複製、粘貼。怎麼配置它呢？

操做以下：

一、

F12打開Chrome調試器

二、

找到Sources欄，出如今左側的控制面板，點擊鼠標右鍵，選擇Add Folder To Workspace。或者，直接將你整個工程文件夾，拖拽到調試器中。

這樣操做後，無論你打開哪一個頁面，都會出現剛纔你操做的文件。爲了更加有用，你能夠將頁面中用到的文件映射到相應的文件夾，容許在線編輯和簡單的保存。

原文：15 Must-Know Chrome DevTools Tips and Tricks

www.cnblogs.com/giggle/p/59…

本文爲雲棲社區原創內容，未經容許不得轉載，如需轉載請發送郵件至yqeditor@list.alibaba-inc.com；若是您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：yqgroup@service.aliyun.com 進行舉報，並提供相關證據，一經查實，本社區將馬上刪除涉嫌侵權內容。

原文連接