Chorme-devtool 的冷知識

純粹做一點簡單的紀錄。

跟 Network 有關的資訊

request header

• host => 連到哪個網域
• refer => 從哪邊連過來的？（上個頁面）
• accept => 接受哪些格式的 response
• accept-language => 偏好語言（有優先度），server 要自己根據偏好語言來實作回傳什麼內容。
• user-agent => 使用者的瀏覽器是哪個，跟一些額外資訊。

X- 開頭的 header 是什麼？

應該是 Extension 的意思，簡單來說就是自己額外加上的 「response header」，如果不是 X- 開頭的就代表是「一定要有的 header」。

如果是 POST request

你可以在 devetool 打開 payload 來查看 POST 過去的內容是什麼。

冷知識

1. 按下 enter 會直接送出，所以要改成 shift + enter

2. console 中每執行一個指令都會有一個對應的回傳值， > 代表執行的指令，< 代表該指令的回傳值（所以如果你在 console 下的指令沒有回傳值，就會一直看到 undefined）

3. 選到一個 element 後按下 h，Chrome 就會自動幫你加上 display: hide 的 class