# 策展 · X (Twitter) 🔥🔥🔥

> 作者：Evan Bacon 🥓 (@Baconbrix) · 平台：X (Twitter) · 日期：2026-04-30

> 原始來源：https://x.com/Baconbrix/status/2049593820711723315

## 中文摘要

Evan Bacon 推出「serve-sim」，簡化 Agent 工具與 Apple 模擬器的本地與遠端整合。

Evan Bacon 開發的「serve-sim」工具，將 Apple iOS 模擬器轉化為類似「npx serve」的即時預覽服務，透過單一指令「npx serve-sim」即可在瀏覽器中存取模擬器畫面，適用於 Agent 工具如「Codex」、「Cursor」或「Claude Desktop」，支援本地、LAN 或遠端 macOS 隧道主機。此工具完全開源（https://github.com/EvanBacon/serve-sim），預計很快整合進「Expo Agent stack」，加速 Agent 驅動的 iOS 開發迭代。

**核心功能**

「serve-sim」透過小型 Swift 輔助程式擷取模擬器畫面，提供豐富互動與除錯支援：
- 完整 60 FPS 影片串流，直接在瀏覽器呈現。
- 多點觸控手勢，如從底部滑動返回首頁、按住 Option 鍵捏合縮放。
- 拖拉檔案功能：拖放圖片與影片直接加入模擬器裝置，簡化測試流程。
- 模擬器日誌轉發至瀏覽器，讓 Agent MCP 工具輕鬆除錯。
- 鍵盤指令與熱鍵轉發，例如 CMD+SHIFT+H 返回首頁。
- 支援 Apple Watch、iPad 與 iOS 模擬器，無需 Xcode plugin 或應用程式內建儀表化。
- 根據開發者 Evan Bacon 在社群媒體上的分享，該工具針對 React Native 應用程式提供了額外的便利功能，例如顯示 JS 重新載入按鈕。

**CLI 操作與彈性**

CLI 指令簡潔強大，需 macOS 與 Xcode 命令列工具（xcrun simctl）：
```
serve-sim [device...]                 # 啟動預覽伺服器（預設 localhost:3200），自動偵測已開機模擬器
serve-sim "iPhone 16 Pro"             # 指定裝置如 iPhone 16 Pro
serve-sim --detach                    # 背景執行輔助程式，返回 JSON
serve-sim --list                      # 列出執行中串流
serve-sim --kill                      # 終止所有輔助程式
serve-sim gesture '<json>' [-d udid]  # 發送觸控手勢
serve-sim button [name] [-d udid]     # 按壓按鈕（預設 home）
serve-sim rotate <orientation> [-d udid]  # 旋轉方向：portrait | portrait_upside_down | landscape_left | landscape_right
serve-sim ca-debug <option> <on|off> [-d udid]  # 切換 CoreAnimation 除錯旗標（blended|copies|misaligned|offscreen|slow-animations）
serve-sim memory-warning [-d udid]    # 模擬記憶體警告
```
選項包括 -p/--port（預設預覽 3200、串流 3100）、-d/--detach（守護模式）、--no-preview（僅前景串流）。支援多模擬器同時執行，傳入多個裝置名稱或留空附加全部。

**整合與嵌入方式**

「serve-sim」設計為開發伺服器友好，提供多種連接器：
- **Claude Code Desktop**：在 `.claude/launch.json` 定義伺服器，指定 "runtimeExecutable": "npx" 與 "runtimeArgs": ["serve-sim"]，port 3200 即可啟動。
- **Expo**：透過 `npx expo start` 自動啟動，存取 http://localhost:8081/.sim。先自訂 `metro.config.js`（使用 `bunx expo customize`），整合 `simMiddleware({ basePath: "/.sim" })`：
  ```js
  const { simMiddleware } = require("serve-sim/middleware");
  // 在 enhanceMiddleware 中插入 app.use(simMiddleware({ basePath: "/.sim" }));
  ```
- **自訂開發伺服器**：先執行 `serve-sim --detach` 啟動串流輔助，然後在 Metro、Vite、Next.js 或 Express 中嵌入 `simMiddleware`：
  ```ts
  app.use(simMiddleware({ basePath: "/.sim" }));
  // 提供 /.sim（預覽 HTML）、/.sim/api（狀態 JSON）、/.sim/logs（SSE 日誌）
  ```
Middleware 從 $TMPDIR/serve-sim/ 讀取狀態，轉發 MJPEG + WebSocket 端點，CORS 全開無需代理。

**運作原理與優勢**

「serve-sim」架構分離輔助與前端：
```
┌──────────────┐   simctl io   ┌─────────────────┐  MJPEG / WS  ┌─────────┐
│ iOS Simulator│ ────────────► │ serve-sim-bin   │ ───────────► │ Browser │
└──────────────┘   (Swift)     │ (per-device)    │              └─────────┘
                               └─────────────────┘
                                       ▲
                                  state file in
                                $TMPDIR/serve-sim/
                                       ▲
                               ┌──────────────────┐
                               │ serve-sim CLI /  │
                               │ middleware       │
                               └──────────────────┘
```
Swift 輔助（bin/serve-sim-bin）獨立二進位檔，無 Xcode 運行時依賴，CLI 透過 bun build --compile 嵌入 npm 套件。Evan Bacon 強調，此工具解決託管模擬器測試難題，先本地驗證加速迭代，再隧道遠端 URL，讓使用者如本地操作。雖由 Expo 框架開發者打造，但完全框架無關，適用任何 iOS 互動需求。開源歡迎 PR，授權 Apache-2.0。

**開發趨勢啟示**

Evan Bacon 透過「serve-sim」推動自託管模擬器基礎設施，專為 Agent 加速程式開發設計，讓 AI 編輯器與瀏覽器無縫操控模擬器，提升遠端測試效率。預覽連結如 http://localhost:3200，拖放檔案與日誌轉發等細節，凸顯其在 React Native 外廣泛潛力，預計 Expo 整合將進一步擴大影響。

## 標籤

Agent, CLI, 開源專案, iOS, macOS, Apple, Cursor, Expo