Chrome Mock 插件升级啦！！！

插件地址：chromewebstore.google.com/detail/mock…

感谢大家在过去一年里对 Chrome Mock 插件的支持与喜爱！正是因为有你们的陪伴与反馈，我才能不断优化这个插件，使其更贴合前端开发的实际需求。

今天非常高兴，因为 Chrome Mock 插件完成了一次重大升级，新增了诸多实用功能，让前端开发更加高效便捷。下面，就让我们逐一了解这些新功能吧！

先展示一下升级后的界面图😁。

新增功能介绍

1. 新增 Modify Headers 功能，可以灵活地添加或修改请求的 HTTP Headers。
2. 新增 Modify Request Body 功能，支持在请求发送前修改请求体内容。
3. Modify API Response 功能增强：原本仅支持通过 URL 拦截接口，现在新增了按 request body 进行拦截的能力（仅适用于 POST 和 PUT 请求）。
4. 新增 网站域名配置，可以为 Mock 配置绑定特定域名，让 Mock 数据仅在指定域名下生效。
5. 新增 JSON 转 TypeScript Interface 功能，自动将 JSON 数据生成对应的 TypeScript 类型定义。
6. 样式优化：新增深色主题，同时优化了界面布局和交互细节。

1. 增加 Modify Headers 功能

在前端开发过程中，我们经常会遇到需要修改请求头（Headers）的场景。

比如，当我们在本地开发环境中调试 API 时，可能需要模拟生产环境中的某些特定请求头，如 Authorization（认证信息）、Content-Type（请求内容类型）等，以确保 API 能够正确解析请求并返回预期数据。

有了 Modify Headers 功能，我们就可以轻松地自定义请求头，无需每次都手动修改代码或使用其他工具，极大地提高了开发效率。

注意：

修改 Header 时，如果有添加 接口地址，这个配置只对这个接口生效。

如果没有添加 接口地址，这个配置则对所有接口生效。

2. 增加 Modify Request Body 功能

对于 POST 或 PUT 类型的请求，请求体（Request Body）中携带的数据同样至关重要。在开发过程中，我们可能需要对请求体中的数据进行修改，以测试 API 在不同数据情况下的表现。

例如:

1. 在开发一个上传用户信息的接口时，我们可能需要模拟不同的用户数据结构，以验证接口的健壮性和数据处理逻辑。Modify Request Body 功能让我们能够灵活地调整请求体内容，无需每次都重新编写请求代码，使得接口测试更加高效。
2. 某些接口的参数是通过 body 传递到后端的，比如分页信息。这种情况下，仅根据 URL 无法精准 Mock 所需的数据。例如，当前页面的 pageNum = 1，pageSize = 10，但你希望修改为 pageNum = 1，pageSize = 100，这时可以通过 Modify Request Body 功能轻松实现，满足你的需求。

3. Modify API Response 功能升级

在之前的版本中，Modify API Response 功能仅支持根据 URL 拦截接口。现在，我们为 POST 和 PUT 请求类型添加了根据 body（请求体） 拦截接口的功能。

这意味着，当我们在 Modify API Response 中配置 POST 或 PUT 请求时，如果请求的 body 与配置的 body 完全一致，该接口才会被 Mock（如果有配置 Request body）。

这一升级使得我们能够更精确地控制接口的 Mock 行为，特别是在处理复杂的请求体数据时，能够更好地模拟真实的 API 响应。

4. 增加网站域名配置

在使用过程中，有小伙伴反馈，两个网站可能存在相似的接口名，例如 /user/userInfo，这个接口同时出现在了 网站A 和 网站B。本来只需要在 网站A 中进行 Mock，但却意外影响到了 网站B，导致使用时不够方便。

为了让 Mock 配置更加灵活，我新增了网站域名配置功能。现在，可以为在分组管理里为每个 Mock 分组配置一个或多个网站域名。

当配置了网站域名后，当前分组下的 Mock 配置只会在配置的域名下生效。

例如，你可以为正式环境配置域名 https://websiteA.cn，为本地开发环境配置域名 http://localhost:3000，两个域名用逗号或分号分隔。这样，不同环境下的 Mock 配置互不干扰，确保了开发和测试的准确性。

5. 增加根据配置的 JSON 转 TypeScript interface 功能

在前端开发中，TypeScript 的使用越来越广泛，它能够帮助我们更好地管理类型，提高代码的可维护性和可读性。

为了方便开发者将 JSON 数据转换为 TypeScript 接口，新增了根据配置的 JSON 转 TypeScript interface 功能。只需简单配置，即可自动生成对应的 TypeScript 接口代码，无需手动编写，大大节省了开发时间，同时也降低了因手动编写接口代码而引入错误的风险。

Mock JSON	TypeScript interface

interface 也可以自定义配置。

• Prefix：类型前缀。
• ObjSuffix：对象类型后缀。
• ArrSuffix：数组类型后缀。
• Required：类型是否必要。

6. 样式优化

为了提升用户体验，我们对插件的样式进行了全面优化。

• 新增了大多数程序员最喜欢的 深色主题（个人主观观点😁），同时也支持切换为 浅色主题，满足不同用户的视觉需求。
• 导入、导出功能被挪到了 menu 外面，使得这些功能更方便使用。
• 分组的 Tabs 增加了收起功能，使得界面更加整洁。

深色主题	浅色主题

总结

此次 Chrome Mock 插件的升级，涵盖了从 Request Headers、Request body 到 API 响应的全方位功能增强，同时还优化了用户体验和界面样式。这些新功能的加入，使得前端开发人员和测试人员在进行 API 开发、测试和调试时更加得心应手，能够更高效地完成开发和测试任务。未来，我将继续关注前端开发的需求变化，不断优化和扩展插件功能，为大家提供更加优质的开发工具。

插件工具难免有没考虑到的边界情况，如发现使用上有什么问题，可通过公众号【前端实战笔记】联系我，我将尽快修复。

再次感谢大家的支持，期待这个工具能给大家带来更多的便捷！

快要过年了，借此机会，在这里祝大家新年快乐，来年一帆风顺、心想事成。