> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# LanderLab 编辑器中的 Live Mode：预览 JavaScript 效果

> 了解如何在 LanderLab 编辑器中使用 Live Mode 预览弹窗、鼠标效果等由 JavaScript 驱动的功能，以及如何切换回 Edit Mode。

## 什么是 Live Mode？

Live Mode（实时模式）是 LanderLab 编辑器内的一种预览状态，让你看到落地页上所有由 JavaScript 驱动的元素，效果与访客实际体验完全一致。

编辑器通常会阻止 JavaScript 运行。这是有意为之的：它让编辑体验保持清爽，并防止你在搭建时出现意外行为。但有些功能，比如弹窗、鼠标效果、滚动动画或其他任何动态交互，都需要 JavaScript 才能工作。通过 Live Mode，你无需离开编辑器就能看到这些效果的实际运行情况。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/V29_6d_Wi-i95CIJ/images/live-mode.png?fit=max&auto=format&n=V29_6d_Wi-i95CIJ&q=85&s=22cdab934dd75e4563a037e02028fc10" alt="处于 Live Mode 的 LanderLab 编辑器，右上角的 Live Mode 按钮处于激活状态" width="1920" height="992" data-path="images/live-mode.png" />
</Frame>

## 何时使用 Live Mode

在以下情况下使用 Live Mode：

* 预览你添加到页面的弹窗、覆盖层或模态框
* 检查鼠标跟随或悬停效果
* 测试任何自定义 JavaScript 交互或第三方脚本
* 查看 AI 生成器在优化后生成的内容：AI 模式会自动把你切换到 Live Mode，让你看到包括所有 JS 效果在内的完整结果

## 如何进入 Live Mode

有两种方式可以进入 Live Mode：

1. **通过底部工具栏** - 点击屏幕底部编辑器工具栏中的播放按钮（三角形图标）。
2. **自动进入** - 每当 AI 模式对你的页面应用优化时，编辑器都会切换到 Live Mode，让你立即看到所有 JavaScript 都在运行时的输出效果。

进入 Live Mode 后，编辑器面板会被禁用。在这种状态下，你无法选择或编辑元素。这是正常现象。

## 如何返回 Edit Mode

有两种方式可以返回编辑：

1. **通过底部工具栏** - 点击工具栏中的铅笔图标。在 Live Mode 下，它会取代播放按钮。
2. **通过右上角按钮** - 将鼠标悬停在编辑器右上角的 “Live Mode” 按钮上，它会变为 “Go to Edit Mode”。点击它即可返回。

## 在 Live Mode 中使用 AI 模式

你无需退出 Live Mode 就能继续使用 AI。Live Mode 开启时，AI 模式面板仍然可用。你可以继续发送提示词、提出修改要求或优化你的页面。每次 AI 应用更新后，Live Mode 都会刷新，让你立即看到结果。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.