调试工具

一个 Canvas 绘图软件调试是困难的，因为画在 Canvas 上的图像没办法通过浏览器控制台方便的查看属性。

但 Short Night 则不同！Short Night 拥有极为强大的调试工具支持！你可以通过浏览器控制台来检查 Short Night 的 Component，甚至可以打断点！

若你使用第三方的基于 Short Night 开发的 Timeline，它可能还会在 Debug 模式下额外再打印一句话。我们推荐每一个基于 Short Night 开发的 Timeline 都在 Debug 模式下额外打印一行自己的标志性 log。

检查自己是否在 DEBUG 模式下

若已在 Debug 模式下，Short Night 运行时会在 Web 控制台打出一行The night is short, walk on girl.日志。

手动管理 Debug 模式

若你使用 Webpack 的--mode选项，一般情况下 Short Night 可以自动跟随--mode指定的工作方式。

当然也有一些情况不会。

具体来说，Short Night 会尝试读取process.env.NODE_ENV是否为development来开启 Debug 模式。这依赖于 Webpack 的 DefinePlugin 插件配置。当你使用webpack --mode=development时，Webpack 会自动添加插件配置new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),。因此 Short Night 可以正确读取并启用 Debug 模式。

当然你可以手动配置，在webpack.config.js中增加：

    plugins: [
+       new Webpack.DefinePlugin({
+           'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+       }),
    ],

然后使用cross-env来跨平台赋值环境变量：

npm install cross-env --save-dev

然后修改package.json：

   "scripts": {
-    "dev": "webpack --watch --mode=development",
+    "dev": "cross-env NODE_ENV=development webpack --watch --mode=development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

在控制台中检查 Short Night Component

确保你处于 Debug 模式下，打开浏览器控制台，使用浏览器的检查元素功能

然后，你会发现你可以选择一个 Short Night Component！

其中，标签名为 Short Night Component 名，每一个属性是 drawInfo 中的属性。

并且，我们还建立了一个全局变量来保存这个 Component，变量名即为标签id。

所以，如果你想在控制台中快速找到 timeline 元素，只需要在控制台中输入 timeline，浏览器控制台会帮你自动补全后缀

为每个 Component 创建全局变量是GeneratorId扩展完成的。

有时，你可能会觉得根据 drawInfo.box 生成的元素太烦了，干扰了你正常使用 devtools 的检查元素，这时，你可以使用全局的clearBox()来清除所有自动生成的box元素。

---

允许开发者通过浏览器控制台检查元素是BoxElementGenerator扩展，它根据 Component 的drawInfo.box创建 DOM 元素，然后存放在 Component 中的.extraData.boxElement中。

这 2 个扩展已默认集成在 Short Night 中，无需额外安装和配置，会自动跟随 Debug 模式来启用与关闭。

打断点

仅支持在 async function 中打断点。使用如下代码：

await this.ext.breakpoint.block(Breakpoint.Debug);

若处于 Debug 模式，该代码会 Short Night 绘制过程中自动暂停。想要恢复，调用this.ext.breakpoint.next()或全局的next()即可。

看上去有些鸡肋？

重点在于 Short Night 预先定义了许多的断点，你可以初始化 Timeline 的时候指定要停滞的断点：

import { ExtensionManager } from 'short-night'
import { Breakpoint } from 'short-night/extensions/BreakpointAnimation';

new Timeline({
    ...Timeline.mount('#app', 'polar-day'),
    ext: new ExtensionManager({
        breakpointAnimation: {
            breakpoints: [Breakpoint.FixEventBody2AxisMilestone],
        }
    }),
});

这样，Short Night 会在解决 EventBody 和 AxisMilestone 冲突时暂停。

程序级别的断点还有一个好处 —— 它可以自动前进。Short Night 自动播放绘制流程，就是依靠断点实现的。

---

该功能由BreakpointAnimation扩展提供，已默认集成在 Short Night 中。

打日志

Short Night 为每个组件提供了打日志的方法（只是提供方法，引擎 Component 本身没有打任何日志），只有当 Debug 模式开启时才会显示。

比如，在 draw 方法中打出日志：

    draw() {
+       this.l`Draw EventMark, the drawInfo is ${this.drawInfo}`;
        return super.draw();
    }

你可以在控制台看到：

它对比普通的console.log()有如下特点：

• 调用方便，使用模板字符串少写了一对小括号
• 不会将对象转换成[object Object]字符串
• 自动添加主题名/Component名 #前缀
• 跟随 Short Night 的 Debug 模式来决定输出与否，你可以在正式发布时不删除它

你也可以调用short-night/common/functions中的createLogFunction()方法来生成一个这样日志函数。