Fork me on GitHub

debugCSS : (X)HTML debugging tool built with CSS

Summary

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."

Install

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

debugCSS

Get the source code on GitHub : imbrianj/debugCSS

Other Playground

  • a a

    Note: this test may always pass as most browsers seem to move the anchor out from within the other.

    Nested Anchors
  • img:not([src])

    Lorem Ipsum
  • img[src=""]

    Lorem Ipsum
  • img[src="#"]

    Lorem Ipsum
  • h1 div

    Div within header

    Note: Similarly, h2 - h6 are applicable

  • a div

    Block level element within anchor
  • span div

    Block level element within anchor
  • html[xmlns] a h1

    Block level element within anchor

    Note: Similarly, h2 - h6 are applicable. Not applicable for HTML5, so filtering for XHTML.

  • ol > *:not(li)

      Header does not belong here
    1. List
    2. Item
  • ul > *:not(li)

      Header does not belong here
    1. List
    2. Item
  • dl > *:not(dt):not(dd)

    Header does not belong here
    Term
    Definition
  • center

    Deprecated tag
  • u

    Deprecated tag
  • font

    Deprecated tag
  • map

  • br

    Possibly an unnecessary use of
    a line break
  • br br

    Text trying to

    be a paragraph
  • b

    Deprecated tag
  • i

    Deprecated tag
  • blink

    Deprecated tag
  • marquee

    Deprecated tag
  • Script tag without type
  • Style tag without type
  • *[width]

    Width should be specified in CSS

    Note: This is allowable in transitional doctypes

  • *[height]

    Height should be specified in CSS

    Note: This is allowable in transitional doctypes

  • *[border]

    Border should be specified in CSS

    Note: This is allowable in transitional doctypes

  • body script ~ *:not(script)

    Script not the last element in the body
  • body style

    Style inside body
  • *[style="[object Object]"]

    Style wrongly applied via JS