隨便找個(gè)接口，鼠標(biāo)左鍵點(diǎn)一下，在“預(yù)覽”選項(xiàng)卡中就能看到這個(gè)接口返回的數(shù)據(jù)：

那么好，我們就修改一下這個(gè)接口返回的數(shù)據(jù)，我們把作者和書名給它改了。也就是相當(dāng)于我們?cè)诒镜啬M并修改這個(gè)接口的返回值。

鼠標(biāo)右鍵點(diǎn)擊左側(cè)的這個(gè)接口，在彈出的菜單中選擇“替換內(nèi)容”：

之后控制臺(tái)上方會(huì)出現(xiàn)一個(gè)選擇文件夾的提示：

點(diǎn)擊“選擇文件夾”，在你電腦上隨便找個(gè)位置，我這里在創(chuàng)建了一個(gè)“chrome_mock_api”的文件夾，就選它了：

之后，Chrome 還會(huì)跟你要個(gè)權(quán)限，如圖：

給它個(gè)面子，讓它“允許”?，F(xiàn)在，控制臺(tái)會(huì)從“網(wǎng)絡(luò)”選項(xiàng)卡自動(dòng)切換到“源代碼/來(lái)源”選項(xiàng)卡：

編輯這個(gè)文件的內(nèi)容，就可以攔截剛才我們看到的那個(gè)接口返回值了。如果想要一個(gè)好的編輯體驗(yàn)，還可以對(duì)文件內(nèi)容格式化。看下面的動(dòng)圖，來(lái)演示一下：，時(shí)長(zhǎng)00:55

怎么樣，是不是省下了部署 Mock 服務(wù)或者配置第三方 Mock 庫(kù)的時(shí)間了

這是針對(duì)后端已經(jīng)發(fā)布的 API 接口來(lái)模擬的場(chǎng)景，還有一個(gè)最常見的需求：如果后端 API 還沒發(fā)布，該怎么辦？

這也簡(jiǎn)單，剛才 Chrome 不是讓我們選擇了一個(gè)文件夾嗎，我們?cè)谀莻€(gè)文件夾里創(chuàng)建一個(gè)新的文件，把要調(diào)試的數(shù)據(jù)放進(jìn)去就行了。

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

簡(jiǎn)單的新建個(gè)接口文件，瞬間就搞定了，咱就說(shuō)快不快吧。

之前我還在本地搭建的 Koa 服務(wù)器上模擬接口數(shù)據(jù)呢，自從知道了 Chrome 的這個(gè)功能，簡(jiǎn)直不要太方便。

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

今天的內(nèi)容夠干貨吧，還不快快搞起來(lái) ~

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

文章轉(zhuǎn)自微信公眾號(hào)@碼上花甲

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

node.js + express + docker + mysql + jwt 實(shí)現(xiàn)用戶管理restful api

nodejs + mongodb 編寫 restful 風(fēng)格博客 api

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

手把手教你用Python和Flask創(chuàng)建REST API

使用 Django 和 Django REST 框架構(gòu)建 RESTful API：實(shí)現(xiàn) CRUD 操作

ASP.NET Web API快速入門介紹

2024年在線市場(chǎng)平臺(tái)的11大最佳支付解決方案

完整指南：如何在應(yīng)用程序中集成和使用ChatGPT API

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