原文鏈接:http://www.imooc.com/article/2559#comment
谷歌瀏覽器如今是Web開發者們所使用的最流行的網頁瀏覽器。伴隨每六個星期一次的發佈週期和不斷擴大的強大的開發功能,Chrome變成了一個必須的工具。大多數可能熟悉關於chorme的許多特點,例如使用console和debugger在線編輯CSS。在這篇文章中,我們將分享15個很酷的技巧,讓你能夠更好的改進工作流程。
快速文件轉換
如果你曾經使用過Sublime Text,那麼你一定知道沒有“Go to anything”這個功能的覆蓋你不可能活下去。所以你會很高興聽到dev tools 也有這個功能。當DevTools打開的時候,你可以按下Ctrl + P
( 在Mac上使用Cmd + P
)來快速的尋找和打開你工程中的任意文件。
在源代碼中搜索
但是如果你希望在源代碼中搜索該怎麼辦?按下Ctrl + Shift + F
(在Mac上使用 Cmd + Opt + F
),即可在所有已加載的文件中查找一個特定的字符串。這個搜索的方法也支持正則表達式。
跳轉到特定的行數
當你打開一個在源標籤裏的文件之後,DevTools能夠允許你輕鬆地跳轉到代碼裏的任意一行,Windows 和 Linux用戶只需要按下Ctrl + G
(在Mac上使用 Cmd + L
),然後輸入你想查閱的行數即可。
另一個跳轉的方法是按下Ctrl + O
,輸入:和行數,而不用去尋找一個文件。
DevTools控制檯支持一些變量和函數來選擇DOM元素:
$()
–document.querySelector()
的縮寫,返回第一個與之匹配的CSS選擇器的元素(例如:$('div')
它將返回本頁的第一個div元素)。$$()
-document.querySelectorAll()
的縮寫,返回一個數組,裏面是與之匹配的CSS選擇器的元素。$0 – $4
- 依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄,$0
是最新的記錄,以此類推。
瞭解更多關於Console
的命令請閱讀Command Line API
另一個打敗Sublime Text的特色出現了。當你在編輯一個文件的時候你可以通過按住Ctrl
(在Mac上爲 Cmd
) 同時點擊你想讓光標停留的位置,設置多個光標,這樣你就可以同時在多個位置輸入同一文本了。
保存記錄
勾選在Console標籤下的保存記錄選項,你可以使DevTools的console繼續保存記錄而不會在每個頁面加載之後清除記錄。當你想要研究在頁面還沒加載完之前出現的bug時,這會是一個很方便的方法。
漂亮的打印 {}
Chrome的開發者工具有一段嵌入的美化代碼,它可以幫你返回一段最小化的且格式易讀的代碼。這個漂亮的印刷按鈕在你正確打開文件之後的Sources標籤下的左下角。
設備模式
DevTools包括了一個強大的模式可用來開發友好的移動端界面。這個來自谷歌的視頻介紹了它最主要的功能,有調整大小,觸摸仿真和模擬糟糕的網絡連接。
設備仿真傳感器
設備模式的另一個很酷的功能是模擬移動設備的傳感器,例如觸摸屏幕和加速計。你甚至可以惡搞你的地理位置。這個功能位於元素標籤的底部,點擊“show drawer”按鈕,就可看見Emulation標籤 --> Sensors
.
顏色選擇器
當我們在樣式編輯器中選擇一種顏色時,你可以點擊顏色預覽,顏色選擇器就會彈出。當顏色選擇器開啓時,如果你停留在某一頁面,你的鼠標指針就會轉換成一個放大鏡,選擇像素精度的顏色。
元素狀態
DevTools有一個功能是模擬CSS的狀態,如在元素中的hover和focus,這能夠能容易的設計他們的樣式。該功能來自css編輯器。
可視化Shadow DOM
由於其他基礎的元素在視圖中正常的隱藏,網頁瀏覽器構建例如文本框,按鈕和輸入之類的東西。不過,你可以在Settings -> General
中切換成Show user agent shadow DOM
,這樣就會在元素標籤頁中顯示被隱藏的代碼。給了你很大的控制,讓你甚至可以單獨地設計他們。
選擇下一個匹配項
當你在Sources 標籤下編輯文件時,如果你按下Ctrl + D (Cmd + D)
,下一個匹配項也會被選中,這能夠幫助你同時編輯他們。
改變顏色格式
在顏色預覽中使用Shift + Click
,可以在rgba
, hsl
和 hexadecimal
這三種格式中改變。
通過workspaces來編輯本地文件
Workspaces是一個強大的Chrome DevTools的功能,這使它成爲一個真正的IDE。Workspaces使Sources標籤下的文件和你本地的工程文件相匹配。所以現在你可以直接編輯和保存,而不用複製粘貼到外部的文本編輯器裏。 配置Workspaces,你只需要去Sources標籤下,在左邊的控制面板的任何地方點擊右鍵(sources標籤下),並且選擇Add Folder To Worskpace, 或者只是把你的整個工程文件夾拖放入Developer Tool。現在,無論你打開哪一頁,被選擇的文件夾的子目錄和它包含的所有文件都將能被編輯。 爲了使它更加的有用,你可以將頁面中用到的文件映射到相應的文件夾,允許在線編輯和簡單的保存。
你可以瞭解更多關於Workspaces的內容 here.
英文原文:15 Must-Know Chrome DevTools Tips and Tricks
譯文源自:http://www.w3cplus.com/tools/15-must-know-chrome-devtools-tips-tricks.html