微信小程序——在微信开发者工具中打印可复制的接口返回数据

微信小程序 | December 4, 2025

文章链接：https://blog.csdn.net/qq_43201350/article/details/155573457

在微信小程序开发过程中，我们经常需要查看接口返回的数据结构以便调试和开发。然而，在微信开发者工具中，有时候在 Network 面板中难以直接复制完整的响应数据，特别是在处理复杂嵌套对象时。本文介绍一种实用的方法，通过在控制台打印可复制格式的数据，方便我们在开发过程中快速获取和使用接口返回的数据。

问题背景

在微信小程序开发过程中，我们常常会遇到以下情况：

需要查看接口返回的具体数据结构
想要复制接口返回的数据用于测试或其他用途
Network 面板中的响应数据难以直接复制，尤其是大型嵌套对象
需要在代码中临时输出某些接口数据以便调试

解决方案

我们可以使用 console.log 结合 JSON.stringify 方法，将接口返回的数据以格式化的JSON字符串形式输出到控制台，这样既便于查看数据结构，也方便复制。

以下是一个实际示例：

// 假设这是一个获取地区数据的异步函数调用
const regionData = await fetchRegionData();
console.log('接口返回的地区数据:', regionData);

// 将数据转换为格式化的 JSON 字符串，便于查看和复制
const jsonStr = JSON.stringify(regionData, null, 2);
console.log('地区数据JSON:', jsonStr);

在这段代码中：

fetchRegionData() 是一个模拟的获取地区树形数据的异步函数
第一个 console.log 输出原始对象，可以在控制台中展开查看
JSON.stringify(regionData, null, 2) 将对象序列化为格式化的 JSON 字符串，缩进为 2 个空格
第二个 console.log 输出格式化的字符串，可以直接复制

示例数据结构

假设我们的接口返回如下结构的数据：

const demoData = {
  code: 200,
  message: "success",
  data: {
    regions: [
      {
        id: 1,
        name: "北京市",
        code: "110000",
        children: [
          {
            id: 2,
            name: "东城区",
            code: "110101"
          },
          {
            id: 3,
            name: "西城区",
            code: "110102"
          }
        ]
      },
      {
        id: 4,
        name: "上海市",
        code: "310000",
        children: [
          {
            id: 5,
            name: "黄浦区",
            code: "310101"
          }
        ]
      }
    ]
  }
};

使用我们的方法后，会在控制台输出如下格式化的内容：

{
  "code": 200,
  "message": "success",
  "data": {
    "regions": [
      {
        "id": 1,
        "name": "北京市",
        "code": "110000",
        "children": [
          {
            "id": 2,
            "name": "东城区",
            "code": "110101"
          },
          {
            "id": 3,
            "name": "西城区",
            "code": "110102"
          }
        ]
      },
      {
        "id": 4,
        "name": "上海市",
        "code": "310000",
        "children": [
          {
            "id": 5,
            "name": "黄浦区",
            "code": "310101"
          }
        ]
      }
    ]
  }
}

进阶用法

如果你希望生成一个可下载的 JSON 文件（在 H5 环境中），可以使用以下代码：

// 生成JSON文件下载（仅适用于H5环境）
const jsonStr = JSON.stringify(regionData, null, 2);
// #ifdef H5
const blob = new Blob([jsonStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'region-data.json';
a.click();
URL.revokeObjectURL(url);
// #endif

实际效果

使用这种方法后，你将在微信开发者工具的控制台中看到类似以下的输出：

接口返回的地区数据: {data: {…}, code: 200, message: "success"}
地区数据JSON: {
  "data": {
    "regions": [
      {
        "id": 1,
        "name": "北京市",
        "children": [
          {
            "id": 2,
            "name": "东城区"
          }
        ]
      }
    ]
  },
  "code": 200,
  "message": "success"
}

现在你可以轻松地复制格式化的 JSON 数据，并将其用于测试、文档编写或其他用途。

注意事项

对于包含循环引用的对象， JSON.stringify 会抛出异常，需要特殊处理
这种方法主要用于开发和调试阶段，在生产环境中应该移除这些日志输出
对于特别大的数据对象，控制台输出可能会影响性能，建议按需使用
在团队协作中，建议将这类调试代码注释掉而不是直接删除，方便其他开发者查看

最佳实践

为了更好地管理调试日志，建议采用以下做法：

// 开发环境下输出详细日志
if (process.env.NODE_ENV === 'development') {
  console.log('接口返回的地区数据:', regionData);
  console.log('地区数据JSON:', JSON.stringify(regionData, null, 2));
}

// 或者使用专门的调试开关
const DEBUG_MODE = true;

if (DEBUG_MODE) {
  console.log('接口返回的地区数据:', regionData);
  console.log('地区数据JSON:', JSON.stringify(regionData, null, 2));
}

总结

通过在代码中合理使用 console.log 和 JSON.stringify ，我们可以更方便地在微信开发者工具中查看和复制接口返回的数据。这种方法简单有效，能够显著提高我们在开发微信小程序时的调试效率。

当我们需要快速查看接口数据结构、复制数据用于测试或者排查问题时，这种技巧尤其有用。同时，它也避免了在Network面板中难以复制复杂数据的问题，让开发过程更加顺畅。