dPlugins
Swiss Knife

Debug

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

Swiss Knife

Need to know more? Please tell us what