把开发者工具当工作台

很多人的微信开发者工具只用了两个功能：编译预览和扫码看看效果。实际上它是一个完整的 IDE：断点调试、网络抓包、数据面板、性能 trace、云函数本地调试、自动化上传都在里面。把它用顺，能省掉大量“改一行、传一次、等一分钟”的低效往返。

小程序没有浏览器 DevTools，开发者工具里的“Wxml 面板 + AppData 面板 + Network 面板”就是你唯一能看见运行时的窗口，先把这三块用熟，胜过记住一百个快捷键。
微信开发者工具配图：代码面板、放大镜齿轮与真机设备
把开发者工具从“预览按钮”用成完整工作台，关键是善用调试器、自定义编译与云函数的本地调试

下面按“配置 → 调试 → 真机 → 自动化”的顺序，把最值得投入时间的功能过一遍。

项目配置与自定义编译

project.config.json 是工具的行为开关。它不改动线上运行结果，但直接影响你的开发体验，尤其是这几项。

{
  "miniprogramRoot": "miniprogram/",
  "setting": {
    "urlCheck": false,            // 开发期关闭域名校验；上线前必须回到 true 验证
    "es6": true,                  // 开启 ES6 转 ES5
    "enhance": true,              // 增强编译，支持更多新语法
    "postcss": true,              // 样式补全，自动加浏览器前缀
    "minified": true,             // 上传时压缩代码
    "compileHotReLoad": true,     // 保存即热重载
    "packNpmManually": false
  },
  "condition": {
    "miniprogram": {
      "list": [
        { "name": "带参数的详情页", "pathName": "pages/detail/detail",
          "query": "id=1001&from=share", "scene": 1007 }
      ]
    }
  }
}

condition 里的自定义编译模式是效率倍增器：它让“启动页 + 启动参数 + 场景值”成为可保存的组合。分享进入、扫码进入、带参数跳转这些路径，以前要点半天才能复现，现在下拉框选一下就能直接停在那一步。把常用的三五个入口都存下来，调试成本会立刻下降。

调试器面板的正确用法

点击工具栏的“调试器”打开面板，真正需要掌握的是四块。

  • Wxml：小程序的“元素面板”。这里能看到节点树、当前样式来源，还能查看 setData 的调用记录与每次的数据差异——排查“界面没更新”时，第一件事就是看这里有没有对应的 setData。
  • AppData：实时展示页面 data 与组件 data 的当前值，是确认“数据到底有没有变”的最快途径。
  • Network：能看到所有 wx.request、wx.uploadFile 的请求头与响应体，域名未配置时还会明确提示。接口出错时先看这里，比在业务代码里打印要直观。
  • Storage：查看 wx.setStorage 写入的本地缓存。缓存类 Bug（旧数据没清、key 拼错）几乎都能在这里一眼看出。
// 让日志自带上下文，面板里才好筛选
function log(scope, ...args) {
  console.log(`[${scope}]`, ...args);
}
log("order", "提交订单", { id, amount, from: "cart" });

// Network 面板里给请求打标记（自定义 header，便于识别来源）
wx.request({
  url: "https://example.com/api/order",
  method: "POST",
  header: { "content-type": "application/json", "X-From": "miniprogram-cart" },
  data: { id },
  success: (res) => log("order", "下单成功", res.data)
});

一个小习惯值得坚持：所有日志带模块前缀。线上排查时，控制台按前缀过滤，比在全量日志里翻要快得多；这个习惯在你换成真机调试后同样有效。

预览、真机调试与远程调试

这三个词经常被混用，但能力差别很大，用错会白白浪费时间。

方式能否断点适用场景
预览（扫码）不能验证真机上的样式、交互与设备能力，最轻量
真机调试能模拟器正常但真机异常时定位问题，可在手机上看到调试面板
远程调试（PC 调试手机）能用电脑上的调试器连真机运行环境，断点体验最接近桌面开发
真机比模拟器更容易暴露的三类问题
  • 接口与域名模拟器可能开着“不校验合法域名”，真机不会，未配置的域名直接失败。
  • 样式与安全区刘海屏的底部安全区、滚动容器的惯性滚动，在真机上的表现和模拟器不同。
  • 权限与授权相机、定位、相册授权在真机上才会真实弹窗，且用户可能点“拒绝”，必须写降级分支。

建议在每次功能完成时都做一次“预览 + 真机调试”的组合动作：预览确认外观，真机调试确认数据与分支。等到提测再上真机，返工成本会高出一截。

云开发控制台与云函数本地调试

使用云开发的项目，开发者工具里会多出一个“云开发”入口，它就是云开发控制台：数据库、存储、云函数、日志、环境配置都在这里。它最有价值的两个功能是“数据库可视化编辑”与“调用日志检索”。

// 云函数本地调试需要一份调试配置，指定入参与环境
// cloudfunctions/login/config.json（示例）
{
  "permissions": { "openapi": [] },
  "envVariables": { "APP_ENV": "local" },
  "timeout": 20
}

// 右键云函数目录 → “开启本地调试”，工具会：
// 1) 在本机以 Node 运行该函数，node_modules 复用云函数目录
// 2) 支持断点、单步、查看调用栈
// 3) 本地不生效的能力（如真实 openid）会注入占位值，注意区分

本地调试能极大缩短“改代码—上传—验证”的循环，但要记住两个差异：本地没有真实的 OPENID，云调用与部分开放接口也不可用。因此逻辑分支走本地、真实链路走测试环境，是比较稳妥的组合。