chrome開發者工具功能拾遺：Network面板篇

本文主要介紹一些本人在此以前不甚瞭解，但通過了解後又發現對本身的工做頗有幫助的一些chrome開發者工具調試技巧/功能。也借這篇文章提醒一下本身，在實際項目中多使用這些功能，儘快熟悉起來，提高本身的工做效率。

---

Capture screenshots（捕捉網頁截圖）

Capture screenshots是自動分析DOM樹的變化，截下DOM樹變化各個重要階段時的頁面，尚不清楚是如何判斷截圖時機的（不過確定是在DOM樹有變化的時候才截圖的）。除了截圖外，還能看到每一個截圖所對應的Network狀況，經過橫向比較，能夠發現一些請求（圖片、js、css、xhr等）對頁面的影響，舉例來講：在加載某js前，頁面上是沒有菜單的，加載後菜單就出來了，那就能夠粗略地判斷此js與菜單有關。
另外，這功能對於解決頁面抖動（最多見於MVVM框架的DOM樹渲染，以及因爲圖片未加載致使該區域尺寸未定的狀況）也有很大的幫助。
此功能應該比較新，在網上看chrome開發者工具相關文章時，發現他們的版本根本就沒有這個功能（從開發者工具界面截圖得知），也不知道他們用的是什麼版本，反正個人chrome 46是有這功能的。
使用這功能的方法以下：

1. 打開Network面板，點亮左上角那個像是攝像機的圖標（鼠標移上去會提示Capture screenshots）。

1. 點亮該圖標後，會打開新的一折疊面板，在該面板上會提示按Ctrl + R來啓動截圖。

1. 按Ctrl + R後，截圖就自動完成了，以下圖所示：

1. 雙擊某截圖就能看大圖。

1. 點擊選中某截圖，就能查看該截圖時刻的Network狀況。