Tiny Online Tools logoTiny Online ToolssearchBuscar herramientas…grid_viewTodas las herramientas
Iniciochevron_rightHerramientas de ingeniería inversachevron_rightVisualizador de Dependencias de Bundles JSVisualizador de Dependencias de Bundles JS

Visualizador de Dependencias de Bundles JS

Encuentra los límites de módulos dentro de un bundle webpack, Rollup, esbuild o Vite y ve qué módulo requiere a cuál, mediante coincidencia real de forma del AST, no adivinando texto.

Origen del bundlePegar códigoSubir archivo

Herramientas similares

Inspector de Bundle Webpack

Inspector de Bundle Webpack

Detecta el arranque en tiempo de ejecución de webpack, el mapa de módulos y los metadatos de chunk-push mediante forma del AST, muestra el código real de cada módulo y avisa claramente cuando un archivo no es salida de webpack.

Analizador de Tamaño por Source Map

Analizador de Tamaño por Source Map

Atribuye los bytes de un bundle a los archivos y carpetas de origen que los produjeron, usando su archivo .map — descubre qué ocupa espacio de verdad.

Analizador de soportes de impresión 3D

Analizador de soportes de impresión 3D

Encuentra los voladizos y las islas flotantes de un STL o 3MF que necesitarán soportes y estima el material que costarán.

Analizador de cabeceras de correo

Analizador de cabeceras de correo

Descifra la cadena Received de un correo, los retrasos de entrega y los resultados SPF, DKIM y DMARC, pegando el texto o subiendo el archivo.

Visor de Pick-and-Place

Visor de Pick-and-Place

Traza un archivo CSV de centroides / pick-and-place como una vista de la placa por arriba y por abajo, busca designadores e inspecciona la posición, rotación y cara de cada componente.

vCard QR generador

vCard QR generador

crear a contact card QR código that phones can escanear a add contacts directly.

Visor CSV

Visor CSV

Visualiza y explora archivos CSV en una interfaz de tabla.

apps

Mas herramientas

Explora nuestra coleccion completa de herramientas gratuitas en linea.

Qué encuentra

Los sitios modernos envían un único archivo JavaScript construido a partir de cientos de archivos fuente. Esta herramienta mira dentro de ese archivo e intenta recuperar los límites de módulo originales — agnóstico del empaquetador, usando la forma real del AST en lugar de coincidencias de texto, que se rompen en cuanto el código está minificado.

Lo intenta, en este orden:

  1. Forma function-map de webpack — una IIFE cuyo argumento es un objeto o array donde cada entrada es una función (module, exports, require). Esto también detecta el clásico envoltorio webpackUniversalModuleDefinition, sin importar lo profundo que esté la llamada real al mapa de módulos.
  2. Forma chunk-push de webpack — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]), la forma que produce el code-splitting de webpack 5.
  3. Comentarios de Rollup / esbuild / Vite — algunos builds sin minificar de esa familia conservan un comentario de línea // ruta/al/archivo.js antes del código de cada módulo. Cuando existen, se convierten en los límites de módulo.
  4. Alternativa honesta — si no se encuentra nada de lo anterior (casi siempre porque el bundle es un build minificado de Rollup/esbuild/Vite sin marcadores de límite), la herramienta lo dice y lista las declaraciones de nivel superior del archivo en vez de inventar una lista de módulos.

Cómo leer el resultado

Cuando se encuentran módulos, cada uno lista qué require() hace por id de módulo literal y, igual de útil, qué otros módulos lo requieren a él — para trazar "si quito esto, qué se rompe" en cualquier dirección sin ejecutar nada.

Honestidad por diseño

Los requires dinámicos (require(variable)) y las llamadas import() no se pueden resolver estáticamente, así que simplemente se omiten de la lista de dependencias — esto puede subcontar dependencias, pero nunca fabricará una. Del mismo modo, un id de módulo referenciado por un require() que no está en el mapa detectado se sigue mostrando como destino de una arista aunque no tenga tarjeta propia; normalmente significa que vive en otro chunk que no se pegó aquí.

Privacidad

Todo funciona en tu navegador mediante un analizador JavaScript real (acorn). El bundle que pegas o subes nunca se envía a ningún sitio.