企业官网建设流程全解析

• 前端
• UI库/组件

CanJS 是用于快速构建 CRUD 应用的 MVVM 框架，而其调试体系是新手最容易忽视、却在排查绑定时最关键的一环。本文带你用 can-debug 模块和 CanJS DevTools 浏览器扩展，快速定位"数据变了页面没更新""谁触发了这次修改"这类典型的绑定问题，全程以控制台命令 + 可视化工具为主，代码极少，新手也能照着做。

为什么需要专门的 CanJS 调试工具？

CanJS 的响应式更新发生在队列（can-queues）中，而不是像普通代码那样同步执行。这意味着浏览器自带的调用栈常常"看不到"数据的源头：

• 页面没更新？可能是某个可观察属性根本没被绑定监听；
• 页面更新"乱跳"？可能是多处代码都在修改同一个属性；
• 断点里看调用栈？任务是从队列里 flush 出来的，栈信息不完整。

CanJS 官方为此提供了一整套调试能力，核心入口就是 can-debug 模块和 CanJS DevTools 扩展。官方调试主题文档在 docs/can-guides/topics/debugging.md，可以对照阅读。

第一步：启用 can-debug 搭建调试环境

CanJS 采用模块化导入，默认没有全局对象。can-debug的作用是在window上挂一个can对象，让所有模块都能直接从控制台访问。

ES Modules 项目：使用 core 或 ecosystem 的开发版 bundle 时，can-debug 自动启用，什么都不用做。如果使用压缩版 bundle，需要手动启用：

import { debug } from "can"; debug();

Webpack 项目：只想在开发环境启用时，可以在主模块里按环境判断后再调用debug()。

💡 首次访问全局can对象时会输出一条警告日志，这是提醒你"别过度依赖全局对象"，属于正常现象。

启用后，控制台里就能直接敲can.xxx使用所有调试 API。

控制台排查绑定问题：4 个高频命令

1️⃣can.queues.logStack()：谁触发了这次更新？

在断点处想知道"这次更新是怎么传到我这里的"，就在控制台输入：

can.queues.logStack()

它会打印出导致当前任务入队、执行的完整任务链（函数、this 上下文、参数、meta 信息）。配套演示可以看 demos/can-queues/binding-log-stack.html。

2️⃣logWhatChangesMe/logWhatIChange：数据流向双向追踪

这是排查绑定问题最好用的两个方法，前者回答"谁改了我"，后者回答"我改了谁"：

can.debug.logWhatChangesMe(person, "fullName"); // 谁在修改 fullName can.debug.logWhatIChange(person, "first"); // first 变了会影响谁

参数既可以是可观察对象（+属性名），也可以直接传 DOM 元素，比如document.querySelector("h1.name")。仓库里有两个现成演示：

• demos/can-debug/log-what-changes-map.html：追踪 Map 属性的上游来源
• demos/can-debug/log-what-changes-heading.html：直接追踪页面上某个<h1>由哪些输入框驱动

3️⃣can.viewModel()+log()：实时盯住组件状态

想确认某个组件的绑定数据到底长什么样：

const vm = can.viewModel(document.querySelector("my-component")); vm.log(); // 每次状态变化都打印 vm.log("first"); // 只关注某个属性

如果你用的是can-stache-element，直接在控制台取document.querySelector("my-component").prop就行。

4️⃣ Stache 模板内的debugger与console辅助函数

在模板里也能下断点、打日志：

{{ debugger(condition) }} <!-- 条件为真时在模板求值处中断 --> {{ console.log("resolved:", promise.value) }}

断点触发时，你可以访问模板作用域，还能用内置的get函数检查作用域中的值——这对排查"模板里明明有值但渲染不出来"的问题特别直接。

CanJS DevTools 面板：把绑定问题变成可视化操作

安装 CanJS DevTools 浏览器扩展（Chrome Web Store 搜索 "CanJS Devtools"）后，前提是你的应用已启用 can-debug（2.0.0+），扩展图标才会亮起。它会在 Chrome DevTools 里新增一个CanJS 顶级面板，左侧是组件树，右侧是常用工具区。

组件树 + 可观察属性编辑器

点击组件树中的节点选中组件（在 Elements 面板选中普通元素时，会自动定位到最近的父组件）。右侧的Observable Properties Editor可以：

• 展开 Map / List 逐层查看；
• 直接修改字符串、数字、布尔值（布尔有快捷开关）；
• 增删嵌套属性；
• 点 "Apply Changes" 把修改回写到真实数据——等于不用写一行代码就能做"数据模拟"，非常适合复现绑定 bug。

属性变更断点：让 bug 自己撞进来

面板下方可以创建Observable Properties Mutation Breakpoints，支持两种表达式：

• 属性路径，如order.total、canPlaceOrder——属性值一变就暂停；
• 比较表达式，如order.items.length > 2——从假变真时暂停。

触发暂停时，控制台会自动打印logStack输出，直接看到"是哪条代码链改了这个属性"。配合上一节的 Queues Stack，基本可以告别"猜哪里改的"。

Bindings Graph 与 Queues Stack：两条黄金链路

Bindings Graph：一眼看清绑定的来龙去脉

在 Elements 面板选中任意元素后，侧边栏会出现CanJS Bindings Graph页签（窗口较小时在侧边栏右侧的溢出菜单里），用有向图展示该元素（或其可观察属性）的依赖关系：哪些 Observation 在监听谁、viewModel 的哪个属性驱动了这个节点。默认展示字母序第一个属性，点击标题可以切换属性。

Queues Stack：把队列任务链摊开看

在 Sources 面板断点暂停时，侧边栏的CanJS Queues Stack会以可读的方式展示logStack内容：从事件触发 → Observation 更新 → DOM 更新，逐层列出。点击任意函数即可跳转到其源码定义，排查"更新时序不对"类问题非常高效。

让调试更顺手：命名小技巧

工具好不好用，一半取决于对象名字是否清晰。CanJS 的调试名称遵循构造器名<>[]{}(唯一标识)的约定，你可以主动帮忙：

• 给可观察类起明确的类名；
• 用can.reflect.setName(person, "Person{Justin}")给实例贴标签；
• 回调函数尽量用命名函数表达式而不是匿名函数，这样断点和日志里能直接看到函数名。

总结：按问题选工具

按上面这套流程走，绝大多数 CanJS 绑定问题都能在几分钟内定位到源头。想深入每个 API 的细节，完整文档见 docs/can-guides/topics/debugging.md。

• 前端
• UI库/组件