Sources 面板入口

点击顶部菜单栏的 “调试器”（或按 Ctrl + Shift + D）。

选择 “Sources” 选项卡。

主要功能区域

Sources 面板主要分为 4 个核心区域：

文件导航区（左侧）

结构：以树状目录展示小程序的源代码，主要包括下图四大类：

pages/：小程序页面文件（.js, .wxml, .wxss, .json）。

代码编辑区（中部）

功能：显示当前选中文件的源代码。
设置断点：点击行号左侧，出现蓝色标记（断点生效时会变成红色）。
编辑代码（仅临时修改，不会保存到实际文件）。
右键菜单：
Add breakpoint：添加断点。
Continue to here：执行到此处。
Reveal in sidebar：在导航区定位文件。

调试控制区（右侧）

提供调试控制工具：

调试工具栏（顶部）

控制代码执行流程的按钮：
按钮图标 功能 快捷键

▶️（Resume） 继续执行（直到下一个断点） F8
⏸（Pause） 强制暂停 -
➡️（Step over） 单步执行（不进入函数） F10
⬇️（Step into） 单步进入（会进入函数内部） F11
⬆️（Step out） 跳出当前函数 Shift + F11
🔄（Restart） 重新执行当前脚本 -
🚫（Stop） 终止调试 -

关键调试技巧

（1）设置断点
在代码行号左侧点击，添加断点。
条件断点：右键断点 → Edit breakpoint，输入条件（如 x > 10）。

（2）调试异步代码
在 Promise、setTimeout 或 wx.request 回调中设置断点。

使用 Async Stack Traces（勾选开发者工具设置中的 “Enable async stack traces”）追踪异步调用链。

（3）查看变量状态
在 Scope 面板中查看局部/全局变量。

在 Watch 面板添加表达式（如 this.data.list.length）。

（4）修改代码实时生效
直接编辑代码后，按 Ctrl + S 保存，小程序会重新编译（但不会持久化到磁盘文件）。

常见问题

Q1：Sources 面板看不到源码？

确保编译模式正确（如未启用 minify 压缩代码）。
检查 project.config.json 中 setting 是否关闭了代码压缩：
json
“setting”: {
“minified”: false
}

Q2：断点不生效？

确认代码已正确编译（无语法错误）。

检查是否启用了 “Pause on exceptions”（可能意外暂停）。

Q3：如何调试 WXML 或样式？

使用 WXML Panel 和 Elements Panel（类似 Chrome DevTools），而非 Sources 面板。