#098 · Herramienta para desarrolladores

HTML Inspector

Inspecciona un documento HTML y resume metadatos, jerarquía de encabezados, imágenes, enlaces, scripts, estilos y formularios. También destaca señales concretas como imágenes sin alt y manejadores de eventos inline, para tener una radiografía rápida del documento antes de una auditoría más profunda.

Datos de entrada

Texto o código
Espacio publicitario

Cómo usar esta herramienta para desarrolladores

  1. Pega el documento HTML que quieres inspeccionar.
  2. Pulsa «Inspeccionar HTML».
  3. Revisa metadatos, enlaces, código, imágenes y formularios.
  4. Descarga el JSON si quieres conservar el inventario.

Qué hace esta herramienta para desarrolladores

Reúne información observable del DOM en un informe de texto y un objeto JSON exportable. No modifica el documento ni intenta cargar sus recursos.

El inspector consulta selectores específicos para metadatos y componentes, cuenta elementos y clasifica enlaces y señales de revisión.

No mide rendimiento real, accesibilidad completa, seguridad de cabeceras HTTP ni ejecución JavaScript porque trabaja únicamente con el HTML pegado.

Ejemplo

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ejemplo</title>
</head>
<body>
  <main>
    <h1>Hola</h1>
    <img src="foto.jpg" alt="Paisaje">
    <a href="https://example.com" target="_blank" rel="noopener noreferrer">Enlace</a>
  </main>
</body>
</html>

Casos de uso

  • Auditar rápidamente una plantilla antes de publicar.
  • Inventariar scripts y hojas de estilo declaradas.
  • Comprobar metadatos SEO presentes en HTML estático.

Consejos para obtener resultados fiables

  • Interpreta enlaces relativos según el sitio donde se publicará la página.
  • No confundas presencia de metadatos con calidad SEO.
  • Revisa manualmente scripts externos y políticas CSP.
  • Combina el inspector con Checker y Validator para diagnósticos diferentes.

Detalles del procesamiento

El análisis se basa en querySelectorAll y propiedades DOM. Los recursos referenciados no se descargan y las URLs no se verifican por red.

No puede conocer cabeceras HTTP, redirecciones, estado de recursos, contenido generado tras ejecutar JavaScript ni estilos calculados.

Preguntas frecuentes

¿Qué metadatos puede extraer el HTML Inspector?

Resume title, meta description, canonical y lang, además de inventariar encabezados, enlaces, scripts, estilos y formularios.

¿El inspector comprueba si los enlaces externos responden correctamente?

No. Cuenta y clasifica enlaces a partir del HTML, pero no realiza solicitudes de red ni comprueba códigos HTTP.

¿Puede detectar imágenes sin atributo alt?

Sí. El informe cuenta las imágenes que no incluyen alt para señalar una revisión básica de accesibilidad.

¿El HTML Inspector analiza cabeceras CSP o HSTS del servidor?

No. Esas cabeceras no forman parte del HTML pegado y requieren inspeccionar una respuesta HTTP real o sus cabeceras.

¿Puedo exportar los resultados de la inspección como JSON?

Sí. Cuando hay datos estructurados, el botón de descarga JSON se habilita con el inventario generado por la herramienta.

Módulos del análisis

MóduloFunción
MetadatosExtrae title, description, canonical y lang.
InventarioCuenta enlaces, imágenes, scripts, estilos y formularios.
SeñalesMarca alt ausente y eventos inline para revisión.