---
title: 预览您的商店
description: 打开当前店面预览并在发布前检查页面和响应式布局。
---

**条目路径：** 工作区 → 选择商店 → **店面**

<Frame>

![Runner 商店预览和控件](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgkyhbRgjXIfFwWx7Qu1lJBZMSPHcazYdR0voC)

</Frame>

## 本指南内容

在 Runner 内查看当前店面、在其页面之间移动，并检查它在桌面、平板电脑和手机布局上的外观，无需发布。

## 为什么以及何时使用预览

Runner 创建或更改店面后使用预览。这是在客户看到缺失的副本、损坏的路由、糟糕的移动布局或未完成的部分之前捕获它们的最安全的地方。

预览与实时商店分开。在这里看起来正确的页面不能证明公共 URL、目录数据、库存、支付连接或结账有效。

## 可用性和先决条件

- 打开具有现有店面活动或可预览版本的项目。
- 如果页面显示**还没有店面**，使用该页面上的提示要求 Runner 构建第一个版本。
- 如果显示**正在构建您的店面的第一个版本…**或**准备预览…**，预览还未准备好。
- 某些工作区使用较新的基于检查点的店面。确切的版本控制可能因分阶段可用性而异。

当启用条件对话版本卡片时，选择已完成工作卡的店面图像或**预览**会打开该任务创建的确切就绪版本。它可能是历史性的而不是最新的。对于没有保存版本历史的较旧项目，最新店面工作卡上的**预览**打开当前实时预览。在编辑或开始发布之前检查**v…**、**当前版本**和**已发布**标签（如果可用）。

任务完成或源代码构建成功本身并不表示预览已经更新。Runner 会在任务完成后将已完成的店面版本提升为可预览版本。如果提升失败，预览会保留上一个成功版本；如果此前没有成功版本，则会显示没有已构建的预览。因此，请确认屏幕上显示的版本和预览结果。

## 打开预览

1. 打开您的 Runner 工作区。
2. 选择您想查看的商店。
3. 在项目导航中选择**店面**。
4. 等待当前版本出现在预览区域中。

如果项目还没有店面：

1. 在**描述您想构建的商店…**中输入您想要的内容。
2. 选择**开始构建**，或按**Enter**而不按 Shift。
3. Runner 创建对话并将该描述作为第一个请求发送。
4. 如果创建失败，描述保留在字段中，以便您可以重试。

## 预览控件

| 控制 | 您使用它的原因 | 选择它时会发生什么 |
| --- | --- | --- |
| **返回** | 返回到预览内访问的上一页。 | 预览在其自己的页面历史中向后移动。它不会离开您的 Runner 项目。 |
| **前进** | 返回后重新访问页面。 | 当存在更晚的历史条目时，预览向前移动。 |
| **电脑 / 平板 / 手机** | 检查响应式布局。 | 每个选择将预览框循环到下一个设备大小。它不会更改实时店面。 |
| 路径字段，例如 `/` | 打开已知的店面路由。 | 选择路径，在同一预览网站上输入另一个路径，然后按**Enter**。无效或外部地址被忽略。 |
| **刷新** | 在更改或停滞渲染后重新加载当前预览。 | Runner 重新加载可见页面并清除活动的设计模式选择和撤销/重做会话。首先保存待处理的设计更改。 |
| **在新标签页中打开** | 用更多空间查看预览。 | Runner 在另一个浏览器标签页中打开此预览 URL。这仍然是预览，不是已发布商店的证明。 |
| 版本标签，例如 **v1 · 当前** | 识别您正在查看的内容。 | 标签将最新当前版本与历史预览区分开来。 |
| **设计模式** | 开始视觉编辑。 | 当最新版本符合条件时，Runner 打开设计工作区。 |
| **版本历史** | 比较较早的店面版本。 | Runner 打开版本列表而不更改当前店面。 |
| **打开代码编辑器** | 此高级控件可用时，检查或编辑店铺前台源代码。 | Runner 打开全高的**代码编辑器**对话框。关闭后会回到店铺前台的预览面板；请在那里验证可见结果。 |
| 硬币 / **赚取免费积分** | 打开推荐优惠。 | Runner 打开推荐对话框；仅打开它不会赚取积分。 |
| 积分计数 / **升级** | 查看积分、计划或使用选项。 | Runner 打开一个弹出窗口，其可用操作可能导致工作区计费或使用情况。 |
| **发布**、**发布更改**或**重新发布** | 启动适合当前状态的发布流程。 | Runner 在任何发布开始前运行访问和就绪检查。 |

## 逐页查看店面

1. 从 `/` 开始并扫描标题、公告区域、英雄、特色产品、部分和页脚。
2. 选择每个可见导航链接。确认目标出现且预览路径按预期更改。
3. 从店面打开产品页面。确认其标题、媒体、价格、选项、可用性和购买控制可见。
4. 对不是从当前页面链接的重要路由使用路径字段。
5. 循环通过**电脑**、**平板**和**手机**。查找剪裁的内容、重叠的控制、不可读的文本和水平滚动。
6. 仅在保存任何设计模式更改后选择**刷新**。
7. 在 Runner 聊天中记录任何问题，包括页面路径、设备大小和预期结果。

## 状态、限制和故障排除

| 您看到的 | 含义 | 要做什么 |
| --- | --- | --- |
| **还没有店面** | Runner 既没有找到现有店面活动也没有找到保存的可预览版本。 | 要求 Runner 创建店面。 |
| **正在构建第一个版本…** | 第一个版本仍在准备中。 | 跟踪任务进度并等待最终结果。 |
| **准备预览…** | Runner 正在启动所选预览。 | 保持页面打开；仅当状态停止进行时才使用**刷新**。 |
| **无法加载此版本的预览** | 所选版本无法显示。 | 返回到当前版本、刷新或向 Runner 报告版本和错误。 |
| **重新连接预览** | Runner 丢失了预览连接并正在重试。 | 保持项目打开并跟踪重试计数。如果无法恢复，重新连接工作区。 |
| 带有**修复**的预览错误栏 | 预览报告了 Runner 可以检查的错误。 | 选择**修复**或**修复错误**以将显示的诊断发送给 Runner。使用**显示更多**展开详细信息，仅使用**关闭**隐藏消息。 |
| 控件被禁用 | 预览当前不支持该操作、工作区已断开连接或 Runner 正在工作。 | 等待 Runner、在提示时重新连接工作区，或返回到最新就绪版本。 |
| 预览看起来正确但实时商店不正确 | 更改尚未发布，或您正在查看不同的版本。 | 检查版本标签，然后使用[发布更改](./publish-and-republish)。 |

## 相关指南

- [使用设计模式](./design-mode)
- [编辑内容、页面和媒体](./edit-content-pages-and-media)
- [检查和编辑店面代码](./inspect-and-edit-code)
- [使用版本历史](./version-history)
- [准备发布](./prepare-to-publish)