Fork me on GitHub

debugCSS : (X)HTML debugging tool built with CSS


debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.

Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."


Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".


Get the source code on GitHub : imbrianj/debugCSS

Accessibility Playground

  • input:not([id])

  • select:not([id])

  • textarea:not([id])

  • *[role="slider"]:not([aria-valuemin])

  • *[role="slider"]:not([aria-valuemax])

  • *[role="slider"]:not([aria-valuenow])

  • *[role="slider"]:not([aria-valuenow])

  • input[type="number"]:not([min])

  • input[type="number"]:not([max])

  • div:empty

  • span:empty

  • p:empty

  • ul:empty

    • ol:empty

      1. dl:empty

      2. li:empty

      3. dt:empty

      4. dd:empty

      5. a:empty

      6. *[title]:empty

      7. img:not([alt])

        Some tag
      8. img[alt=""]

        Some tag
      9. Spacer Gif

        spacer.gif used

      10. button:empty

      11. a:not([href])

        Link with no href
      12. a[href="#"]

        Link with # href
      13. a[href=""]

        Link with no href value
      14. a[href*=javascript\:]

        Link with javascript href
      15. a[onclick]

        Link with onclick attribute
      16. a[onmouseover]

        Link with onmouseover attribute
      17. a[onmouseout]

        Link with onmouseout attribute
      18. label:not([for])

      19. div[role="img"]:not([aria-label])

        Div with img role and no aria-label
      20. form > *:not(fieldset)

        Form has no fieldset
      21. fieldset *:not(legend):first-child

        First child of a fieldset is not a legend
      22. iframe:not([title])

        Some tag