预览工具
检查元素、放大镜、截图、机型（含折叠机）、缩放、安全区、设计底图与参考线、多设备预览与控制台输出。
预览面板
预览区展示 HTML、CSS、JavaScript 的运行结果，可在编辑器旁或下方显示。修改代码后点击「运行」（或 Ctrl/Cmd + Enter）刷新预览。
检查元素
在编辑器预览工具栏点击「检查」，悬停元素会看到浅描边和标签（选择器与宽高）。再点击即可钉住描边，并跳到 HTML 面板中对应的开标签。也可以在 HTML 面板点击某个开标签（或把光标放进该标签内），预览会描边对应元素。在 CSS 面板点击选择器里的类名或 id（如 .card、#hero），预览会描边所有匹配元素。按 Esc、点空白处或关闭「检查」即可退出。改过 HTML 后请先「运行」再检查，否则跳转可能不准。仅由 JavaScript 生成的节点没有 HTML 源码——检查可能跳到最近的 HTML 祖先，或保持不动。检查仅在编辑器内预览可用，新标签多设备预览没有此开关。
检查面板
钉住元素后，预览上会出现一张卡片，可从顶部拖动。图层列出祖先（外层在上）；点击某一层会钉住该层并跳到其 HTML 开标签。脚本生成的层标为 js，不会跳转。属性显示标签名（不可点），以及 #id 与 .class。仅当编辑器 CSS 面板里写有对应选择器时，该记号才可点——会切到 CSS 并高亮第一处匹配。下方的计算尺寸、外边距、边框、内边距、字体、颜色与背景为只读对照，不会写回源码。
放大镜
在预览工具栏打开「放大镜」，指针跟随预览画面，便于查看阴影、圆角和细节。可选 2× 或 4×。按 Esc 或关闭「放大镜」退出。放大镜与「检查」不能同时开。多设备预览各槽也有同样入口。
预览截图
在预览工具栏点击「截图」，可导出当前预览为 PNG：复制到剪贴板，或下载文件。可选截取长图（完整滚动高度），或打开「选区截图」后点「开始框选」，到预览上拖拽、松开后调整，再复制或下载。手机或平板外框打开时，还可把机身一起截进去（长图与选区不含外框）。检查模式下的描边不会出现在成品图里。Canvas、WebGL（如 Three.js）和外链图片通常截不到。多设备预览各槽顶栏也有同样的截图入口。
设备与机型
在预览工具栏打开设备菜单，选择桌面、平板或手机机型及其逻辑分辨率。桌面可铺满预览区，也可指定固定机型。折叠机在列表中标「折叠」，并列出封面与内屏尺寸；选中后用「折叠 / 展开」在两档之间切换。设备名称和尺寸单独一行，点「竖屏 / 横屏」即可旋转，没有单独的旋转图标。打开设备外框可看到机身；关掉外框后折叠机内屏中缝仍会显示，可用折叠缝开关单独关掉。手机和平板视口不显示桌面滚动条，滚轮和触控板仍可滑动；桌面预览保留滚动条。多设备预览同一套控件。
预览缩放
预览工具栏的缩放控件提供「适应」（所选设备视口完整显示于预览区）、「100%」（按逻辑像素 1:1）与「放大」（100%–200% 查看细节）。桌面「铺满」档下改变缩放时，页面的逻辑视口宽度会随之变化，媒体查询断点按缩放后的宽度生效，适合核对断点附近的布局。多设备预览的每个槽还有独立缩放与「自动适应」。
安全区域
打开设备外框后，预览设置里的「安全区域」按当前机型模拟 env(safe-area-inset-*) 取值（刘海、圆角、Home Indicator 的内缩范围），在预览上叠加安全区参考线；视口尺寸保持不变，便于检查内容是否避开系统区域。遮罩颜色与不透明度可在同一面板调整，参考线仅本机显示。网页端的开关在预览设置中与外框联动；桌面端每个预览窗格可独立开关。
设计底图与参考线
「设计底图」可上传一张设计稿（PNG / JPG 等图片，不超过 8MB）叠在预览画面下方，对照检查还原度：支持调节不透明度、拖动定位与一键复位；图片仅保存在本机浏览器，不会上传，也不会进入分享。桌面「铺满」档不显示底图，请在设备菜单选择具体桌面机型（如 MacBook Pro 14″）后再对照。「视口网格」提供方格、栏格与三分构图参考线，格子边长 / 栏格列数、颜色与不透明度可调，同样仅本机显示。配合「设计稿换算」帮助文的倍率速查表，可把设计稿尺寸准确换算到预览。
预览环境
点击预览工具栏的调色盘打开「预览环境」。「预览主题」关闭时跟随系统明暗；打开后可在明亮 / 暗黑间切换，用于检查 matchMedia、CSS light-dark() 或 @media (prefers-color-scheme)。还可调整设备周围的背景色和透明度。书本折展开后中缝是两条细线，颜色、透明度和显示均可调。点预览空白（含机型屏幕）即可收起弹层。内嵌预览与多设备预览会同步同一设置。
新标签打开
点击预览工具栏的外部链接图标，可在完整浏览器标签中打开多设备预览。布局可选「单个」（一栏）、「对比」（两台并排）或「横向」（可滚动的设备条）。底栏有控制台（console / 报错）。禅模式会隐藏顶栏与控制台，专注全屏结果。此标签没有「检查」。
控制台输出
在编辑器设置 → 工作区 中启用「编辑器内控制台」后，日志与错误会显示在预览下方或旁边的控制台面板。新标签多设备预览页也自带控制台，与编辑器内控制台相互独立。可选择「运行时清空控制台」。控制台里的报错条目可一键「问 AI 诊断此错误」：把该错误与附近日志发给 AI 助手分析原因，需先在编辑器设置 → AI 完成配置。