開發者神器 DevTools｜API 覆蓋術，不改後端也能完成測試！相見恨晚瀏覽器的功能之一。

快速覆蓋 API 回應，讓前端測試更高效

✨ 目錄

- 前言
- 為什麼要修改資料 / API 修正測試的應用場景
- 範例:修改 API 資料
- 範例:修改 HTTP 回應
- ✨TIPS

🎉✨🎊🥸🥸😎😎😎😶‍🌫️😥🥺🥸

✨ 前言

在前端開發中，常會遇到需要模擬 API 回應的情況。

例如，開發測試階段需要固定的數據，或者需要模擬後端尚未完成的 API 回應。我之前都是在專案內寫 mock data，一個 API 就要寫一次，最近才發現瀏覽器就有內建這個功能!

通過瀏覽器工具來攔截和修改 API 回應，而 Chrome 的開發者工具便是一個非常強大的幫手。(Edge 的也有，畢竟本是同根生)

✨ 為什麼要修改資料 / API 修正測試的應用場景

• 模擬 API 修正： 使用覆寫來模擬 API 的修正。例如，如果 API 有錯誤的資料或格式，可以在本機修改回應模擬修復後的狀態。
• 原型設計： 如果知道後端 API 將會使用的資料結構，可以在後端 API 尚未完成時，使用本機覆寫來模擬回應資料，從而建立新的 UI 設計原型，這讓可以提前進行前端開發，無需等待後端完成。(超重要!)
• 測試錯誤處理： 修改 API 回應以模擬各種錯誤情境（如 404 錯誤），並測試如何處理這些錯誤。
• 效能測試： 模擬不同的 API 回應時間和大小，以測試網站的效能。例如可以模擬一個速度較慢的回應，確認網站是否可以正確處理這種情況。

✨ 範例 修改API資料

Step by step :

1. 打開開發者工具 (F12)，找到 Network 標籤

2. 找到你要修改的API，對他點右鍵，會看到 Override content

3. 點Override content，最上面會跳出 Select folder，選一個要放的位置

4. 會需要允許權限

🎉✨🎊 DO RE MI SO~~~🎉✨🎊

5. 這時候會跳出一個區塊可以編輯API的資料，像 list 就是我新增上去的資料。

6. 重整頁面，API資料真的變成我修改後的資料了!

另一種修改方式是直接改json文件(剛剛選擇的資料夾會自動建立文件)

✨ 修改 HTTP 回應

前面都一樣，但我們改為選 override headers

就會直接將headers變成可編輯的狀態了

也可以新增/刪除

✨ TIPS

• 雖然可以修改 API 回應的內容，但對於模擬網絡延遲、分段傳輸或實時數據（如 WebSocket）
• Chrome 會用紫色點裝飾已覆寫的請求
• 啟用 Override 時，瀏覽器的快取功能會自動停用

✨支援的檔案類型

• 網頁內容：本機覆寫功能支援大多數檔案類型，包括 HTML、CSS、JavaScript 和 JSON，可以在面板中編輯這些檔案。
• 圖片：可以覆寫圖片內容，但無法直接在 Chrome 中編輯，需要替換儲存在本機覆寫資料夾中的檔案。
• HTTP headers：例如 CORS、Permissions-Policy等。

✨ 結論

最近會開始認真研究瀏覽器開發者模式，感覺還有好多可以利用的功能!