When you doubt why things are not aligning perfectly or overlapping, this will be the perfect helper. It will outline all elements with one click. HTML elements are grouped into six groups, and every group has a unique color.
The Debug feature is disabled by default and it can be activated from Swiss Knifes Features page.
When the debug feature is active, you can find the Bug icon in the top bar.
Debug color groups
Group 1 – #00fbff
body, article, nav, aside, main, section, header, footer, main, div, menu
Group 2 – #da53ff
h1, h2, h3, h4, h5, h6, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, del
Group 3 – #4371d0
span, ins, em, strong, i, b, u, s, small, abbr, q, cite, dfn, sub, sup, time, code, kbd, samp, caption, var, mark, bdi, bdo, ruby, rt, rp, br, wbr
Group 4 – #f0b
table, thead, tbody, tfoot, tr, th, td, col, colgroup, figure, figcaption
Group 5 – #da8301
a, button, datalist, fieldset, form, input, keygen, label, legend, meter, optgroup, option, output, progress, select, textarea, details, summary
Group 6 – #00bf16
img, iframe, embed, object, param, video, audio, source, canvas, track, map, area