隨便找個接口，鼠標左鍵點一下，在“預覽”選項卡中就能看到這個接口返回的數據：

那么好，我們就修改一下這個接口返回的數據，我們把作者和書名給它改了。也就是相當于我們在本地模擬并修改這個接口的返回值。

鼠標右鍵點擊左側的這個接口，在彈出的菜單中選擇“替換內容”：

之后控制臺上方會出現一個選擇文件夾的提示：

點擊“選擇文件夾”，在你電腦上隨便找個位置，我這里在創建了一個“chrome_mock_api”的文件夾，就選它了：

之后，Chrome 還會跟你要個權限，如圖：

給它個面子，讓它“允許”。現在，控制臺會從“網絡”選項卡自動切換到“源代碼/來源”選項卡：

編輯這個文件的內容，就可以攔截剛才我們看到的那個接口返回值了。如果想要一個好的編輯體驗，還可以對文件內容格式化。看下面的動圖，來演示一下：，時長00:55

怎么樣，是不是省下了部署 Mock 服務或者配置第三方 Mock 庫的時間了

這是針對后端已經發布的 API 接口來模擬的場景，還有一個最常見的需求：如果后端 API 還沒發布，該怎么辦？

這也簡單，剛才 Chrome 不是讓我們選擇了一個文件夾嗎，我們在那個文件夾里創建一個新的文件，把要調試的數據放進去就行了。

比如，要模擬一個 api.ituring.com.cn/api/User/books?page=1&size=10 接口：

簡單的新建個接口文件，瞬間就搞定了，咱就說快不快吧。

之前我還在本地搭建的 Koa 服務器上模擬接口數據呢，自從知道了 Chrome 的這個功能，簡直不要太方便。

除了模擬 API 的返回值，還能模擬、修改請求的 Header 信息，自己試一下哦，超方便。

今天的內容夠干貨吧，還不快快搞起來 ~

最后，感謝閱讀，我們下期見哦 ??

文章轉自微信公眾號@碼上花甲

#你可能也喜歡這些API文章!

node.js + express + docker + mysql + jwt 實現用戶管理restful api

nodejs + mongodb 編寫 restful 風格博客 api

表格插件wpDataTables-將 WordPress 表與 Google Sheets API 連接

手把手教你用Python和Flask創建REST API

使用 Django 和 Django REST 框架構建 RESTful API：實現 CRUD 操作

ASP.NET Web API快速入門介紹

2024年在線市場平臺的11大最佳支付解決方案

完整指南：如何在應用程序中集成和使用ChatGPT API

選擇AI API的指南：ChatGPT、Gemini或Claude，哪一個最適合你？