摘要：谷歌Chrome，是當(dāng)前最流行且被眾多web開發(fā)人員使用的瀏覽器。最快六周就更新發(fā)布一次以及伴隨著它不斷強(qiáng)大的開發(fā)組件，使得Chrome成為你必備的開發(fā)工具。例如，在線編輯CSS，console以及debugger這些常用的調(diào)試技術(shù)，或許你已經(jīng)了解。
谷歌Chrome，是當(dāng)前最流行且被眾多web開發(fā)人員使用的瀏覽器。最快六周就更新發(fā)布一次以及伴隨著它不斷強(qiáng)大的開發(fā)組件，使得Chrome成為你必備的開發(fā)工具。例如，在線編輯CSS，console以及debugger這些常用的調(diào)試技術(shù)，或許你已經(jīng)了解。在本篇文章中，我們將介紹15個炫酷且實(shí)用的技巧，這將更快的提高你的開發(fā)效率。
一、快速查找文件
如果你使用過Sublime，那么你會知道’Go to anything’的強(qiáng)大。沒錯，Chrome現(xiàn)在也有了這一功能。
操作如下：
1、F12打開你的Chrome調(diào)試器；
2、按下Ctrl+P（Mac上Cmd + P）;
3、搜索你想打開的文件名即可。
二、在源代碼中搜索
但是，如果我們想在整個工程下，查找一段源代碼呢？
操作如下：
1、F12打開你的Chrome調(diào)試器；
2、按下Ctrl+Shift+F（Mac上Cmd+Opt+F）;
3、在輸入框中輸入你想查詢的源代碼，回車，就OK啦。
注：該搜索也支持正則表達(dá)式。
三、跳到指定行
當(dāng)你在Chrome調(diào)試器的sources欄，已經(jīng)打開了文件，Chrome也允許你跳到指定的行數(shù)，在Windows和Linux系統(tǒng)下，只需按下Ctrl+G（Mac上Cmd+L），然后輸入你指定的行數(shù)即可。
另一種，方法就是Ctrl+O，輸入”:”+行數(shù)即可。
四、在控制臺(Console)中獲取DOM元素
Chrome控制臺，提供了方法和變量來快速獲取頁面中的DOM元素，如下：
1、$()—就是document.querySelector()原生方法的映射。功能嘛，就是獲取并返回第一個與填寫的CSS屬性匹配的DOM元素，如$(‘div’)就會返回第一個出現(xiàn)在頁面中的div元素。
2、$$()—就是document.querySelectorAll()原生方法的映射。功能嘛，就是獲取并返回一個數(shù)組，數(shù)組中包含了所有與你填寫的CSS屬性匹配的DOM元素。
3、$0--$4—代表你在Chrome調(diào)試器中操作不同DOM元素的歷史記錄，且最多記錄5次，故而只有$0-$4這五個變量。$0代表最近一次，依次類推。
五、多光標(biāo)
另一個牛逼的功能就是多光標(biāo)。
當(dāng)你想在呈現(xiàn)的文件中多處操作代碼時(shí)，你可以通過按住Ctrl（Mac上Cmd），然后鼠標(biāo)點(diǎn)擊，你想要出現(xiàn)的光標(biāo)處即可。
六、保存日志
在console面板上勾選‘保存日志’選項(xiàng)，則不會在你每次加載頁面時(shí)，清空日志。當(dāng)你想要調(diào)查頁面關(guān)閉前的bugs時(shí)，可要記住這一選項(xiàng)哦。
七、格式化代碼
Chrome通過其內(nèi)置的優(yōu)化器，幫助你提高文件內(nèi)容的可讀性。對于壓縮過或者雜亂的代碼，尤為適用。
怎么實(shí)現(xiàn)呢？
操作如下：
1、F12打開Chrome開發(fā)工具；
2、選擇你想要閱讀的文件；
3、點(diǎn)擊文件下方的”{ }”狀按鈕即可。
九、設(shè)備模擬器
另一個十分酷炫的功能就是，模擬移動設(shè)備端。
例如我們可以通過Chrome模擬人為觸摸屏幕和晃動設(shè)備。你甚至可以通過它改變你的地理位置哦。
操作如下：
1、F12打開Chrome調(diào)試器；
2、在調(diào)試器底部選中Emulation選項(xiàng)；
3、最后在Emulation面板中，左側(cè)選中Sensors即可。
十、顏色選擇器
當(dāng)你調(diào)用了Chrome的顏色選擇器后，你可以通過你的鼠標(biāo)，懸浮在網(wǎng)頁中的任意處，獲取顏色，它會十分精準(zhǔn)地將其轉(zhuǎn)換成對應(yīng)的編碼格式。
是不是很炫酷？
操作如下：
1、F12打開Chrome調(diào)試器；
2、選中目標(biāo)元素；
3、在樣式編輯器中，點(diǎn)擊顏色預(yù)覽，就會出現(xiàn)這個顏色選擇器。
十一、強(qiáng)制改變元素狀態(tài)
Chrome開發(fā)工具有一個強(qiáng)制改變元素CSS狀態(tài)的功能，如:hover和:focus。對于CSSer比較方便。
十二、可視化“隱藏的DOM”
Web瀏覽器在構(gòu)建例如textbox，button以及input這些元素時(shí)，通常會隱藏在其之下的展現(xiàn)層元素。
但是，我們可以通過Setting à General，在General面板中選中’Show user agent shadow DOM’這一選項(xiàng)，來展示這些被隱藏掉的基礎(chǔ)元素。
你甚至可以單獨(dú)地去設(shè)置它們的樣式。
十三、選中下一個匹配項(xiàng)
當(dāng)你選中一個匹配項(xiàng)后，利用Ctrl+D（Mac上Cmd+D），就會將下一個相同的匹配項(xiàng)也選中，該功能可以幫助你同時(shí)編輯它們。
十四、 改變顏色格式
在顏色預(yù)覽中，通過Shift + 鼠標(biāo)點(diǎn)擊，就可以在rgba,hsl和hexadecimal三種格式中，來回切換。
十五、利用Chrome的工作空間，編輯本地文件
Chrome的工作空間，也是非常強(qiáng)大的，它可以直接編輯和保存你的本地文件，無需額外的操作，例如復(fù)制、粘貼。怎么配置它呢？
操作如下：
1、F12打開Chrome調(diào)試器
2、找到Sources欄，出現(xiàn)在左側(cè)的控制面板，點(diǎn)擊鼠標(biāo)右鍵，選擇Add Folder To Workspace。或者，直接將你整個工程文件夾，拖拽到調(diào)試器中。
這樣操作后，不管你打開哪個頁面，都會出現(xiàn)剛才你操作的文件。為了更加有用，你可以將頁面中用到的文件映射到相應(yīng)的文件夾，允許在線編輯和簡單的保存。
原文：15 Must-Know Chrome DevTools Tips and Tricks
http://www.cnblogs.com/giggle/p/5966991.html
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載，如需轉(zhuǎn)載請發(fā)送郵件至yqeditor@list.alibaba-inc.com；如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，歡迎發(fā)送郵件至：yqgroup@service.aliyun.com 進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。
