15個必須知道的chrome開發者技巧

在Web開發者中，Google Chrome是使用最普遍的瀏覽器。六週一次的發佈週期和一套強大的不斷擴大開發功能，使其成爲了web開發者必備的工具。你可能已經熟悉了它的部分功能，如使用console和debugger在線編輯CSS。在這篇文章中，咱們將分享15個有助於改進你的開發流程的技巧。

　　1、快速切換文件

　　若是你使用過sublime text，那麼你可能不習慣沒有Go to anything這個功能的覆蓋。你會很高興聽到chrome開發者功能也有這個功能，當DevTools被打開的時候，按Ctrl+P（cmd+p on mac）,就能快速搜尋和打開你項目的文件。

　　2、在源代碼中搜索

　　若是你但願在源代碼中搜索要怎麼辦呢？在頁面已經加載的文件中搜尋一個特定的字符串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支持正則表達式哦

　　3、快速跳轉到指定行

　　在Sources標籤中打開一個文件以後，在Windows和Linux中，按Ctrl + G，(or Cmd + L for Mac)，而後輸入行號，DevTools就會容許你跳轉到文件中的任意一行。

　　另一種方式是按Ctrl + O，輸入:和行數，而不用去尋找一個文件。

　　4、在控制檯選擇元素

　　DevTools控制檯支持一些變量和函數來選擇DOM元素：

• $()–document.querySelector()的簡寫，返回第一個和css選擇器匹配的元素。例如$(‘div’)返回這個頁面中第一個div元素

• $$()–document.querySelectorAll()的簡寫，返回一個和css選擇器匹配的元素數組。

• $0-$4–依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄，$0是最新的記錄，以此類推。

　　想要了解更多控制檯命令，戳這裏：Command Line API

　　5、使用多個插入符進行選擇

　　當編輯一個文件的時候，你能夠按住Ctrl（cmd for mac），在你要編輯的地方點擊鼠標，能夠設置多個插入符，這樣能夠一次在多個地方編輯。

　　6、保存記錄

　　勾選在Console標籤下的保存記錄選項，你可使DevTools的console繼續保存記錄而不會在每一個頁面加載以後清除記錄。當你想要研究在頁面還沒加載完以前出現的bug時，這會是一個很方便的方法。

　　7、優質打印

　　Chrome’s Developer Tools有內建的美化代碼，能夠返回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources標籤的左下角。

　　8、設備模式

　　對於開發移動友好頁面，DevTools包含了一個很是強大的模式，這個谷歌視頻介紹了其主要特色，如調整屏幕大小、觸摸仿真和模擬糟糕的網絡鏈接

　　（ps:原文中這個視頻文件丟失了，這個圖是小編補充，你能夠本身去測試這個工具，頗有用）

　　9、設備傳感仿真

　　設備模式的另外一個很酷的功能是模擬移動設備的傳感器，例如觸摸屏幕和加速計。你甚至能夠惡搞你的地理位置。這個功能位於元素標籤的底部，點擊「show drawer」按鈕，就可看見Emulation標籤 --> Sensors.

　　10、顏色選擇器

　　當在樣式編輯中選擇了一個顏色屬性時，你能夠點擊顏色預覽，就會彈出一個顏色選擇器。當選擇器開啓時，若是你停留在頁面，鼠標指針會變成一個放大鏡，讓你去選擇像素精度的顏色。

　　11、強制改變元素狀態

　　DevTools有一個能夠模擬CSS狀態的功能，例如元素的hover和focus,能夠很容易的改變元素樣式。在CSS編輯器中能夠利用這個功能

　　12、可視化的DOM陰影

　　Web瀏覽器在構建如文本框、按鈕和輸入框一類元素時，其它基本元素的視圖是隱藏的。不過，你能夠在Settings -> General 中切換成Show user agent shadow DOM，這樣就會在元素標籤頁中顯示被隱藏的代碼。甚至還能單獨設計他們的樣式，這給你了很大的控制權。

　　十3、選擇下一個匹配項

　　當在Sources標籤下編輯文件時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利於你同時對它們進行編輯。

　　十4、改變顏色格式

　　在顏色預覽功能使用快捷鍵Shift + Click，能夠在rgba、hsl和hexadecimal來回切換顏色的格式

　　十5、經過workspaces來編輯本地 文件

    Workspaces是Chrome DevTools的一個強大功能，這使DevTools變成了一個真正的IDE。Workspaces會將Sources選項卡中的文件和本地項目中的文件進行匹配，因此你能夠直接編輯和保存，而沒必要複製/粘貼外部改變的文件到編輯器。

　　爲了配置Workspaces，只需打開Sources選項，而後右擊左邊面板的任何一個地方，選擇Add Folder To Worskpace，或者只是把你的整個工程文件夾拖放入Developer Tool。如今，不管在哪個文件夾，被選中的文件夾，包括其子目錄和全部文件均可以被編輯。爲了讓Workspaces更高效，你能夠將頁面中用到的文件映射到相應的文件夾，容許在線編輯和簡單的保存

轉自：http://sentsin.com/web/1178.html