DevToolsSnippets icon indicating copy to clipboard operation
DevToolsSnippets copied to clipboard

verified publisher icon matuzo
→

Metadata

DevToolsSnippets

A collection of front-end debugging script snippets to be used in the Sources panel in Chrome DevTools.

The “Snippets” section highlighted in the sources panel in Chrome DevTools

You can copy these scripts and add them to your collection of snippets.

This not a replacement for automatic testing tools like the HTML validator, Lighthouse, axe, or Wave. This collection of scripts is meant to be used in addition to automatic testing tools.

Scripts

Document Info

  • Logs the page <title>
  • Logs the page description
  • Logs the defined natural language
  • Logs the charset
  • Logs the number of DOM nodes in <head>
  • Logs the number of DOM nodes in <body>
  • Lists headings and document outline

Demo output of the basic document information, including the heading outline that shows empty and skipped headings

Details about documentinfo.js

Debug images

  • Lists images without width and/or height attributes
  • Lists images with empty alt attributes
  • Lists images with suspicious alt attributes

Demo output of the image debugging script that lists images with suspicious and empty alts and images with missing width or height attributes

Details about debugimages.js

Remove CSS

For testing HTML output without CSS.

  • Removes all <link>s to CSS files
  • Removes all style elements
  • Removes all style attributes

Details about removecss.js

Is x present?

  • Checks if elements that usually should be present, are actually there.
  • Checks if elements that probabaly shouldn’t be present, aren’t there.

Demo output of the “Is x present?” script that lists a bunch of warning related to malformed HTML

Details about isxpresent.js

← Metadata

176
Stars
7
Forks
Watchers

Owner

verified publisher icon matuzo

Metadata

Back