Logging

调试代码或动画流程的一种方法是使用日志消息。为此，motion-canvas 有自己的内置日志记录方法。

要获取 motion-canvas 中 Logger 的引用，你可以使用 useLogger 函数：

import {makeScene2D} from '@motion-canvas/2d';
import {useLogger} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const logger = useLogger();
  // ...
});

Basic

现在我们知道如何获取对 Logger 的引用，我们可以看看记录消息的不同方法。一种方法是使用标准日志记录函数，如 debug、info、warn 和 error，并简单地记录一个字符串：

logger.debug('Just here to debug some code.');
logger.info('All fine just a little info.');
logger.warn('Be careful something has gone wrong.');
logger.error('Ups. An error occured.');

这些消息将显示在 UI 中左侧的 Console 选项卡下。

Payloads

在某些情况下，你可能希望在日志消息中有更多细节，比如 stacktrace 或 object。你可以使用 payloads 为你的日志消息提供更多信息。

logger.debug({
  message: 'Some more advanced logging',
  remarks: 'Some remarks about this log. Can also contain <b>HTML</b> tags.',
  object: {
    someProperty: 'some property value',
  },
  durationMs: 200,
  stack: new Error('').stack,
});

这会在 UI 中创建一个折叠的日志消息，可以展开以查看所有提供的详细信息。

如果你想快速调试某些东西，你也可以使用 debug()。这样你就不必手动 useLogger 并创建 payload。

Profiling

除了记录消息之外，还可以使用 Logger 对代码的某些部分进行性能分析：

logger.profile('id'); // <-- 开始性能分析
// 一些昂贵的计算
logger.profile('id'); // <-- 结束性能分析