davidleininger/console script

## console script
// Debug images
// https://github.com/matuzo/DevToolsSnippets/blob/main/debugimages/debugimages.js
// Thank you @matuzo

{
  console.clear();

  const images = document.querySelectorAll('img');
  const missingAlt = []
  const emptyAlt = []
  const suspiciousAlt = []
  const missingDimensions = []
  const suspicious = ['alt', 'image', 'img', 'logo']

  if (images.length) {
    for (let i = 0; i < images.length; i++) {
      const image = images[i];

      if (image.getAttribute('alt')) {
        const attr = image.getAttribute('alt').trim();

        if (attr === '') {
          emptyAlt.push(image)
        }

        if (suspicious.indexOf(attr) > -1) {
          suspiciousAlt.push(image)
        }
      } else {
        missingAlt.push(image)
      }


      if (!image.attributes.width || !image.attributes.height) {
        missingDimensions.push(image)
      }
    }


    if (suspiciousAlt.length) {
      console.warn('%cImages with suspicious alt, please check!', 'font-size: 13px');

      for(image of suspiciousAlt) {
        console.log(image)
      }
    }


    if (missingDimensions.length) {
      console.warn('%cImages without width and/or height attribute, please check!', 'font-size: 13px');

      for(image of missingDimensions) {
        console.log(image)
      }
    }


    if (emptyAlt.length) {
      console.info('%cImages with empty alt', 'font-size: 13px;');

      for(image of emptyAlt) {
        console.log(image)
      }
    }

    if (missingAlt.length) {
      console.error('%cImages with missing alt', 'font-size: 13px;');

      for(image of missingAlt) {
        console.log(image)
      }
    }
  }

    if (![...suspiciousAlt, ...missingDimensions, ...emptyAlt, ...missingAlt].length) {
      console.info('All images look OK!')
    }

    var done = 'Finished running “Debug images”'
    done;
}

## document_info.js
// Document Info
// https://github.com/matuzo/DevToolsSnippets/tree/main/documentinfo
// Thanks @matuzo

{
  console.clear()

  const getAttr = (elem, attr) => {
    if (document.querySelector(elem) && document.querySelector(elem).getAttribute(attr)) return document.querySelector(elem).getAttribute(attr);

    return "🛑 No information available"
  }

  console.log('---------')
  console.log(`%cTitle: ${document.title}`, `font-size: 14px`);
  console.log(`Description: ${getAttr('meta[name="description"]', 'content')}`)

  console.log(`Language: ${getAttr('html', 'lang')}`)
  console.log(`Charset: ${getAttr('meta[charset]', 'charset')}`)
  console.log(`Viewport: ${getAttr('meta[name="viewport"]', 'content')}`)
  console.log(`Canonical URL: ${getAttr('link[rel="canonical"]', 'href')}`)
  console.log(`DOM nodes in <head>: ${document.head.querySelectorAll('*').length}`)
  console.log(`DOM nodes in <body>: ${document.body.querySelectorAll('*').length}`)

  const internalStylesheet = document.querySelectorAll('style');
  console.groupCollapsed(`Number of <style> elements: ${document.querySelectorAll('style').length}`)
  for (var i = 0; i < internalStylesheet.length; i++) {
    console.log(internalStylesheet[i])
  }
  console.groupEnd();

  const externalStylesheet = document.querySelectorAll('link[rel="stylesheet"]');
  console.groupCollapsed(`Number of external stylesheets: ${externalStylesheet.length}`)
  for (var i = 0; i < externalStylesheet.length; i++) {
    console.log(externalStylesheet[i].href)
  }
  console.groupEnd();

  const internalScript = document.querySelectorAll('script:not([src])');
  console.groupCollapsed(`Number of inline <script> elements: ${internalScript.length}`)
  for (var i = 0; i < internalScript.length; i++) {
    console.log(internalScript[i])
  }
  console.groupEnd();

  const externalScript = document.querySelectorAll('script[src]');
  console.groupCollapsed(`Number of external <script> elements: ${externalScript.length}`)
  for (var i = 0; i < externalScript.length; i++) {
    console.log(externalScript[i].src)
  }
  console.groupEnd();

  console.log('---------')

  var done = 'Finished running “Doc Info”'
  done;
}

## document_outline.js
// Document Outline
// https://github.com/matuzo/DevToolsSnippets/blob/main/documentoutline/documentoutline.js

