摘要：谷歌Chrome脖隶，是當前最流行且被眾多web開發(fā)人員使用的瀏覽器嗅定。最快六周就更新發(fā)布一次以及伴隨著它不斷強大的開發(fā)組件，使得Chrome成為你必備的開發(fā)工具番捂。例如个唧，在線編輯CSS，console以及debugger這些常用的調試技術设预，或許你已經了解徙歼。
谷歌Chrome，是當前最流行且被眾多web開發(fā)人員使用的瀏覽器鳖枕。最快六周就更新發(fā)布一次以及伴隨著它不斷強大的開發(fā)組件魄梯，使得Chrome成為你必備的開發(fā)工具。例如宾符，在線編輯CSS酿秸，console以及debugger這些常用的調試技術，或許你已經了解吸奴。在本篇文章中允扇，我們將介紹15個炫酷且實用的技巧缠局，這將更快的提高你的開發(fā)效率。
一考润、快速查找文件
如果你使用過Sublime狭园，那么你會知道’Go to anything’的強大。沒錯糊治，Chrome現在也有了這一功能唱矛。
操作如下：
1、F12打開你的Chrome調試器井辜；
2绎谦、按下Ctrl+P（Mac上Cmd + P）;
3、搜索你想打開的文件名即可粥脚。
二窃肠、在源代碼中搜索
但是，如果我們想在整個工程下刷允，查找一段源代碼呢冤留？
操作如下：
1、F12打開你的Chrome調試器树灶；
2纤怒、按下Ctrl+Shift+F（Mac上Cmd+Opt+F）;
3、在輸入框中輸入你想查詢的源代碼天通，回車泊窘，就OK啦。
注：該搜索也支持正則表達式像寒。
三烘豹、跳到指定行
當你在Chrome調試器的sources欄，已經打開了文件萝映，Chrome也允許你跳到指定的行數吴叶，在Windows和Linux系統(tǒng)下，只需按下Ctrl+G（Mac上Cmd+L）序臂，然后輸入你指定的行數即可蚌卤。
另一種，方法就是Ctrl+O奥秆，輸入”:”+行數即可逊彭。
四、在控制臺(Console)中獲取DOM元素
Chrome控制臺构订，提供了方法和變量來快速獲取頁面中的DOM元素侮叮，如下：
1、$()—就是document.querySelector()原生方法的映射悼瘾。功能嘛囊榜，就是獲取并返回第一個與填寫的CSS屬性匹配的DOM元素审胸，如$(‘div’)就會返回第一個出現在頁面中的div元素。
2卸勺、$$()—就是document.querySelectorAll()原生方法的映射砂沛。功能嘛，就是獲取并返回一個數組曙求，數組中包含了所有與你填寫的CSS屬性匹配的DOM元素碍庵。
3、$0--$4—代表你在Chrome調試器中操作不同DOM元素的歷史記錄悟狱，且最多記錄5次静浴，故而只有$0-$4這五個變量。$0代表最近一次挤渐，依次類推苹享。
五、多光標
另一個牛逼的功能就是多光標挣菲。
當你想在呈現的文件中多處操作代碼時富稻，你可以通過按住Ctrl（Mac上Cmd），然后鼠標點擊白胀，你想要出現的光標處即可。
六抚岗、保存日志
在console面板上勾選‘保存日志’選項媳禁，則不會在你每次加載頁面時负蠕，清空日志。當你想要調查頁面關閉前的bugs時，可要記住這一選項哦转晰。
七、格式化代碼
Chrome通過其內置的優(yōu)化器竹椒，幫助你提高文件內容的可讀性嘉赎。對于壓縮過或者雜亂的代碼，尤為適用亩冬。
怎么實現呢艘希？
操作如下：
1、F12打開Chrome開發(fā)工具硅急；
2覆享、選擇你想要閱讀的文件；
3营袜、點擊文件下方的”{ }”狀按鈕即可撒顿。
九、設備模擬器
另一個十分酷炫的功能就是荚板，模擬移動設備端凤壁。
例如我們可以通過Chrome模擬人為觸摸屏幕和晃動設備吩屹。你甚至可以通過它改變你的地理位置哦。
操作如下：
1拧抖、F12打開Chrome調試器煤搜；
2、在調試器底部選中Emulation選項徙鱼；
3宅楞、最后在Emulation面板中，左側選中Sensors即可袱吆。
十厌衙、顏色選擇器
當你調用了Chrome的顏色選擇器后，你可以通過你的鼠標绞绒，懸浮在網頁中的任意處婶希，獲取顏色，它會十分精準地將其轉換成對應的編碼格式蓬衡。
是不是很炫酷喻杈？
操作如下：
1、F12打開Chrome調試器狰晚；
2筒饰、選中目標元素；
3壁晒、在樣式編輯器中瓷们，點擊顏色預覽，就會出現這個顏色選擇器秒咐。
十一谬晕、強制改變元素狀態(tài)
Chrome開發(fā)工具有一個強制改變元素CSS狀態(tài)的功能，如:hover和:focus携取。對于CSSer比較方便攒钳。
十二、可視化“隱藏的DOM”
Web瀏覽器在構建例如textbox雷滋，button以及input這些元素時不撑，通常會隱藏在其之下的展現層元素。
但是惊豺，我們可以通過Setting à General燎孟，在General面板中選中’Show user agent shadow DOM’這一選項，來展示這些被隱藏掉的基礎元素尸昧。
你甚至可以單獨地去設置它們的樣式揩页。
十三、選中下一個匹配項
當你選中一個匹配項后，利用Ctrl+D（Mac上Cmd+D）爆侣，就會將下一個相同的匹配項也選中萍程，該功能可以幫助你同時編輯它們。
十四兔仰、 改變顏色格式
在顏色預覽中茫负，通過Shift + 鼠標點擊，就可以在rgba,hsl和hexadecimal三種格式中乎赴，來回切換忍法。
十五、利用Chrome的工作空間榕吼，編輯本地文件
Chrome的工作空間饿序，也是非常強大的，它可以直接編輯和保存你的本地文件羹蚣，無需額外的操作原探，例如復制、粘貼顽素。怎么配置它呢咽弦？
操作如下：
1、F12打開Chrome調試器
2胁出、找到Sources欄型型，出現在左側的控制面板，點擊鼠標右鍵全蝶，選擇Add Folder To Workspace输莺。或者裸诽，直接將你整個工程文件夾，拖拽到調試器中型凳。
這樣操作后丈冬，不管你打開哪個頁面，都會出現剛才你操作的文件甘畅。為了更加有用埂蕊，你可以將頁面中用到的文件映射到相應的文件夾，允許在線編輯和簡單的保存疏唾。
原文：15 Must-Know Chrome DevTools Tips and Tricks
http://www.cnblogs.com/giggle/p/5966991.html
本文為云棲社區(qū)原創(chuàng)內容蓄氧，未經允許不得轉載，如需轉載請發(fā)送郵件至yqeditor@list.alibaba-inc.com槐脏；如果您發(fā)現本社區(qū)中有涉嫌抄襲的內容喉童，歡迎發(fā)送郵件至：yqgroup@service.aliyun.com 進行舉報，并提供相關證據顿天，一經查實堂氯，本社區(qū)將立刻刪除涉嫌侵權內容蔑担。
