谷歌浏覽器 DEV Tools

谷歌浏覽器如今是Web開發者們所使用的最流行的網頁浏覽器。伴随每六個星期一次的釋出周期和不斷擴大的強大的開發功能，Chrome變成了一個必須的工具。大多數可能熟悉關于chorme的許多特點，例如使用console和debugger線上編輯CSS。在這篇文章中，我們将分享15個很酷的技巧，讓你能夠更好的改進工作流程。

快速檔案轉換

如果你曾經使用過Sublime Text，那麼你一定知道沒有“Go to anything”這個功能的覆寫你不可能活下去。是以你會很高興聽到dev tools 也有這個功能。當DevTools打開的時候，你可以按下Ctrl + P( 在Mac上使用Cmd + P)來快速的尋找和打開你工程中的任意檔案。

<a href="http://front.smohan.net/blog-chrome-dev1.gif" target="_blank"></a>

在源代碼中搜尋

但是如果你希望在源代碼中搜尋該怎麼辦？按下Ctrl + Shift + F (在Mac上使用 Cmd + Opt + F)，即可在所有已加載的檔案中查找一個特定的字元串。這個搜尋的方法也支援正規表達式。

<a href="http://front.smohan.net/blog-chrome-dev2.SearchAll.gif" target="_blank"></a>

跳轉到特定的行數

當你打開一個在源标簽裡的檔案之後，DevTools能夠允許你輕松地跳轉到代碼裡的任意一行，Windows 和 Linux使用者隻需要按下Ctrl + G (在Mac上使用 Cmd + L ),然後輸入你想查閱的行數即可。

<a href="http://front.smohan.net/blog-chrome-dev3.JumpToLine.gif" target="_blank"></a>

另一個跳轉的方法是按下Ctrl + O ，輸入:和行數，而不用去尋找一個檔案。

在控制台選擇元素

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

 $() – document.querySelector()的縮寫，傳回第一個與之比對的CSS選擇器的元素(例如：$('div') 它将傳回本頁的第一個div元素)。

 $$() - document.querySelectorAll()的縮寫，傳回一個數組，裡面是與之比對的CSS選擇器的元素。

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

<a href="http://front.smohan.net/blog-chrome-dev4.gif" target="_blank"></a>

使用多個光标和選擇

另一個打敗Sublime Text的特色出現了。當你在編輯一個檔案的時候你可以通過按住Ctrl (在Mac上為 Cmd) 同時點選你想讓光标停留的位置，設定多個光标，這樣你就可以同時在多個位置輸入同一文本了。

儲存記錄

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

<a href="http://front.smohan.net/blog-chrome-dev6.PreserveLog.gif" target="_blank"></a>

漂亮的列印 {}

Chrome的開發者工具有一段嵌入的美化代碼，它可以幫你傳回一段最小化的且格式易讀的代碼。這個漂亮的印刷按鈕在你正确打開檔案之後的Sources标簽下的左下角。

<a href="http://front.smohan.net/blog-chrome-dev7.PrettyPrint.gif" target="_blank"></a>

裝置模式

DevTools包括了一個強大的模式可用來開發友好的移動端界面。這個來自谷歌的視訊介紹了它最主要的功能，有調整大小，觸摸仿真和模拟糟糕的網絡連接配接。

裝置仿真傳感器

裝置模式的另一個很酷的功能是模拟移動裝置的傳感器，例如觸摸螢幕和加速計。你甚至可以惡搞你的地理位置。這個功能位于元素标簽的底部，點選“show drawer”按鈕，就可看見Emulation标簽 --&gt; Sensors.

<a href="http://front.smohan.net/blog-chrome-dev9.Sensors.gif" target="_blank"></a>

顔色選擇器

當我們在樣式編輯器中選擇一種顔色時，你可以點選顔色預覽，顔色選擇器就會彈出。當顔色選擇器開啟時，如果你停留在某一頁面，你的滑鼠指針就會轉換成一個放大鏡，選擇像素精度的顔色。

<a href="http://front.smohan.net/blog-chrome-dev10.ColorPicker.gif" target="_blank"></a>

元素狀态

DevTools有一個功能是模拟CSS的狀态，如在元素中的hover和focus，這能夠能容易的設計他們的樣式。該功能來自css編輯器。

<a href="http://front.smohan.net/blog-chrome-dev11.SimulateHover.gif" target="_blank"></a>

可視化Shadow DOM

由于其他基礎的元素在視圖中正常的隐藏，網頁浏覽器建構例如文本框，按鈕和輸入之類的東西。不過，你可以在Settings -&gt; General 中切換成Show user agent shadow DOM，這樣就會在元素标簽頁中顯示被隐藏的代碼。給了你很大的控制，讓你甚至可以單獨地設計他們。

<a href="http://front.smohan.net/blog-chrome-dev12.ShadowDOM.gif" target="_blank"></a>

選擇下一個比對項

當你在Sources 标簽下編輯檔案時，如果你按下Ctrl + D (Cmd + D)，下一個比對項也會被選中，這能夠幫助你同時編輯他們。

<a href="http://front.smohan.net/blog-chrome-dev13.MultiSelect.gif" target="_blank"></a>

改變顔色格式

在顔色預覽中使用Shift + Click ，可以在rgba, hsl 和 hexadecimal 這三種格式中改變。

<a href="http://front.smohan.net/blog-chrome-dev14.ColorFormat.gif" target="_blank"></a>

通過workspaces來編輯本地檔案

Workspaces是一個強大的Chrome DevTools的功能，這使它成為一個真正的IDE。Workspaces使Sources标簽下的檔案和你本地的工程檔案相比對。是以現在你可以直接編輯和儲存，而不用複制粘貼到外部的文本編輯器裡。 配置Workspaces，你隻需要去Sources标簽下，在左邊的控制台的任何地方點選右鍵(sources标簽下)，并且選擇Add Folder To Worskpace, 或者隻是把你的整個工程檔案夾拖放入Developer Tool。現在，無論你打開哪一頁，被選擇的檔案夾的子目錄和它包含的所有檔案都将能被編輯。 為了使它更加的有用，你可以将頁面中用到的檔案映射到相應的檔案夾，允許線上編輯和簡單的儲存。

若轉載請注明出處！若有疑問，請回複交流！