- ¿Por qué no aparece mi archivo CSS o mi imagen en la vista previa?
- Porque la vista previa solo puede ver el código que pegaste, no la carpeta de la que vino. Una línea como <link href="style.css"> o <img src="images/logo.png"> apunta a un archivo que está junto a tu HTML en tu computadora, y ese archivo no vino con él. Las rutas relativas se resuelven contra este sitio web, donde esos archivos no existen. Dos soluciones: pega la hoja de estilos dentro de una etiqueta <style> en el head, o cambia la ruta por una dirección completa que empiece por https://. Las imágenes pequeñas también pueden ir en línea como URI data:.
- ¿Es seguro pegar HTML que tiene JavaScript?
- Más seguro que abrirlo en la mayoría de los sitios visores. La vista previa funciona en un marco aislado (sandbox) con su propio origen opaco, lo que significa que un script dentro de él no puede leer esta página, sus cookies ni su almacenamiento, ni enviar la pestaña a otro sitio. Por eso try{parent.document.title='x'} falla dentro de la vista previa. Pero el aislamiento no vuelve inofensivo el código hostil: un script todavía puede mostrar ventanas emergentes y cargar cosas de otros servidores. No pegues código que nunca ejecutarías en tu propia máquina.
- ¿Se sube mi HTML a algún sitio?
- No. El código va del recuadro de texto directamente a un marco en la misma pestaña, y abrir un archivo lo lee en tu dispositivo. Nada se envía a nuestros servidores ni se guarda. Una cosa a tener en cuenta: si tu HTML hace referencia a recursos externos, como fuentes web, un script de un CDN o un píxel de seguimiento en una plantilla de correo, tu navegador los descarga de sus propios servidores al renderizar la vista previa, exactamente como lo haría si abrieras el archivo localmente.
- ¿Por qué mi script da un error sobre localStorage o cookies?
- Por el aislamiento. Una página con origen opaco no tiene almacenamiento propio, así que leer localStorage, sessionStorage, IndexedDB o document.cookie lanza un SecurityError en lugar de devolver datos. Es el mismo muro que mantiene el código pegado lejos de este sitio. Si tu página depende del almacenamiento, revisa el diseño aquí y luego prueba la lógica de almacenamiento abriendo el archivo desde un servidor local como npx serve o python -m http.server.
- ¿Puedo usarlo para revisar un correo HTML antes de enviarlo?
- Para un primer vistazo, sí. Pega la plantilla, revísala en el ancho Móvil y detecta tablas rotas, imágenes que faltan y titulares que se parten mal. Lo que ves es cómo lo dibuja un navegador moderno, que se parece a Apple Mail y a la mayoría del correo web. No es como lo dibuja cada bandeja de entrada. Outlook para Windows de escritorio lleva mucho tiempo usando el motor de diseño de Microsoft Word, que ignora mucho CSS, y Gmail reescribe algunos estilos. Envíate una prueba antes de un envío grande.
- ¿Qué cambian realmente los anchos Tableta y Móvil?
- Ajustan el marco de la vista previa a 768 o 375 píxeles CSS de ancho, el punto de corte habitual para tabletas en vertical y el ancho de muchos teléfonos. Dentro del marco, el viewport realmente tiene ese ancho, así que las reglas @media (max-width: 600px) se activan y los anchos en porcentaje se reducen. No es un emulador de dispositivos completo: el user agent sigue siendo el de tu navegador de escritorio, no hay eventos táctiles y la proporción de píxeles del dispositivo no cambia. Cuando el marco es más ancho que tu pantalla, se desplaza lateralmente dentro de su recuadro.
- ¿Por qué se desactivó sola la actualización en vivo?
- Tu HTML pasó de 1 MB. Cada redibujado reconstruye toda la página, y a ese tamaño hacerlo tras cada pausa al escribir hace que la pestaña se trabe. La vista previa te espera: edita todo lo que quieras y luego pulsa Ejecutar. Puedes volver a activar Actualización en vivo si quieres. El código pegado y los archivos pueden llegar a 5 MB; más allá de eso, pega la parte en la que estás trabajando.
- Mi página congeló la vista previa. ¿Cómo la recupero?
- Probablemente algo de la página está atrapado en un bucle, como while(true){} o un temporizador que no deja de añadir elementos. Pulsa Borrar para descartar la página. Si la pestaña está demasiado ocupada para responder, recárgala, lo que detiene todos los scripts de la página. Arregla el bucle antes de volver a pegarlo. Los navegadores pueden ejecutar un marco aislado en el mismo hilo que esta página, así que un script desbocado puede ralentizar ambos.
- ¿Puedo abrir un archivo .html en mi teléfono?
- Sí. Toca Abrir archivo y elige el archivo desde tu app de Archivos, Google Drive o tus descargas. Funcionan archivos .html, .htm y .txt de hasta 5 MB, y el archivo se lee en tu teléfono, no se sube. Es útil cuando alguien te envía un adjunto .html por correo y tu teléfono solo ofrece mostrarlo como código. En pantallas pequeñas la vista previa queda debajo del código, así que baja para ver la página.
