Laboratorio de Código
Laboratorio online de HTML, CSS y JavaScript con vista previa en vivo, editor con números de línea y consola capturada. Prueba fragmentos al instante y descarga el resultado como un archivo HTML - todo en tu navegador.
¿Qué es un laboratorio de código?
Un laboratorio de código es un entorno aislado donde puedes escribir HTML, CSS y JavaScript y ver al instante el resultado renderizado. Este añade una consola capturada, editores con números de línea y la posibilidad de descargar tu trabajo como un archivo HTML único.
¿Cómo funciona la vista previa en vivo?
Los tres paneles de código se combinan en un documento HTML completo y se muestran dentro de un iframe en sandbox. Con la ejecución automática activada, la vista previa se actualiza medio segundo después de dejar de escribir; si no, pulsa Ejecutar.
¿Qué muestra el panel de consola?
Todo lo que la página escribe con console.log, console.info, console.warn y console.error, además de errores en tiempo de ejecución y promesas rechazadas sin manejar, con sus números de línea. Se vacía en cada ejecución.
¿Se guarda mi código si recargo la página?
Sí. Un borrador de los tres paneles se guarda localmente en tu navegador y se restaura en la siguiente visita. Restablecer devuelve el código de demostración original, y borrar los datos del sitio elimina el borrador.
¿La vista previa está aislada? ¿Es segura?
La vista previa se ejecuta en un iframe en sandbox sin acceso del mismo origen, por lo que los scripts que pruebes no pueden leer esta página ni sus cookies. Aun así, prueba solo código de confianza, porque se ejecuta en tu navegador.
¿Puedo descargar mi experimento?
Sí. Descargar .html guarda el HTML, CSS y JavaScript actuales combinados en un solo archivo autocontenido que puedes abrir en cualquier navegador o compartir.
¿Qué puedo ejecutar en el panel de JavaScript?
JavaScript de navegador estándar: manipulación del DOM, eventos, canvas, fetch a APIs públicas (sujeto a sus reglas CORS) y cualquier librería que pegues en línea. No se resuelven módulos ni paquetes npm.
¿Necesita conexión el laboratorio?
Solo para cargar la página en sí. La edición, la vista previa y la captura de consola funcionan después localmente, y tu código nunca se sube a ningún sitio.
Cómo usar Laboratorio de Código
Este laboratorio combina tu HTML, CSS y JavaScript en una vista previa en vivo dentro de un sandbox, por completo en tu navegador, con un panel de consola que captura registros y errores. Se guarda un borrador localmente para que continúes donde lo dejaste.
- Edita los paneles de HTML, CSS y JavaScript: cada editor tiene números de línea y resaltado de sintaxis.
- Con la Ejecución automática activada, la vista previa se refresca mientras escribes; si no, pulsa Ejecutar (o desactiva la Ejecución automática y ejecuta manualmente).
- Vigila el panel de Consola bajo la vista previa: la salida de console.log, avisos, errores y excepciones no capturadas aparecen ahí con números de línea.
- Pulsa Restablecer para volver a la demo integrada, o Descargar .html para guardar todo en un único archivo autosuficiente.
- Usa Abrir en nueva ventana para ver el documento actual a tamaño completo en su propia pestaña.
La consola se borra en cada ejecución, así que añade console.log sin miedo al depurar: aparecen al instante sin abrir la consola real del navegador.
Herramientas relacionadas
- Embellecedor JavaScript Embellecedor y formateador de código JavaScript gratuito en línea. Convierta instantáneamente JS minificado en código limpio, legible y bien indentado con opciones personalizables.
- Minificador JS Minifica código JavaScript al instante. Elimina espacios, comentarios y optimiza tu JS para menor tamaño y carga más rápida.
- Probador de Regex Prueba y depura expresiones regulares con coincidencia en tiempo real y captura de grupos.
- Vista Previa Markdown Editor Markdown en línea gratuito con vista previa en vivo. Escriba, renderice y exporte Markdown con soporte GFM completo.
- Verificador de Hash Calcule y verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Visor Hexadecimal Vea el contenido de archivos en formato hexadecimal con búsqueda, navegación por desplazamiento y desplazamiento virtual