本地开发 · 实际测试

共享 localhost：手机预览与 Webhook 测试

网站运行在你的电脑上。创建一个临时 HTTPS 链接，让手机、客户或 Webhook 服务访问它，无需部署。

共享之前：检查本地地址

查看开发服务器显示的 URL。协议和端口很重要：http://localhost:5173 与 https://localhost:7143 是不同的目标。创建隧道前，在电脑上打开准确地址并完成一次常见操作。

一个应用，一个端口

如果页面和 API 使用相同的本地地址，一个隧道即可访问两者。路径保持不变：对公开 /contact 的请求会到达本地应用的 /contact。隧道不会复制或部署你的文件。

前端和 API 使用不同端口

前端隧道不会自动公开另一个端口上的 API。浏览器调用 localhost:3000 时，访问的是访客自己的设备。请使用开发服务器的 API 代理，或为 API 设置可访问的测试 URL，并相应调整前端。

创建公开链接

启动网站或 API，确认可以在本地打开。GhostlyShare 会自动检测正在运行的本地 Web 应用。点击 Go Public 即可创建公开 HTTPS 链接。

  1. 测试期间保持应用和 GhostlyShare 运行。
  2. 分享前先在隐私浏览窗口中打开链接。
  3. 使用测试数据。需要为客户提供私密预览时，可设置密码。

支持 Windows 和 Linux。免费临时链接，无需账户、邮箱或订阅。

下载 GhostlyShare ↗

查看 GhostlyShare 的全部功能 →

显示公开预览和分享控件的 GhostlyShare

分别在电脑和另一台设备上打开公开地址。如果本地页面正常而公开页面失败，对比两个 URL，有助于区分应用问题与隧道或主机配置问题。

在手机上打开 localhost

手机上的 localhost 指手机自身，而不是你的电脑。请打开公开链接，或扫描 GhostlyShare 中的二维码。

  1. 切换到移动数据，检查从 Wi-Fi 之外能否访问。
  2. 在真实设备上测试菜单、表单、键盘和文件上传。
  3. 直接打开内页并刷新，同时检查图片和 API 响应。

只在同一 Wi-Fi 下测试？如果开发服务器和防火墙允许访问，使用电脑的局域网地址可能就够了。公开隧道适合其他网络和外部服务访问。

用于在手机上打开预览的 GhostlyShare 二维码

实用的五分钟手机测试

导航与布局
打开菜单、旋转手机并浏览长页面。检查横向滚动、被遮挡的按钮，以及固定页头后隐藏的内容。浏览器模拟很有用，但无法重现真实设备的所有交互。
表单与会话状态
点击每个输入框，先提交无效值，再提交有效值。检查错误提示是否能在键盘上方看见。如果登录只在电脑上有效，请尝试新会话，并检查回调地址和 Cookie 设置。
请求与加载
测试图片较多的页面和会加载数据的操作。家庭网络中的缓慢响应不能代表生产环境性能。记录出错的页面、设备和操作，以便在本地复现。

向客户展示你的作品

发送需要审核的具体页面，说明要测试什么，以及何时关闭预览。

发送之前

使用测试账户和示例内容，确认不依赖你自己的 Cookie 或登录状态也能打开链接。

提出具体的检查任务

填写联系表单、检查手机菜单，或使用测试支付完成结账。明确的任务更容易带来有用的反馈。

这是今天评审用的预览。请检查手机菜单和联系表单。通话结束后，我会关闭链接。

让反馈能够复现

请评审者提供页面 URL、设备、浏览器及问题发生前的最后操作。截图配上“预期 X，实际出现 Y”比“页面坏了”更有帮助。如果评审时修改应用，请提前说明：根据配置，访客可能立即看到变化或页面刷新。

在本地接收 Webhook

Webhook 服务无法访问你电脑上的 localhost。请提供隧道的公开地址并附上回调路径。本例假设应用已经能够处理 /api/webhooks/demo 上的 POST 请求。

http://localhost:5173/api/webhooks/demohttps://YOUR-TUNNEL.trycloudflare.com/api/webhooks/demo
  1. 将 YOUR-TUNNEL 替换为实际主机名，在服务商的测试设置中填写完整回调 URL。
  2. 保持签名验证开启。在本地保存 Webhook 密钥，并从服务商发送测试事件。
  3. 检查投递状态和本地日志，返回服务商要求的成功响应，处理重试时避免重复执行操作。

浏览器密码提示可能阻止 Webhook 发送方。使用服务商能够访问的端点，并验证其签名请求。CORS 适用于浏览器请求，不适用于服务器之间的 Webhook 投递。

示例：验证 GitHub Webhook 签名 ↗

检查 Webhook 响应，而不只是浏览器页面

在浏览器中打开回调 URL 通常会发送 GET。许多 Webhook 端点要求 POST，因此浏览器报错并不能证明投递失败。发送服务商的测试事件，对比其时间戳、投递 ID 和本地日志。

404 / 405
检查路径与 HTTP 方法，使用 API 的端口，而不是一律使用前端端口。首页能够打开，不代表回调端点存在。
401 / 403
确认请求在哪一层被拒绝：预览密码、应用认证还是签名验证。对于签名数据，请遵循服务商对原始请求正文的要求；在验证前解析并重写正文，可能使签名失效。
5xx / Timeout
检查应用是否运行、是否收到请求。处理较慢时，遵守服务商的响应时限，必要时使用后台任务。测试重复投递，确保不会生成重复订单或消息。

使用服务商的测试模式，避免记录密钥或完整的个人数据。测试成功只确认投递和应用处理正常，不能取代服务商的集成要求。

链接能打开，但部分功能不正常？

公开链接无法连接应用

先打开本地 URL，检查端口、HTTP 与 HTTPS 的区别，以及应用和隧道是否仍在运行。

图片或 API 调用失败

查找写死在代码中的 localhost 地址，尽可能使用相对路径。其他端口上的 API 需要单独的可访问路由。

应用重定向到 localhost

检查公开基础 URL、可信代理设置和登录回调。允许实际的预览主机，而不是全局关闭主机检查。

实时刷新或 WebSockets 失效

确认 WebSockets 使用公开主机，HTTPS 页面使用 wss。某些开发服务器需要单独设置 HMR 主机。

Webhook 没有收到成功响应

检查回调路径、HTTP 方法、签名密钥和投递日志。启动新的临时隧道后，更新回调 URL。

结束测试并停止共享

在 GhostlyShare 中停止共享，或在终端按 Ctrl+C 停止隧道。链接到期时间可自动结束预定预览。完成后也要移除服务商设置中的临时回调 URL。

需要长期使用的固定地址？

临时预览并不等于部署。我们的家庭托管指南介绍命名隧道、域名、Windows 服务和运行成本。

设置长期使用的 Cloudflare Tunnel →

本地预览常见问题

常见问题

为什么手机上无法使用 localhost？

Localhost 指打开该地址的设备。要从手机访问电脑上的应用，请使用公开预览链接。

电脑必须一直开机吗？

是的。电脑、本地应用和隧道都必须继续运行。休眠或停止隧道会使预览无法访问。

预览需要域名吗？

不需要。临时隧道会提供公开 HTTPS 地址。地址变化后，请更新共享链接和 Webhook 设置。