A Visual Studio Code extension for Android/iOS device previewing and management.
Mobiledeck is a VSCode extension that allows developers to view and interact with Android/iOS devices directly within their development environment.
- Device Discovery: Automatically discover and connect to mobile devices
- Real-time Preview: View device screens with real-time streaming
- Interaction: Interact with the device though taps and keypresses
- Remote Connection: Connect to devices on remote hosts
- Node v20+
- VSCode (v1.85.0 or higher)
-
Clone the repository:
git clone https://github.com/mobile-next/mobiledeck.git cd mobiledeck
-
Install dependencies:
make npm_install
- Build the extension:
make
- Launch VSCode
- Press Cmd-P and select:
Extensions: Install from VSIX
- Press Cmd-P and select:
Reload Window
- Open panel by clicking on Mobiledeck (M) icon, or by pressing Cmd-P and selecting
Mobiledeck: View device
Note that you have to install and reload window every time you build a new version of the .vsix file. No need to uninstall prior.
You can work on the UI itself without iterating through vsix compilation. This gives you the opportunity to shorten the feedback loop and get immediately results.
Notes:
- mobilecli server needs to be started manually on localhost:12000. Simply run
mobilecli start server --cors
.
To start an http server and webpack on watch, simply run:
cd assets
npx -y http-server
and in another terminal:
cd webview-ui
npm run watch
Then simply open http://localhost:8080/ and you should be good to go. Webpack will detect code changes and automatically rebuild, y 71BD ou will still need to refresh the page when desired.