做过小程序开发的朋友都知道，写代码只是工作的一半，另一半时间基本都花在调试上。页面不显示、接口报错、样式错乱，这些问题光靠眼睛盯着代码看是找不出原因的，必须掌握一套顺手的调试方法。这篇文章就把小程序调试的常用手段一次讲清楚，帮你少走弯路。
开发者工具是调试的第一站
微信官方提供的开发者工具，是小程序调试最常用的入口。打开工具顶部菜单栏的调试器，你会看到几个熟悉的标签页：Console、Sources、Network、Storage、AppData 等。这些面板和浏览器开发者工具长得差不多，用法也类似。
Console 面板主要用来看日志。代码里写的 console.log 输出的内容，都会出现在这里。接口报错、语法错误、未定义变量这些提示，也都会打印在 Console 里。调试的第一步，往往就是打开 Console 看看有没有红色报错信息，很多问题一眼就能定位。
Sources 面板可以打断点。找到对应的 js 文件，点击行号设置断点，然后触发相应操作，代码就会停在断点处。这时候你能看到当前各个变量的值，一步步单步执行，观察数据是怎么流动的。追查逻辑错误的时候，断点比打一堆日志好用得多。
AppData 面板专治数据渲染问题
小程序有个独特的面板叫 AppData，专门用来看页面绑定的数据。页面显示不对劲的时候，先打开 AppData 看看数据长什么样。如果数据是对的但页面没更新，问题可能出在 setData 的写法上；如果数据本身就是错的，那就要往上追查数据来源。
这里有个实用小技巧：AppData 面板里的数据可以直接编辑，改完页面会实时刷新。想快速验证某个数据变化对页面的影响，不用改代码重新编译，直接在这里改就行。
Network 面板排查接口问题
前后端联调的时候，Network 面板必不可少。它能列出所有发起的网络请求，包括请求头、请求参数、响应内容、状态码和耗时。接口报错时，先看状态码：404 说明地址写错了，500 说明服务端出了问题，200 但数据不对就得对比请求参数。
特别注意一点，小程序要求请求的域名必须在后台配置合法域名，否则真机上请求会直接失败。开发阶段可以在开发者工具里勾选“不校验合法域名”临时跳过，但上线前一定要把域名配好。
真机调试不能省
很多问题在开发者工具里看不出来，到了真机上才暴露。比如获取定位、支付、蓝牙这些依赖设备能力的功能，工具里模拟不了，必须真机跑一遍。真机调试有两种方式：一种是预览模式，扫码后在手机上运行，配合 vConsole 看日志；另一种是真机调试模式，手机上运行的同时，电脑端开发者工具可以实时查看断点和日志，体验和工具里调试基本一致。
真机调试时记得留意性能面板，能看到页面渲染耗时、setData 调用次数和数据量。如果页面卡顿，大概率是 setData 传的数据太大，或者频繁调用 setData 导致的，找到具体调用点优化一下就能明显改善。
几个常见的调试坑
第一个坑是缓存。小程序的本地缓存、代码包缓存都可能让调试结果失真。改了代码没生效，先试试清除缓存或者点击编译按钮强制重新编译。
第二个坑是版本差异。开发者工具的基础库版本可能和手机上的不一致，导致功能表现不同。调试时确认一下基础库版本，尽量用和目标用户一致的版本测试。
第三个坑是线上问题排查。线上环境没法打断点，只能靠后台的运维中心看报错日志。所以开发阶段就要养成好习惯，在关键节点埋好日志，异常捕获后把错误信息上报，这样线上出了问题才有迹可循。
写在最后
小程序调试说难不难，关键是思路要对：先看报错信息，再定位问题层级，是数据问题、逻辑问题还是环境问题，然后用对应的工具去验证。Console、Sources、AppData、Network 这几个面板用熟了，加上真机调试做兜底，90% 的问题都能快速解决。剩下的时间，就可以安心写功能了。