# [Chrome] DevTools 筆記 ###### tags: `Chrome` ## 截圖 ### 操作方式 macOS：同時按 "shift"+"command"+"p" 鍵，輸入 "screen" ## 在本機覆寫網頁內容和 HTTP response headers :::info * [Override web content and HTTP response headers locally](https://developer.chrome.com/docs/devtools/overrides) * [影片 26:44：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://youtu.be/TzZXGbe813A?si=3CB6cOoc86YQXD8C&t=1604) * [簡報 p.65：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://feday.fequan.com/2023/%E8%B0%83%E8%AF%95ModernWeb%40FEDAY2023_%20JecelynYeen.pdf) ::: ### 操作方式 :::warning 初次使用時，在 DevTools 頂端會出現提示 ==Select a folder to store the override files in==，要求選取要儲存覆寫檔案的資料夾 ::: 在 **Network** 中，針對要覆寫的 request 點右鍵，選擇 **Override headers** 或 **Override content** ### 使用時機 當遇到一些問題或測試需要後端處理，但後端無法即時協助時，例： * CORS：透過 **Override headers** 添加 `Access-Control-Allow-Origin`，暫時取得資料 * 測試 Security Header：透過 **Override headers** 進行測試 * mock api 和文件的內容：透過 **Override content** 修改資料 ## 錄製操作流程 :::info * [Customize and automate user flows beyond Chrome DevTools Recorder](https://developer.chrome.com/blog/extend-recorder) * [影片 32:33：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://youtu.be/TzZXGbe813A?si=pgt1B3sG4vTBoFx6&t=1953) * [簡報 p.67：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://feday.fequan.com/2023/%E8%B0%83%E8%AF%95ModernWeb%40FEDAY2023_%20JecelynYeen.pdf) ::: ### 操作方式 * 在 **Recorder** 中點 **Create a new recording** * 若不想執行重整頁面的動作，可將 **Navigate** 刪除 * 可以 **Export**、**Import** 錄製的流程 ### 使用時機 進行測試或是 debug 時重複的操作 ## 模擬 focused page :::info * [Emulate a focused page](https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page) * [影片 35:54：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://youtu.be/TzZXGbe813A?si=NTg4YKINfdiENpqI&t=2154) * [簡報 p.68：你不知道的 Chrome DevTools（开发者工具）@FEDAY2023_ Jecelyn Yeen](https://feday.fequan.com/2023/%E8%B0%83%E8%AF%95ModernWeb%40FEDAY2023_%20JecelynYeen.pdf) ::: ### 操作方式 在 **Renderng** 中勾選 **Emulate a focused page** ### 使用時機 有些元素在失去焦點時會隱藏，例如：選單、日期選擇器，對於 debug 不太方便 --- :::info 建立日期：2020-11-05 更新日期：2024-02-27 :::