Live Server是唯一能稳定运行JS动画和交互的方式，因file://协议受浏览器严格限制：requestAnimationFrame会暂停、fetch报CORS错误、ES模块不支持、IntersectionObserver判定异常；需检查script位置、控制台错误、DOM存在性及资源路径。
直接用 Live Server 插件运行，是唯一能稳定看到 JS 动画和交互效果的方式。双击打开或拖进浏览器走 file:// 协议，多数 JS 动画会卡住、不触发，甚至报错。
为什么 file:// 协议下 JS 动画常失效
现代浏览器对本地文件协议做了严格限制，不是所有 JS 动画都“看起来没动”，而是根本没执行：
-
requestAnimationFrame在某些浏览器中会降频或暂停（尤其页面非激活标签页时） - 使用
fetch加载 JSON 或图片资源会直接抛net::ERR_FILE_NOT_FOUND或 CORS 错误 - ES 模块（
import语法）在file://下完全不支持，脚本报Failed to load module script - 基于
IntersectionObserver的滚动触发动画，可能因初始不可见区域判定异常而跳过回调
Live Server 启动后仍看不到动画？检查这几点
即使开了服务器，JS 动画也可能静默失败。常见原因和验证方式如下：
- 确认
<script>标签放在</body>前，或加defer属性；否则document.querySelector可能返回null - 打开浏览器开发者工具（F12），切换到
Console标签页，看是否有Uncaught ReferenceError或TypeError: Cannot read property 'animate' of null - 动画依赖的 DOM 元素是否真被渲染出来？可在
Elements面板里搜索对应 class/id，确认节点存在且未被display: none或visibility: hidden隐藏 - 检查
Network标签页，看 JS 文件、字体、SVG 等资源是否 404；Live Server默认以当前 HTML 所在目录为根路径，src="js/app.js"实际请求的是http://127.0.0.1:5500/js/app.js
调试 JS 动画的关键操作
光“跑起来”不够，得知道它哪一步卡住了。最实用的调试手段集中在开发者工具里：
立即学习“前端免费学习笔记（深入）”；
- 在 JS 动画启动函数（如
startAnimation()）第一行打断点，按 F8 运行，确认函数确实被调用 - 对
requestAnimationFrame回调函数设断点，观察每次帧是否如期进入，performance.now()时间戳是否连续 - 在控制台输入
getComputedStyle(document.querySelector('.my-anim-element')).transform，直接读取当前计算后的 CSS 变换值，比肉眼判断更准 - 若用 GSAP 或 Framer Motion，它们的调试模式（如
gsap.config({debug:true})）会在控制台输出时间轴状态，别忽略这个开关
真正容易被忽略的，是动画逻辑和 DOM 生命周期的耦合——比如在 DOMContentLoaded 里启动动画，但元素是后来用 innerHTML 插入的；或者用 setTimeout 延迟动画，却没考虑用户切换标签页导致的定时器延迟。这些不会报错，但动画就是“不动”，得靠断点+时间戳交叉验证才能揪出来。
