前言

現代網站開發流行前後端分離的開發模式，前端通常使用 JavaScript 框架如 ReactJS, VueJS 或 AngularJS 來實作 UI 的呈現與渲染，而後端主要使用 RestFul 或 GraphQL 等方式來提供 API 給前端串接。

但專案開發需求時程通常都是又急又需要快速完成，前端工程師如果要等到後端把 API 完成後再來實作就可能會耽誤到 UI 的開發，所以常見的做法會是前後端討論完 API 的規格後 (包含輸出的資料格式與範例)，前端這邊會使用 Mock Data 來模擬後端 API 的輸出，然後來整合前端的程式。

各個軟體框架或是第三方套件 (如: Mock.js) 都有提供 Mock Data 的實作方式，然而在實務上這也衍生了 Mock Data 管理的問題，例如在執行原始碼版控時可能將 Mock 資料也推到公用版控主機，或是 Bundle 輸出 js 檔時，都可能把 Mock 資料也包進產出的 js 檔案中，如果 Mock 資料有包含機敏資料，就有外洩的可能。

所以本文介紹使用 Chrome 瀏覽器的開發者工具來進行 API Mock，除了讓 Mock 資料與專案原始碼脫鉤 (decouple)，也可以避免原本的前端專案資料夾過於雜亂，各個流程的 Mock 資料也可以另外進行版控，或是拿來用在 e2e 測試程式中，感覺起來是相對優雅而乾淨的做法。

第一步: 使用 The Dog API 建立一個範例專案

The Dog API 是由 That API Company 這間專門從事 API 開發的國際性公司所開發的 API，主要是提供給新手工程師練習串接 API 使用，我們會使用 The Dog API 來建立一個範例的前端程式。

The Dog API 網址: https://api.thedogapi.com/v1/images/search?limit=10

我在 CodePen 上已經做好一版簡易的 SPA 網頁，網頁載入後會使用 Fetch API 來呼叫 The Dog API，這支 API 會隨機回傳 10 張狗狗的圖片網址，然後渲染成一個瀑布流的圖片牆。

See the Pen TheDogAPI Example by yishiashia (@yishiashia) on CodePen.

覆寫 API 的回覆內容

上面我們已經完成一個簡易的網頁並串接 The Dog API 取得遠端的資料，接下來我們來試著使用 Chrome 瀏覽器的覆寫功能來模擬 API 的回應。

That API Company 除了提供狗狗 API 以外，另外也有提供貓咪 API ( The Cat API )，跟狗狗 API 一樣，貓咪 API 也有提供圖片的 API 網址:

The Cat API 網址: https://api.thecatapi.com/v1/images/search?limit=10

實際呼叫後可以得到下列的回應資料:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

[
  {
    "id": "253",
    "url": "https://cdn2.thecatapi.com/images/253.jpg",
    "width": 700,
    "height": 525
  },
  {
    "id": "49i",
    "url": "https://cdn2.thecatapi.com/images/49i.gif",
    "width": 226,
    "height": 169
  },

  // ... 共 10 筆

  {
    "id": "ILx2VfmiR",
    "url": "https://cdn2.thecatapi.com/images/ILx2VfmiR.jpg",
    "width": 1200,
    "height": 824
  }
]

接下來我們就透過覆寫功能來將狗狗 API 的回應資料覆寫成貓咪的圖片資料。

覆寫 API 內容

首先我們使用 Chrome 瀏覽器打開 CodePen Demo 網頁，然後在鍵盤上點擊 F12 按鍵打開 開發者工具 ，會看到下列的畫面

Chrome 開發者工具

切換到網路 (Network) 的小分頁後可以看到相關的網路封包，我們再點選 Fetch/XHR 的標籤後可以看到使用 Fetch API 存取 The Dog API 的網路請球，如下圖

The Dog API 的網路請求

對這個 Request 點擊右鍵後可以看到選單中有 覆寫標頭 及 覆寫內容 兩個選項，表示您可以針對 API 回應的 HTTP Headers 或是 response body 進行覆寫，這邊我們要選擇 覆寫內容 來改寫 API 的回應資料。

點擊後上方會出現 選取要儲存覆寫檔案於其中的資料夾。 (選取資料夾) 的文字與按鈕，點選 選取資料夾 後會出現檔案總管的畫面，我們可以在桌面建立一個 thedogapi_mock 的資料夾後按確定。

確定後會在瀏覽器上方看到如下圖的提示訊息

按下 “允許” 後，就可以看到下面的畫面，可以在紅框進行 API 回應內容的編輯，修改完成後 crtl + s 儲存後即完成內容覆寫

點選重新整理後，就可以看到圖片都變成貓咪的了

觀察覆寫資料夾

接下來我們可以觀察桌面上的 thedogapi_mock 資料夾的內容，目錄結構如下:

1
2
3
4
5

/home/yishiashia/Desktop/thedogapi_mock
└── api.thedogapi.com
    └── v1
        └── images
            └── search%3Flimit=10

可以看到有出現 search%3Flimit=10 這個檔案，使用文字編輯器來查看他的內容

可以看到內容就是我們剛剛輸入覆寫的 JSON 資料內容，這樣我們可以獨立每一個 End-to-End 的測試情境到不同的 mock 資料夾，不只可以透過 Chrome 系列的瀏覽器來進行模擬，也可以使用 Selenium 之類的工具來進行自動化測試，同時我們的專案目錄也可以保持乾淨的狀態 (跟測試資料 decouple)。

結語

本文介紹了如何使用 Chrome 開發者工具來模擬後端 API 的回應，這個方法相較於在前端程式碼中直接寫入 Mock 資料有許多優勢：首先是可以將測試資料與專案程式碼完全分離，避免 Mock 資料被意外部署到正式環境；其次是可以針對不同的測試情境建立獨立的 Mock 資料夾，方便管理各種測試案例；最後，這些 Mock 資料還可以被重複利用在自動化測試中，提升測試的效率與一致性。

對於前後端分離的開發模式來說，透過 Chrome 開發者工具的覆寫功能，在不修改專案程式碼的情況下，靈活地模擬各種 API 回應場景，相信對於前端開發與測試來說都是相當實用的工具。