El Script recopila todos los enlaces de una página web y muestra una tabla en la consola de Chrome con el enlace, el texto ancla y el estado HTTP de cada enlace.

fetchAndDisplayLinksInfo.js

/**
 * Este script recopila todos los enlaces de una página web y muestra una tabla en la consola de Chrome
 * con el enlace, el texto ancla y el estado HTTP de cada enlace.
 * 
 * Autor: Aina-Lluna Taylor Barceló
 * Fecha: septiember 2023
 */

// Función principal para recopilar y mostrar información de los enlaces
async function fetchAndDisplayLinks() {
  try {
    // Utilizar Promise.all para esperar a que todas las solicitudes se completen
    const results = await Promise.all(
      // Obtener todos los elementos 'a' de la página y convertirlos en un array
      Array.from(document.querySelectorAll('a'))
        // Mapear cada elemento 'a' a una solicitud fetch
        .map(async a => {
          try {
            // Realizar una solicitud HTTP HEAD para obtener solo los encabezados
            const response = await fetch(a.href, { method: 'HEAD' });
            // Devolver un objeto con la información del enlace
            return {
              Enlace: a.href,
              'Texto Ancla': a.textContent.trim(),
              'Estado HTTP': response.status
            };
          } catch (error) {
            // En caso de error, devolver un objeto con la información del enlace y un estado de 'Error'
            return {
              Enlace: a.href,
              'Texto Ancla': a.textContent.trim(),
              'Estado HTTP': 'Error'
            };
          }
        })
    );
    // Mostrar los resultados en una tabla en la consola
    console.table(results);
  } catch (error) {
    console.error('Ha ocurrido un error:', error);
  }
}

// Ejecutar la función principal
fetchAndDisplayLinks();