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

繼續上篇：你真的會使用Chrome開發者工具嗎（一）

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

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