你真的會使用Chrome開發者工具嗎（一）

原文 How to use Chrome DevTools like a Pro

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

下篇：你真的會使用Chrome開發者工具嗎（二）