在 Web 開發(fā)者中，Google Chrome 是使用最廣泛的瀏覽器。六周一次的發(fā)布周期和一套強(qiáng)大的不斷擴(kuò)大開發(fā)功能，使其成為了 web 開發(fā)者必備的工具。你可能已經(jīng)熟悉了它的部分功能，如使用 console 和 debugger 在線編輯 CSS。在這篇文章中，我們將分享 15 個(gè)有助于改進(jìn)你的開發(fā)流程的技巧。
一、快速切換文件
如果你使用過 sublime text，那么你可能不習(xí)慣沒有 Go to anything 這個(gè)功能的覆蓋。你會(huì)很高興聽到 chrome 開發(fā)者功能也有這個(gè)功能，當(dāng) DevTools 被打開的時(shí)候，按 Ctrl+P（cmd+p on mac）, 就能快速搜尋和打開你項(xiàng)目的文件。
二、在源代碼中搜索
如果你希望在源代碼中搜索要怎么辦呢？在頁面已經(jīng)加載的文件中搜尋一個(gè)特定的字符串，快捷鍵是 Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支持正則表達(dá)式哦
三、快速跳轉(zhuǎn)到指定行
在 Sources 標(biāo)簽中打開一個(gè)文件之后，在 Windows 和 Linux 中，按 Ctrl + G，(or Cmd + L for Mac)，然后輸入行號(hào)，DevTools 就會(huì)允許你跳轉(zhuǎn)到文件中的任意一行。
另外一種方式是按 Ctrl + O，輸入: 和行數(shù)，而不用去尋找一個(gè)文件。
四、在控制臺(tái)選擇元素
DevTools 控制臺(tái)支持一些變量和函數(shù)來選擇 DOM 元素：
(‘div’) 返回這個(gè)頁面中第一個(gè) div 元素
$$()–document.querySelectorAll() 的簡寫，返回一個(gè)和 css 選擇器匹配的元素?cái)?shù)組。
4–依次返回五個(gè)最近你在元素面板選擇過的 DOM 元素的歷史記錄，$0 是最新的記錄，以此類推。
想要了解更多控制臺(tái)命令，戳這里：Command Line API
五、使用多個(gè)插入符進(jìn)行選擇
當(dāng)編輯一個(gè)文件的時(shí)候，你可以按住 Ctrl（cmd for mac），在你要編輯的地方點(diǎn)擊鼠標(biāo)，可以設(shè)置多個(gè)插入符，這樣可以一次在多個(gè)地方編輯。
六、保存記錄
勾選在 Console 標(biāo)簽下的保存記錄選項(xiàng)，你可以使 DevTools 的 console 繼續(xù)保存記錄而不會(huì)在每個(gè)頁面加載之后清除記錄。當(dāng)你想要研究在頁面還沒加載完之前出現(xiàn)的 bug 時(shí)，這會(huì)是一個(gè)很方便的方法。
七、優(yōu)質(zhì)打印
Chrome’s Developer Tools 有內(nèi)建的美化代碼，可以返回一段最小化且格式易讀的代碼。Pretty Print 的按鈕在 Sources 標(biāo)簽的左下角。
八、設(shè)備模式
對(duì)于開發(fā)移動(dòng)友好頁面，DevTools 包含了一個(gè)非常強(qiáng)大的模式，這個(gè)谷歌視頻介紹了其主要特點(diǎn)，如調(diào)整屏幕大小、觸摸仿真和模擬糟糕的網(wǎng)絡(luò)連接
（ps: 原文中這個(gè)視頻文件丟失了，這個(gè)圖是小編補(bǔ)充，你可以自己去測試這個(gè)工具，很有用）
九、設(shè)備傳感仿真
設(shè)備模式的另一個(gè)很酷的功能是模擬移動(dòng)設(shè)備的傳感器，例如觸摸屏幕和加速計(jì)。你甚至可以惡搞你的地理位置。這個(gè)功能位于元素標(biāo)簽的底部，點(diǎn)擊 “show drawer” 按鈕，就可看見 Emulation 標(biāo)簽 --> Sensors.
十、顏色選擇器
當(dāng)在樣式編輯中選擇了一個(gè)顏色屬性時(shí)，你可以點(diǎn)擊顏色預(yù)覽，就會(huì)彈出一個(gè)顏色選擇器。當(dāng)選擇器開啟時(shí)，如果你停留在頁面，鼠標(biāo)指針會(huì)變成一個(gè)放大鏡，讓你去選擇像素精度的顏色。
十一、強(qiáng)制改變元素狀態(tài)
DevTools 有一個(gè)可以模擬 CSS 狀態(tài)的功能，例如元素的 hover 和 focus, 可以很容易的改變元素樣式。在 CSS 編輯器中可以利用這個(gè)功能
十二、可視化的 DOM 陰影
Web 瀏覽器在構(gòu)建如文本框、按鈕和輸入框一類元素時(shí)，其它基本元素的視圖是隱藏的。不過，你可以在 Settings -> General 中切換成 Show user agent shadow DOM，這樣就會(huì)在元素標(biāo)簽頁中顯示被隱藏的代碼。甚至還能單獨(dú)設(shè)計(jì)他們的樣式，這給你了很大的控制權(quán)。
十三、選擇下一個(gè)匹配項(xiàng)
當(dāng)在 Sources 標(biāo)簽下編輯文件時(shí)，按下 Ctrl + D (Cmd + D) ，當(dāng)前選中的單詞的下一個(gè)匹配也會(huì)被選中，有利于你同時(shí)對(duì)它們進(jìn)行編輯。
十四、改變顏色格式
在顏色預(yù)覽功能使用快捷鍵 Shift + Click，可以在 rgba、hsl 和 hexadecimal 來回切換顏色的格式
十五、通過 workspaces 來編輯本地 文件
Workspaces 是 Chrome DevTools 的一個(gè)強(qiáng)大功能，這使 DevTools 變成了一個(gè)真正的 IDE。Workspaces 會(huì)將 Sources 選項(xiàng)卡中的文件和本地項(xiàng)目中的文件進(jìn)行匹配，所以你可以直接編輯和保存，而不必復(fù)制 / 粘貼外部改變的文件到編輯器。
為了配置 Workspaces，只需打開 Sources 選項(xiàng)，然后右擊左邊面板的任何一個(gè)地方，選擇 Add Folder To Worskpace，或者只是把你的整個(gè)工程文件夾拖放入 Developer Tool。現(xiàn)在，無論在哪一個(gè)文件夾，被選中的文件夾，包括其子目錄和所有文件都可以被編輯。為了讓 Workspaces 更高效，你可以將頁面中用到的文件映射到相應(yīng)的文件夾，允許在線編輯和簡單的保存。
最后，祝大家技術(shù)在沉淀中升華。
“不積跬步，無以至千里”，希望未來的你能：有夢為馬 隨處可棲！加油，少年！
關(guān)注公眾號(hào):「Java 知己」，每天更新Java知識(shí)哦，期待你的到來！
- 發(fā)送「Group」，與 10 萬程序員一起進(jìn)步。
- 發(fā)送「面試」，領(lǐng)取BATJ面試資料、面試視頻攻略。
- 發(fā)送「玩轉(zhuǎn)算法」，領(lǐng)取《玩轉(zhuǎn)算法》系列視頻教程。
- 千萬不要發(fā)送「1024」...
