使用微信开发者工具的调试器

在工作中，前端向后端发送请求，拿到数据。由于各种原因，会导致拿不到数据等，所以学会调试接口是必要的。

以下是使用微信开发者工具的调试器介绍

• Wxml：可看到真实的页面结构和属性，通过左边的选择器，可快速找到页面中元素对应代码

• Consle：显示小程序的错误输出，打印console.log的内容，可在此输入和调试代码

• Storage：显示当前项目中使用setStorage或setStorageSync储存在本地的数据

• Sources：小程序编译出错时可点击错误跳转到这里查错，打断点调试

• Network：观察和显示接口的请求情况

  • 选择XHR：可查看当前发送的请求
    • 点击请求：Headers可查看请求数据（最底下Request Payload显示请求接收到的参数）Preview和Response可查看响应数据

• Appdata：显示项目当前页面 appdata 里的实时数据情况，可在此处编辑数据，并及时反馈到界面上

我平常调试接口的步骤：

1. 查看状态码
2. 检查请求路径、方式
3. 请求头类型
4. 查看是否传递参数，检查参数格式
5. 查看后端返回的数据Preview