Chrome Dev Tool 介紹

身為一個網頁工程師，一定天天會跟瀏覽器為伍，無論是要看畫面有沒有符合需求，或是看網頁有沒有正確收到資料，而DevTools以一定會時常開啟的，但在還沒深入研究前，我之知道這個可以用來看console.log()，但到了現在，我才了解他不只這些功能而已，以下就讓我來介紹我平常時常用到的功能吧(這邊以chrome當作範例)

看console

這個我就不多說了，打開dev tool後點下上面的Console就可以了!! 看看Facebook還會阻止你使用這個功能，就知道這個地方有多重要了XD

補充

在看log時，有時候會因為網頁要跳轉，然後log就會消失，如果希望保留之前的log，可以將設定打開

直接修改網頁元素

點選Element，接著點選畫面左上角的小滑鼠 此時，點選你想要更改的元素，就可已透過修改這個的css來改變畫面，這個在調整畫面的css時特別好用!!! 透過這個方法，在看到覺得很厲害的網頁時也可以透過dev tool去看其他工程師怎麼寫這個css的

在console中直接執行js語法

點選Console，直接在裡面打上js的語法，就可以直接執行，對於要測試一些小功能或是產生一些簡單的輸出特別好用

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天之類的，讓自己開發更順利