接下來要介紹的是Network以及Application

Network

在這個地方可以看到妳送出去的所有要求，下載的檔案，包含websocket傳送的內容都可以看得到

Name: 這串網址的最後的一個數值
Status: 這個要求的http status code
Type: 這個要求的類型(為js檔/font/image/websocket...)
Initiator: 這個要求的起始位置
Size: 這個要求的大小
Time: 取得這個要求的時間
Waterfall: 在取得這個要求的過程的顯示圖

在你點選其中一個內容後，可以看到這個要求的詳細資料，包含他的header是甚麼，通訊協定，網址，傳送的內容等等

另外，如果想要查看websocket的通訊內容，需要在網頁建立websocket通道前將這個devtool開啟，才有辦法抓取到這個要求，看到他傳送的內容

最後，在這個Network中也可以模擬網路斷線，或是網速很慢的情況
除了裡面這些選項之外，還可以點選Add，裡面可以定義你的網速上傳/下載，以及延遲

對於這個延遲，他的運行模式為
網頁先把要求傳出去，先收到回應後先幫你收著，等秒數到了才會釋放，這點要特別注意!!

Application

這邊可以增修刪查這個網頁所儲存在瀏覽器內的內容，其中包含了Cookies/session/localstorage/indexedDB/WebSQL...
這邊以最簡單的cookies為例子
在這個網頁中，可以看到裡面有放著三個cookies

如果需要新增一個cookies，點選Name下方空白處，打上名字和你希望的數值，就可以直接新增成功了

這樣在這個網頁上，如果有需要取得myAddCookie，就可以直接使用了(在console也找的到)

這個在要開發一個需要cookies的內容，但你預設他的有效期間只有10分鐘，但開發會需要一直用到這個cookie的值，這時就可以直接將有效時間改成1天之類的，讓自己開發更順利