逆向开发如何冻结某个状态下页面 dom 结构

有时候我们看到一些很漂亮的网页动效，习惯性地打开开发者工具对其 dom 元素进行审查。如果其动效是单单通过 css 样式编写的，那么我们可以直接通过开发面板的工具栏进行设置，如下图位置：

但如果是通过 js 事件响应的，例如给某个元素绑定了鼠标移入事件，那么上面的办法是不生效的。

这里以 Ant Design Landing Page - Ant Design Landing 模板与规范 的官网为例，审查三大特征处的JS动效：

这样便能冻结某个状态下的页面 dom 结构了。