你真的會使用Chrome開發者工具嗎？

Chrome開發工具是一個Web開發者的利器，使用它你能夠實現：

　　管理界面元素

　　斷點調試JavaScript代碼

　　優化你的代碼

 

　　這裏將列出一些很是實用的使用技巧，幫助你更加高效的工做

 

　　1. 快速編輯HTML元素

　　選擇開發工具面板的Elements

　　在Elements下的元素編輯器中選擇一個DOM元素

　　雙擊選中的DOM元素標籤，而後進行編輯

　　完成相應的編輯以後，頁面會當即發生相應改變。

 

　　2. 快速定位到行

 

 

　　打開開發工具面板，快捷鍵Ctrl+O(Mac：CMD+O)

　　輸入:行號:列號來進行定位

 

　　3. 展開全部子節點元素

 

 

　　選擇Elements面板

　　選擇一個DOM元素，按下Alt鍵而且鼠標雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的全部字節點元素

 

　　4. 改變開發工具的位置

 

 

　　打開開發工具面板，按下快捷鍵Ctrl+Shift+D (Mac:CMD + Shift + D)，或者直接在開發工具面板右側進行相應選項設置：浮動，底部，右側。

 

　　5. 經過CSS選擇符進行DOM元素搜索

　　快捷鍵Ctrl + F(Mac:CMD+F),試試在搜索欄輸入ID選擇符或者類選擇符就能夠定位到元素啦

 

　　6. Material風格和自定義調色板

 

 

　　Elements面板右側的Style編輯器中，點擊顏色十六進制編碼前的色塊，會彈出一個調色板：

 

　　能夠自定義顏色值，也可使用拾色器進行取色

　　調色板下方能夠選擇Material Design的主要色系

 

　　7. 多光標

 

 

　　在Sources面板中選擇一個資源文件進行編輯，如css文件，經過按住Ctrl鍵能夠添加多個編輯光標，同時對多處進行編輯。按下Ctrl + U能夠撤銷編輯。

 

　　8. 獲取圖片的Data URI

 

 

　　選擇Network面板

　　選擇一張圖片，在右側圖片上鼠標右鍵選擇copy it as a Data URI,就能夠獲取圖片的Data URL (base64編碼)

 

　　9. 觸發僞類

 

 

　　Elements面板右鍵執行DOM元素節點，選擇Force Element State

　　或者，點擊右側Toggle Element State圖標

 

　　10. 多列內容選擇

 

 

　　選擇Sources面板

　　選擇一個資源文件

　　按住Alt鍵並拖動鼠標進行多列內容選擇

 

　　11. 使用$0獲取當前選中元素

　　在Elements面板下選擇一個DOM元素

　　切換到Console下，使用$0能夠獲取到選擇的元素

 

　　12. 元素展現

　　在Console面板中獲取指定內容，好比：document.getElementById('xxx')

　　選擇內容右鍵，選擇Reveal in Elements Panel

 

　　13. 查看事件偵聽器

 

 

　　選擇Elements面板

　　右側面板選擇Event Listeners導航，而後選擇一個事件

　　對事件鼠標右鍵選擇Show Function Definition，可定位到事件的函數定義

 

　　14. CSS3(Easing)漸入動畫效果預覽

 

 

　　點擊漸入效果樣式圖標(紫色 光標)，能夠預覽動畫效果

　　可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果

 

　　15. 媒體查詢

 

 

　　這個主要是在Device Mode調節不一樣的分辨率顯示。

 

　　16. 網絡電影膠片

 

 

　　「網絡電影膠片」是指能夠拍攝下頁面渲染和花費的時間截圖，就像拍電影同樣，你能夠點擊每一個截圖(膠片)查看相應的時間線資源加載。

 

　　操做方式：

　　選擇Network面板

　　點擊打開攝像機圖標

　　從新加載頁面

 

　　17. 複製響應(Response)內容

 

 

　　你能夠複製網絡資源的請求頭和響應內容

　　選擇Network面板

　　選擇一個資源文件，右鍵Copy Response複製響應內容

 

　　18. 運行預約義代碼片斷

 

 

　　打開選擇Sources面板，左側選擇導航菜單Snippets

　　右鍵新建一個代碼片斷，輸入代碼內容

　　右鍵代碼片斷，選擇Run運行。

 

　　19. 模擬設備感應器

 

 

　　你能夠模擬手機感應器,類如觸屏，地理座標，加速度傳感器

　　選擇Elements

　　按Esc鍵 ，選擇Emulation > Sensors進行操做

 

　　20. 工做空間

　　Workspace工具就能幫助咱們把調試工具中修改的內容自動保存到相應的文件中：

　　選擇Sources面板

　　在Sources面板中右鍵Add Folder to Workspace，添加相應的本地保存路徑

　　選擇你須要修改的文件，右鍵選擇Map to Network Resources

　　而後改動文件，能夠看到修改以後的效果。

 

　 　原文：How to use Chrome DevTools like a Pro 譯者：paullbyao

　　 來源：segmentfault