VS Code 新神器：编辑器里直接跑 IOS、Android App！移动端开发神器！

以前做移动端开发，经常要在多个工具之间来回切换：VS Code 写代码，Xcode 跑 iOS Simulator，Android Studio 跑 Android Emulator，遇到 H5 / WebView 还得再开 Chrome DevTools。

对于 React Native 开发来说尤其明显。虽然 RN 已经让移动开发越来越接近 Web，但代码、模拟器和调试工具依然是分离的，改个 UI、看个效果，都要不停切窗口。

现在，Mobile Canvas 让这一切开始融合：

直接在 VS Code 里运行 iPhone 和 Android App，并结合 Web 调试能力，实现完整的移动端开发工作流。

什么是 Mobile Canvas？

Mobile Canvas 是一个 VS Code 扩展，可以将本地 iOS Simulator 和 Android Emulator 直接带入 VS Code。

它不仅可以显示设备画面，还支持：

• 创建模拟设备；
• 启动模拟器；
• 实时查看 App；
• 点击、滑动、输入等真实交互。

简单来说：

就是把一台正在运行的 iPhone / Android 手机，直接放进 VS Code。

安装 Mobile Canvas

1. VS Code 安装扩展

打开 VS Code：

Extensions

搜索：

Mobile Canvas

点击安装，完成后重启 VS Code。

也可以直接从 Visual Studio Marketplace 安装。

2. 打开 Mobile Canvas

安装完成后：

点击 VS Code 左侧 Activity Bar：

Mobile

即可打开 Mobile Canvas 面板。

打开后，你会看到：

你的 iOS Simulator 或 Android Emulator 直接显示在编辑器中。

环境要求

iOS

需要：

• macOS
• Xcode
• iOS Simulator Runtime

同时需要：

idb_companion

用于模拟器输入控制。

Android

需要：

• Android SDK
• Android Emulator
• adb

并确保：

adb
emulator
avdmanager

已经加入系统 PATH。

React Native 开发体验

安装完成后，一个典型的 React Native 工作流：

启动项目：

npm start

运行：

npm run ios

或者：

npm run android

代码：VS Code

运行环境：Mobile Canvas

直接查看：

• iPhone Simulator
• Android Emulator

以前：

修改组件 → 切换模拟器 → 查看效果 → 返回代码

现在：

修改 React Native 代码后，直接在 VS Code 中查看 App 效果。

开发体验更加接近 Web 开发中的热更新流程。

不只是预览，而是真实设备交互

Mobile Canvas 并不是简单显示一张模拟器截图。

它提供实时视频流：

• iOS 约 58 FPS
• Android 约 50 FPS

同时支持：

• Tap 点击
• Long Press 长按
• Drag 拖动
• Swipe 滑动
• Keyboard 输入

所以你可以直接在 VS Code 中操作 App。

RN + WebView + H5 一体化调试

现在很多 React Native 应用都是混合架构：

React Native
+
Native Module
+
WebView H5

例如：

• 活动页面
• 商品详情
• 登录流程
• 内容页面

传统开发方式：

Simulator、Android Emulator、浏览器调试工具都是独立环境。

而结合 Mobile Canvas：

VS Code
↓
Mobile Canvas
↓
iPhone / Android
↓
React Native 页面
↓
WebView H5

可以在统一环境中完成：

• RN 页面调试
• Native 能力验证
• H5 页面测试

减少频繁切换工具。

AI Agent + Mobile Canvas

Mobile Canvas 还有一个非常有意思的能力：

它可以通过 MCP 给 GitHub Copilot Agent 提供设备控制能力。

例如告诉 Copilot：

打开我的 React Native App，进入登录页面，输入账号，点击登录，截图检查 UI。

Agent 可以：

• 启动模拟器
• 打开 App
• 执行操作
• 截图
• 分析问题

形成完整闭环。

写在最后

Mobile Canvas 最大的价值，不只是：

在 VS Code 里显示一个手机模拟器。

而是把：

• React Native 开发
• iOS Simulator
• Android Emulator
• WebView H5 调试
• AI Agent 测试

连接成一个统一工作流。

未来的移动端 IDE，可能不再是：

代码编辑器 + 外部模拟器

而是：

代码
+
运行环境
+
AI Agent
+
实时反馈

全部融合在一个开发空间。

在 VS Code 里直接运行 iPhone 和 Android App，这个体验真的太爽了。

以上关于VS Code 新神器：编辑器里直接跑 IOS、Android App！移动端开发神器！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。