# 调试技巧

URL: https://caijiao.org/animejs/7-tips/2-debug
Source: docs/animejs/7-tips/2-debug.md
Description: 本节介绍 Anime.js 动画调试的常用方法，包括利用回调函数打印状态、控制动画暂停和恢复，以及监控动画实例等，并配有示例演示。

动画调试能帮助你快速定位问题，优化动画效果。下面介绍几种实用的方法：

## 1. 利用回调函数打印动画进度

Anime.js 提供了多种回调函数，如 `begin`、`update`、`complete`，可在其中打印动画状态。

```js
anime({
  targets: ".box",
  translateX: 250,
  duration: 1000,
  update: function (anim) {
    console.log("动画进度:", anim.progress.toFixed(2), "%");
  },
});
```

## 2. 暂停和恢复动画

动画实例支持 `.pause()` 和 `.play()` 方法，方便在调试时控制动画进度。

## 3. 监控当前所有动画实例

`anime.running` 数组包含当前所有运行中的动画，便于调试动画状态。

## 4. 简化动画步骤

将复杂动画拆分为简单步骤，逐步排查问题。

## 示例演示

[在线代码演示](/animejs/demos/21.html)

### 说明

- 动画方块左右往返移动；
- 页面和控制台实时输出动画进度；
- “暂停动画”和“继续动画”按钮，方便调试动画播放状态；
- 使用立即执行函数避免变量污染和重复声明。
  rgb(240, 240, 240)rgba(240, 240, 240, 0.75)