MatuView — Mobile Emulator
Emula el aspecto de tu web en iPhone y Android directamente desde la barra lateral de VS Code y editores basados en VS Code (Cursor, Windsurf, VSCodium, etc.). Sin emuladores externos, sin Chrome DevTools en otra ventana: un panel con un marco de teléfono realista donde cargas tu URL, haces scroll, click, hover y capturas.
Desarrollado por MatuByte S.A.S.
Características
Marco y dispositivos
- Icono propio en la barra lateral (Activity Bar) — un clic y se abre el panel.
- 18 dispositivos preconfigurados con sus dimensiones reales:
- iPhone SE, iPhone 15, 15 Pro, 15 Pro Max, 16, 16 Pro, 16 Pro Max, 17, 17 Pro, 17 Pro Max
- Pixel 7, Pixel 8, Pixel 8 Pro
- Samsung Galaxy S23, S24, S24 Ultra
- Xiaomi 13, OnePlus 11
- Marco con notch / Dynamic Island, status bar translúcida con hora real, home indicator / gesture bar, y botones laterales decorativos (volumen, acción, power).
- URL editable con persistencia entre sesiones.
- Auto-fit: el teléfono siempre cabe completo en el panel sin recortes.
- Zoom ajustable del 30 % al 200 % sobre el auto-fit.
Herramientas de desarrollo móvil
- 🔄 Auto-recargar al guardar: detecta cambios en
.html, .css, .js, .jsx, .ts, .tsx, .vue, .svelte, .scss, .json, .md de tu workspace y recarga el iframe. Patrón glob configurable.
- 📶 Throttling de red: simula WiFi, 4G, 3G y 2G desde la barra de herramientas (visual; para throttling real necesita que tu app escuche los mensajes
matuview.throttle).
- 📷 Captura de pantalla: exporta el marco del teléfono a PNG con un solo clic. Guarda en la carpeta
.matuview/screenshots/ de tu workspace.
- 👆 Modo touch: convierte clicks en feedback visual tipo ripple para validar gestos e interacciones tipo tap. Las apps modernas ya manejan pointer events sin cambios.
- � Badge de origen: muestra si el iframe es mismo-origen (localhost / file) o cross-origin — útil para saber qué funciones trabajarán a pleno.
Integración con VS Code
- Comandos disponibles desde la paleta de comandos (
Ctrl+Shift+P).
- Configuración persistente en
settings.json.
- Compatible con VS Code 1.85+ y cualquier editor basado en VS Code (Cursor, Windsurf, VSCodium, OpenVSX, etc.).
Uso rápido
- Abre la carpeta de tu proyecto en VS Code.
- Pulsa el icono de celular 📱 en la barra lateral izquierda (sección MatuView).
- Pulsa el engranaje ⚙ en la barra superior del panel.
- Escribe la URL de tu sitio (por ejemplo
http://localhost:3000).
- Pulsa Ir.
- Selecciona el modelo de teléfono que quieres emular desde el dropdown.
- Activa las herramientas que necesites (auto-recarga, throttling, modo touch…).
Si tu web bloquea iframes con la cabecera X-Frame-Options: DENY o Content-Security-Policy: frame-ancestors, sírvela en local o ajusta esa cabecera en desarrollo para permitir el embedding desde vscode-webview://*.
Configuración
Todas las preferencias viven en la sección MatuView dentro de Settings (también puedes editarlas en settings.json).
| Setting |
Default |
Descripción |
matuview.defaultDevice |
iphone-15-pro |
Dispositivo al abrir el emulador. |
matuview.zoom |
1 |
Zoom inicial sobre el auto-fit (0.3 – 2). |
matuview.showNotch |
true |
Muestra el notch / Dynamic Island. |
matuview.allowScripts |
true |
Permite JavaScript en el iframe (necesario para React, Vue, Vite, etc.). Requiere recargar el panel. |
matuview.watchFiles |
false |
Activa la auto-recarga al guardar archivos del workspace. |
matuview.watchPattern |
**/*.{html,css,js,jsx,ts,tsx,vue,svelte,scss,sass,less,json,md} |
Patrones glob que disparan la recarga. |
matuview.reloadMode |
full |
full = recarga completa con cache-bust. soft = respeta el HMR del dev server. |
Comandos
Abre la paleta (Ctrl+Shift+P o Cmd+Shift+P) y escribe:
- MatuView: Abrir emulador móvil — enfoca el panel.
- MatuView: Recargar — recarga la URL actual con cache-bust.
- MatuView: Abrir URL en navegador externo — abre la URL en tu navegador por defecto.
- MatuView: Activar/desactivar auto-recarga al guardar — alterna el watcher de archivos.
- MatuView: Capturar pantalla del emulador — guarda un PNG del marco del teléfono.
Limitaciones
- No es un emulador nativo: usa un
<iframe> dentro del webview de VS Code, por lo que no reproduce sensores (giroscopio, acelerómetro), vibración, push notifications, cámara, geolocalización, ni APIs nativas de móvil.
- Sitios con
X-Frame-Options: DENY o frame-ancestors restrictivo no se cargarán: sirve tu web en local (http://localhost:3000) o quita esa cabecera en desarrollo.
- Throttling real requiere que tu aplicación escuche los mensajes
matuview.throttle enviados vía postMessage. Para sitios externos (cross-origin) la simulación es sólo visual porque el navegador bloquea el acceso al DOM del iframe.
- Scroll se hace dentro del iframe (intencional, para que se sienta como un celular real).
- Las capturas de pantalla rasterizan el iframe con
html2canvas — los iframes cross-origin pueden aparecer en blanco por la política de canvas tainting del navegador.
Privacidad
MatuView se ejecuta completamente en tu máquina. La única comunicación de red es la carga de la URL que tú mismo configuras. No se envía telemetría, ni analítica, ni información del usuario a ningún servidor externo.
Soporte
¿Encontraste un bug o tienes una sugerencia? Escríbenos por cualquiera de estos canales:
MatuByte S.A.S.
Licencia
MIT © MatuByte S.A.S.
| |
