谷歌瀏覽器開發常用8大技巧

作為專業的web開發者，Chrome是使用最為廣泛的瀏覽器，當然，所有的原因都歸於它強大而不斷擴大的開發功能，造就了它在web開發中的地位。現在的你可以熟悉了它的部分的功能。如：常用的console和debugger，線上編輯css等入門級技巧。今天主要是給大家分享一下chrome常用小技巧，學會了的話，會讓你的開發更加的方便，同時也可以改進你的開發流程，快快來學習吧！

技巧1：快速切換檔案

如果你之前使用過sublime text ,有時候你還真不習慣沒有go to anything這個功能，當然，強大的chrome開發者工具有這個功能哦，怎麼玩呢？來看一下操作吧。

當開發者工具被開啟的時候，按CTRL+P(蘋果小朋友 cmd+p),就能快速搜尋和開啟你專案的檔案了。

如圖： 

技巧2：在原始碼中搜尋

在專案開發中，如果你希望在原始碼中搜尋要怎麼辦呢？在頁面已經載入的檔案中搜尋一個特定的字串，快捷鍵是Ctrl + Shift + F (Cmd + Opt + F)，這種搜尋方式還支援正規表示式哦

如圖：

       

技巧3：快速跳轉到指定行

　　在Sources標籤中開啟一個檔案之後，在Windows和Linux中，按Ctrl + G，(or Cmd + L for Mac)，然後輸入行號+回車即可，DevTools就會允許你跳轉到檔案中的任意一行。

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

  如圖：

     

技巧4：在控制檯選擇元素

　　開發者工具控制檯支援一些變數和函式來選擇DOM元素：

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

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

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

 

技巧5：使用多個插入符進行選擇

當編輯一個檔案的時候，你可以按住Ctrl（cmd for mac），在你要編輯的地方點選滑鼠，可以設定多個插入符，這樣可以一次在多個地方編輯。

 

技巧6：優質列印

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

如圖：

  

點選後的效果如下圖：

  

技巧7：顏色選擇器

當在樣式編輯中選擇了一個顏色屬性時，你可以點選顏色預覽，就會彈出一個顏色選擇器。當選擇器開啟時，如果你停留在頁面，滑鼠指標會變成一個放大鏡，讓你去選擇畫素精度的顏色。

如圖：

  

 

技巧8：改變顏色格式

　　在顏色預覽功能使用快捷鍵Shift + 點選滑鼠左鍵，可以在rgba、hsl和hexadecimal來回切換顏色的格式

 如圖：

   

 

好了，今天原始碼時代給大家帶來的幾個小技巧，你學會了嗎？現在是不是可以改變你對瀏覽器的新認識了，瞭解更多技術知識，請多關注我們H5學科技術文章