Cómo usar esta herramienta para desarrolladores
- Pega código Angular.
- Selecciona el filtro de la vista.
- Pulsa Crear vista.
- Usa los números de línea para localizar cada elemento en el archivo original.
Visor Angular
Convierte un fragmento Angular en un índice navegable en texto: muestra decoradores, clases, directivas, property bindings, event bindings e interpolaciones junto con su número de línea. Resulta útil cuando un componente es largo y se necesita una vista rápida de los puntos dinámicos sin ejecutar la aplicación ni cargar un IDE.
Datos de entrada
Código AngularEspacio publicitario
Qué hace esta herramienta para desarrolladores
Resume elementos de Angular detectables por patrón y los asocia a su línea de origen. No modifica el código.
Cada línea se inspecciona para localizar decoradores, clases, directivas, bindings, eventos e interpolaciones. Los resultados se ordenan por aparición.
La vista es textual para que pueda copiarse o descargarse junto con una revisión técnica.
Ejemplo
L2 · INTERPOLACIÓN · {{ title }}
L3 · PROPERTY BINDING · [disabled]
L3 · EVENTO · (click)
Casos de uso
- Auditar plantillas con muchos bindings.
- Preparar una revisión de código.
- Localizar directivas estructurales rápidamente.
Consejos para obtener resultados fiables
- Prueba primero con un fragmento pequeño y representativo.
- Revisa el resultado antes de sustituir código en producción.
- Conserva una copia del archivo original si vas a aplicar cambios masivos.
- Usa Ctrl/Cmd + Enter para ejecutar el análisis desde el teclado.
Detalles del procesamiento
La detección trabaja línea por línea y conserva el orden del archivo.
Bindings repartidos en varias líneas pueden aparecer asociados a la línea donde empieza el patrón.
Preguntas frecuentes
¿El visor modifica el código Angular?
No. Solo genera un índice textual de elementos detectados.
¿Muestra números de línea?
Sí. Cada hallazgo incluye la línea en la que se detectó.
¿Distingue property bindings y eventos?
Sí. Etiqueta por separado patrones [prop] y (evento).
¿Detecta interpolaciones {{ ... }}?
Sí, y puede mostrarlas junto con directivas en el filtro correspondiente.
¿Puede abrir templates referenciados con templateUrl?
No. Solo analiza el contenido pegado o cargado directamente.
Herramientas relacionadas para desarrolladores
Tipos visibles
| Tipo | Patrón |
|---|---|
| Binding | [prop] |
| Evento | (event) |
Explorar la categoría
Consulta más utilidades de frameworks frontend para revisar, transformar y depurar código relacionado.
Ver Frameworks frontend