本機開發 · 實機測試

分享 localhost：手機預覽與 Webhook 測試

網站在你的電腦上執行。建立暫時的 HTTPS 連結，讓手機、客戶或 Webhook 服務存取，不必部署。

分享前先確認本機位址

查看開發伺服器顯示的 URL。通訊協定與連接埠很重要：http://localhost:5173 和 https://localhost:7143 是不同的目的地。建立通道前，在電腦開啟正確位址並完成一次常見操作。

一個應用程式，一個連接埠

如果頁面與 API 使用相同本機位址，一個通道就能存取兩者。路徑保持不變：公開 /contact 請求會送到本機應用程式的 /contact。通道不會複製或部署檔案。

前端與 API 使用不同連接埠

前端通道不會自動公開其他連接埠上的 API。瀏覽器呼叫 localhost:3000 時，連到的是訪客自己的裝置。請使用開發伺服器的 API Proxy，或提供可存取的 API 測試 URL，並配合調整前端。

建立公開連結

啟動網站或 API，確認能在本機開啟。GhostlyShare 會自動偵測執行中的本機 Web 應用程式。按下 Go Public 即可建立公開 HTTPS 連結。

  1. 測試期間請讓應用程式與 GhostlyShare 持續執行。
  2. 分享前先在私密瀏覽視窗中開啟連結。
  3. 使用測試資料。需要提供客戶專用預覽時，可設定密碼。

支援 Windows 與 Linux。免費暫時連結，無須帳號、電子郵件或訂閱。

下載 GhostlyShare ↗

查看 GhostlyShare 的所有功能 →

顯示公開預覽與分享控制項的 GhostlyShare

分別在電腦與另一台裝置開啟公開位址。若本機頁面正常但公開頁面失敗，比較兩個 URL，可協助區分應用程式問題與通道或主機設定問題。

在手機上開啟 localhost

手機上的 localhost 指手機本身，不是你的電腦。請開啟公開連結，或掃描 GhostlyShare 的 QR 碼。

  1. 切換至行動數據，確認從 Wi-Fi 以外也能存取。
  2. 在實際裝置上測試選單、表單、鍵盤與檔案上傳。
  3. 直接開啟內頁並重新整理，也要檢查圖片與 API 回應。

只在同一個 Wi-Fi 測試嗎？若開發伺服器與防火牆允許存取，電腦的區域網路位址可能就足夠。公開通道適合其他網路及外部服務使用。

在手機開啟預覽用的 GhostlyShare QR 碼

實用的五分鐘手機測試

導覽與版面
開啟選單、旋轉手機並瀏覽長頁面。留意橫向捲動、被遮住的按鈕，以及固定頁首後方的內容。瀏覽器模擬很有幫助，但無法重現實機的每一種互動。
表單與工作階段
點選每個輸入欄位，先送出無效值，再送出有效值。確認錯誤訊息在鍵盤上方仍可見。若只有電腦能登入，請用新的工作階段測試，並檢查回呼位址與 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、信任的 Proxy 設定與登入回呼。允許實際的預覽主機，不要全面停用主機檢查。

即時重新載入或 WebSockets 失效

確認 WebSockets 使用公開主機，並在 HTTPS 頁面使用 wss。有些開發伺服器需要另外設定 HMR 主機。

Webhook 未收到成功回應

檢查回呼路徑、HTTP 方法、簽章密鑰與傳遞記錄。啟動新的暫時通道後，請更新回呼 URL。

結束測試並停止分享

在 GhostlyShare 停止分享，或在終端機按 Ctrl+C 停止通道。設定到期時間可自動結束預定預覽。完成後，也請移除服務商設定中的暫時回呼 URL。

需要長期使用的固定網址？

暫時預覽不等於正式部署。居家架站指南說明具名通道、網域、Windows 服務與運作成本。

設定長期使用的 Cloudflare Tunnel →

本機預覽常見問題

常見問題

為什麼手機無法使用 localhost？

Localhost 指開啟網址的裝置。若要從手機存取電腦上的應用程式，請使用公開預覽連結。

電腦必須一直開機嗎？

是的。電腦、本機應用程式與通道必須持續執行。進入睡眠模式或停止通道後，預覽就無法使用。

預覽需要網域嗎？

不需要。暫時通道會提供公開 HTTPS 網址。網址變更時，請更新分享連結與 Webhook 設定。