Visor y editor de archivos JS

Abre, lee y edita archivos JavaScript directamente en tu navegador: sin IDE, sin Node, sin necesidad de instalar nada. Mejora el código minificado, detecta errores de sintaxis por línea y columna, y explora cada función e importación. ¿Necesitas optimizar el código para producción? Prueba el minificador de JS/CSS . ¿Datos o estilos? Usa el visor JSON o el visor CSS.

Comprobación de sintaxis Embellecer y minimizar Esquema Tratar:
Herramientas relacionadas
Minificar JS/CSS JSON Viewer Visor de CSS Visor HTML Visor XML

Cómo ver un archivo JavaScript Online

  1. Abre tu archivo JS. Arrastra y suelta archivos .js, .mjs, .cjs, .jsx, .ts, .tsx o .json en el cuadro, búscalos o pega el código con Ctrl+V. Todo se guarda en tu navegador.
  2. Lee el código resaltado. El archivo se abre con resaltado de sintaxis, números de línea, ajuste de línea y plegado de código. Se ejecuta una comprobación de sintaxis de inmediato, que señala la línea y columna exactas donde se encuentra cualquier error.
  3. Embellece, busca y explora. Pulse Embellecer para que el código minimizado sea legible, busque con Ctrl+F (se admiten expresiones regulares), salte con Ctrl+G y abra Esquema para ver todas las funciones, clases, importaciones y exportaciones.
  4. Copiar, editar o exportar. Copia una función, edítala directamente, descarga el archivo, exporta un rango de líneas o el código HTML resaltado, o descarga todos los archivos abiertos a la vez.

¿Trabajas con otros formatos? Ábrelos en el Visor CSS , el Visor JSON , el Visor HTML o el Visor XML.

Para todo lo demás , consulta la colección completa de más de 200 visores de archivos.

Características del visor JS

Rápido con archivos grandes

Solo se dibujan las líneas en pantalla y el análisis se ejecuta en segundo plano. Los paquetes de varios megabytes se desplazan con fluidez.

Comprobación de sintaxis

Todos los archivos se analizan (nunca se ejecutan). Los errores muestran la línea y la columna exactas, a un solo clic.

Embellecer y minimizar

Convierte un archivo .min.js de una sola línea en código legible o reduce su tamaño con las opciones que prefieras. Puedes revertir los cambios cuando quieras.

Búsqueda de expresiones regulares

Coincidencia de mayúsculas y minúsculas, palabras completas y expresiones regulares; cada coincidencia se resalta. Ctrl+G salta a cualquier línea.

Esquema

Cada función, clase, método, importación y exportación con su número de línea. Copia una función con un solo clic.

Grafo de dependencias

Consulta de un vistazo qué importa un archivo: archivos relativos, paquetes npm y funciones integradas de Node.js.

Vista dividida y edición

Compare dos archivos uno al lado del otro o edítelos directamente con sangría automática y emparejamiento de corchetes.

6 temas de código

VS Code, GitHub Dark, Monokai, Dracula, GitHub Light o Auto para seguir el modo oscuro del sitio.

Acerca de los archivos JavaScript

JavaScript es el lenguaje de la web.

Funciona en cualquier navegador y, a través de Node.js, en servidores, herramientas de compilación y aplicaciones de línea de comandos.

A .js El archivo es de texto plano, por lo que cualquier editor lo abre. Sin embargo, sin resaltado ni esquema, un archivo desconocido tarda en leerse.

Tipos de archivos JavaScript

  • . Js - Scripts clásicos y módulos ES, el tipo más común.
  • .mjs / .cjs - archivos que son explícitamente módulos ES (import) o CommonJS (require) en Node.js.
  • .jsx / .tsx - Componentes de React que combinan etiquetas similares a HTML con código.
  • .ts - TypeScript, JavaScript con anotaciones de tipo.
  • json - datos en sintaxis de objeto JavaScript. Para una vista de árbol, utilice la JSON Viewer.