{
  console.clear()

  console.log(`Document outline:`);

  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6, [role="heading"]');
  for(let i = 0; i < headings.length; i++) {
    const heading = headings[i];
    var level;
    if (heading.getAttribute('role')=='heading') {
      level = heading.hasAttribute('aria-level') ? parseInt(heading.getAttribute('aria-level')) : 2;
    } else {
      level = parseInt(heading.nodeName.replace('H', ''));
    }

    console.log(`%c<${heading.nodeName}> ${heading.textContent.replace(/\s\s+/g, ' ').trim()} ${(heading.getAttribute('role')=='heading') ? '(aria-level = ' + level + ')' : '' }`, `padding-left: ${(level * 30)}px; font-size: ${27 - (level * 3)}px`)
  }

  console.log('---------')

  var done = 'Finished running “Doc Info”'
  done;
}
	// Debug images
	// https://github.com/matuzo/DevToolsSnippets/blob/main/debugimages/debugimages.js
	// Thank you @matuzo

	{
	console.clear();

	const images = document.querySelectorAll('img');
	const missingAlt = []
	const emptyAlt = []
	const suspiciousAlt = []
	const missingDimensions = []
	const suspicious = ['alt', 'image', 'img', 'logo']

	if (images.length) {
	for (let i = 0; i < images.length; i++) {
	const image = images[i];

	if (image.getAttribute('alt')) {
	const attr = image.getAttribute('alt').trim();

	if (attr === '') {
	emptyAlt.push(image)
	}

	if (suspicious.indexOf(attr) > -1) {
	suspiciousAlt.push(image)
	}
	} else {
	missingAlt.push(image)
	}


	if (!image.attributes.width \|\| !image.attributes.height) {
	missingDimensions.push(image)
	}
	}


	if (suspiciousAlt.length) {
	console.warn('%cImages with suspicious alt, please check!', 'font-size: 13px');

	for(image of suspiciousAlt) {
	console.log(image)
	}
	}


	if (missingDimensions.length) {
	console.warn('%cImages without width and/or height attribute, please check!', 'font-size: 13px');

	for(image of missingDimensions) {
	console.log(image)
	}
	}


	if (emptyAlt.length) {
	console.info('%cImages with empty alt', 'font-size: 13px;');

	for(image of emptyAlt) {
	console.log(image)
	}
	}

	if (missingAlt.length) {
	console.error('%cImages with missing alt', 'font-size: 13px;');

	for(image of missingAlt) {
	console.log(image)
	}
	}
	}

	if (![...suspiciousAlt, ...missingDimensions, ...emptyAlt, ...missingAlt].length) {
	console.info('All images look OK!')
	}

	var done = 'Finished running “Debug images”'
	done;
	}
	// Document Info
	// https://github.com/matuzo/DevToolsSnippets/tree/main/documentinfo
	// Thanks @matuzo

	{
	console.clear()

	const getAttr = (elem, attr) => {
	if (document.querySelector(elem) && document.querySelector(elem).getAttribute(attr)) return document.querySelector(elem).getAttribute(attr);

	return "🛑 No information available"
	}

	console.log('---------')
	console.log(`%cTitle: ${document.title}`, `font-size: 14px`);
	console.log(`Description: ${getAttr('meta[name="description"]', 'content')}`)

	console.log(`Language: ${getAttr('html', 'lang')}`)
	console.log(`Charset: ${getAttr('meta[charset]', 'charset')}`)
	console.log(`Viewport: ${getAttr('meta[name="viewport"]', 'content')}`)
	console.log(`Canonical URL: ${getAttr('link[rel="canonical"]', 'href')}`)
	console.log(`DOM nodes in <head>: ${document.head.querySelectorAll('*').length}`)
	console.log(`DOM nodes in <body>: ${document.body.querySelectorAll('*').length}`)

	const internalStylesheet = document.querySelectorAll('style');
	console.groupCollapsed(`Number of <style> elements: ${document.querySelectorAll('style').length}`)
	for (var i = 0; i < internalStylesheet.length; i++) {
	console.log(internalStylesheet[i])
	}
	console.groupEnd();

	const externalStylesheet = document.querySelectorAll('link[rel="stylesheet"]');
	console.groupCollapsed(`Number of external stylesheets: ${externalStylesheet.length}`)
	for (var i = 0; i < externalStylesheet.length; i++) {
	console.log(externalStylesheet[i].href)
	}
	console.groupEnd();

	const internalScript = document.querySelectorAll('script:not([src])');
	console.groupCollapsed(`Number of inline <script> elements: ${internalScript.length}`)
	for (var i = 0; i < internalScript.length; i++) {
	console.log(internalScript[i])
	}
	console.groupEnd();

	const externalScript = document.querySelectorAll('script[src]');
	console.groupCollapsed(`Number of external <script> elements: ${externalScript.length}`)
	for (var i = 0; i < externalScript.length; i++) {
	console.log(externalScript[i].src)
	}
	console.groupEnd();

	console.log('---------')

	var done = 'Finished running “Doc Info”'
	done;
	}
	// Document Outline
	// https://github.com/matuzo/DevToolsSnippets/blob/main/documentoutline/documentoutline.js

	{
	console.clear()

	console.log(`Document outline:`);

	const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6, [role="heading"]');
	for(let i = 0; i < headings.length; i++) {
	const heading = headings[i];
	var level;
	if (heading.getAttribute('role')=='heading') {
	level = heading.hasAttribute('aria-level') ? parseInt(heading.getAttribute('aria-level')) : 2;
	} else {
	level = parseInt(heading.nodeName.replace('H', ''));
	}

	console.log(`%c<${heading.nodeName}> ${heading.textContent.replace(/\s\s+/g, ' ').trim()} ${(heading.getAttribute('role')=='heading') ? '(aria-level = ' + level + ')' : '' }`, `padding-left: ${(level * 30)}px; font-size: ${27 - (level * 3)}px`)
	}

	console.log('---------')

	var done = 'Finished running “Doc Info”'
	done;
	}