【前端开发】新版Chrome浏览器接口mock调试技巧，超实用
<p>给大家分享一个 <code>Chrome117</code> 更新中最实用的一个功能：<code>在 Network 面板中发送 mock 请求。</code></p><h2 data-tool="mdnice编辑器">修改返回响应数据</h2>
<p data-tool="mdnice编辑器">想要修改接口返回的数据，设置成特定的数据，首先打开 <code>网络(Network)</code> 面板，找到你需要<code>Mock</code>的接口，右键然后选择<code>替换内容(Override content)</code>：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105847532-362816029.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">这时候浏览器会提示：<code>选择要用来存储替换文件的文件夹</code>，这个文件夹主要作用是用来<code>保存 Mock 的替换文件</code>，方便下次 <code>Mock</code> 请求直接使用</p>
<p data-tool="mdnice编辑器">点击 <code>选择文件夹</code>:</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105855254-365325662.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">选择我们刚刚新建的文件夹，我是在电脑桌面上新建了一个空的文件夹 <code>chrome_devtools</code>, 选择之后会提示<code>允许完整的访问权限</code>, 一定要注意点击 <code>允许</code>:</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105903230-1171559884.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">这个时候 <code>DevTools</code> 会自动跳转到 <code>源代码/来源(Sources)</code> 面板，并且会生成对应请求的 Mock 文件：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105912088-241009335.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">编辑 <code>Mock</code> 文件，自定义一个 <code>JSON</code> 数据格式然后保存：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105920660-1510423573.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">重新发起请求，发现被拦截的接口会有一个<code>高亮的标识</code>，鼠标移入会提示对应的信息，并且响应的数据已经变成了我们<code>修改后</code>的数据</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105928275-604499668.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">当然除了修改接口返回的内容以外，我们还可以修改返回的<code>响应头</code></p>
<h2 data-tool="mdnice编辑器">修改返回的响应头</h2>
<p data-tool="mdnice编辑器">想要修改接口返回的响应头，增加我们想要返回的 <code>key:value</code>，首先打开 <code>网络(Network)</code> 面板，找到你需要<code>Mock</code>的接口，右键然后选择<code>替换标头(Override headers)</code>：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016105938427-471107743.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">右侧面板会直接出现 <code>添加标头</code> 按钮：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110022817-37984560.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">点击添加，这里我们添加一个 <code>Test-Header: testHeader</code> 做个简单的测试</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110035950-1214383379.png"></p>
<p> </p>
<p> </p>
<p data-tool="mdnice编辑器">也可以直接打开 <code>源代码/来源(Sources)</code> 面板，找到对应的文件 <code>.headers</code> 文件中直接添加，两种添加方式效果一样</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110044355-995668881.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">再次重新发起请求，发现响应头中已经返回了我们设置的 <code>Test-Header: testHeader</code></p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110053917-648458866.png"></p>
<p> </p>
<p data-tool="mdnice编辑器">查看我们开始新建的 <code>chrome_devtools</code> 文件夹，发现 <code>Mock</code> 的数据都已经保存到文件夹中了</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110102468-1862509744.png"></p>
<p> </p>
<h2 data-tool="mdnice编辑器">清除拦截的 Mock 数据</h2>
<p data-tool="mdnice编辑器">当我们 <code>Mock</code> 数据程序调试完成之后，想要调用真实的接口数据，这个时候一定要记得清除 Mock 替换文件：</p>
<p data-tool="mdnice编辑器">打开 <code>源代码/来源(Sources)</code> 面板，取消勾选 <code>启用本地替换</code> 或者直接点击<code>清除</code>图标清除即可：</p>
<p><img src="https://img2023.cnblogs.com/blog/1178909/202310/1178909-20231016110109650-1758892700.png"></p>
<p> </p>
<div> </div>
<h2 data-tool="mdnice编辑器"> </h2>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：JeckHui；<br/>
个人主页：前端实用站点推荐； 热榜资讯早读：热榜资讯-导航；<br/>
转载请注明原文链接：https://www.cnblogs.com/xiaohuizhang/p/17766903.html</p><br><br>
来源：https://www.cnblogs.com/xiaohuizhang/p/17766903.html
頁:
[1]