Cuándo usar un online visor JS

  • Inspección rápida - Leer un script o fragmento descargado sin abrir un IDE pesado.
  • Dispositivos restringidos - Visualiza JavaScript en Chromebooks o PCs restringidas por el trabajo donde no puedes instalar software.
  • Código no confiable - Examina el contenido de un script sospechoso con seguridad, porque aquí nadie lo ejecuta.
  • Comparar versiones - Carga dos archivos uno al lado del otro para detectar qué ha cambiado.
  • Comprender las dependencias - Visualiza todas las importaciones de un vistazo con el gráfico de dependencias.
  • Toma una función - Copiar una sola función de un archivo grande sin necesidad de desplazarse.

JavaScript minimizado y mapas de origen

Los sitios web envían JavaScript minimizado: se eliminan los comentarios y los espacios, se acortan los nombres y todo aparece en una sola línea.

El visor detecta automáticamente los archivos minimizados y ofrece la opción de mejorar su formato. Esta función restaura la indentación y los saltos de línea, pero no los nombres originales de las variables.

Muchos paquetes terminan con un //# sourceMappingURL= Comentario que apunta a un mapa de origen con las fuentes originales. La vista Esquema muestra ese enlace, pero nunca se carga.

¿Necesitas lo contrario? Minimiza aquí con compresión y modificación opcionales, o utiliza el minificador de JS/CSS también para CSS.

Atajos de teclado

TecladosAcción:
Ctrl + FBúsqueda, con coincidencia de mayúsculas y minúsculas, palabra completa y expresiones regulares.
Ctrl + GIr a la linea
Alt + ZAjuste de línea activado/desactivado
FVista completa mientras el código tiene el foco, Esc para salir.
Ctrl + VAbrir el código pegado como un archivo nuevo
Ctrl + SAplicar ediciones en el modo de edición

Preguntas frecuentes

Arrastra tu archivo .js a esta página y se resaltará instantáneamente su sintaxis en tu navegador.

Sin VS Code, sin Node, sin instalación: funciona en cualquier dispositivo, incluidos Chromebooks, tabletas y ordenadores de empresa donde no se puede instalar software.

Sí. Los archivos se leen localmente y nunca se suben a ningún servidor.

El visor nunca ejecuta tu código; solo se analiza y se muestra como texto, por lo que ni siquiera un script malicioso puede hacer nada aquí.

Abra el archivo .min.js y presione Embellecer. Reinserta el código y coloca cada instrucción en una línea separada, con el tamaño de sangría y el estilo de llaves que elijas.

Revertir trae de vuelta el original. ¿Vas en la otra dirección? Usa Minify aquí o el Minificador de JS/CSS.

Abra el archivo y mire la barra de verificación que está encima del código. Nombra el línea y columna detecta el primer error de sintaxis y salta allí con un solo clic.

Los archivos sin errores muestran un mensaje verde que dice "Sin errores de sintaxis".

Abra un segundo archivo con Agregar archivo., entonces presione Dividida en la barra de pestañas.

Los dos archivos aparecen uno al lado del otro y se desplazan de forma independiente, lo que resulta útil para comparar dos versiones de un módulo.

Sí. Con más de dos archivos abiertos, Descargar todo Los agrupa en un archivo ZIP con un archivo README en su interior.

Se pueden descargar directamente uno o dos archivos. También se puede exportar un rango de líneas o una página HTML resaltada.

In Esquema El visor dibuja cada instrucción de importación y requerimiento como un pequeño gráfico.

Los archivos relativos, los paquetes npm y las funciones integradas de Node.js están codificados por colores, y al hacer clic en una casilla se copia su ruta.

JavaScript moderno (.js), módulos ES (.mjs), CommonJS (.cjs), React JSX (.jsx), TypeScript (.ts, .tsx) y JSON: hasta 10 MB cada uno.

La sintaxis ES2025, como clases, campos privados, encadenamiento opcional y async/await, es totalmente compatible. Para otros formatos, consulte nuestra Más de 200 visores de archivos.

Guías y tutoriales

Las 14 guías
Guía Cómo saber qué formato tiene un archivo de imagen (5 maneras fáciles) Lee la guia Guía Cómo abrir archivos ZIP, RAR, 7Z y TAR.GZ Online (Sin instalar nada) Lee la guia Comparación PNG vs JPG: ¿Qué formato de imagen deberías utilizar realmente? Lee la guia