Question

I am using Google Chrome’s developer tools to inspect CSS styles. Sometimes I need to compare the styles of 2 elements on the page, or 2 elements on different pages.

Is there a tool or add-on that would allow me to easily compare? Right now I have to visually look, switching back and forth, comparing one thing at a time. I wish there was a tool that would highlight the differences in styles, source, …

I am open to use another browser if such a tool exists.

Answer 1

This should help you compare computed style differences, for two elements, on the same page (I’m not sure about how to approach two elements on different pages):

function styleDifferences(a, b) {
    var as = getComputedStyle(a, null);
    var bs = getComputedStyle(b, null);
    var r = [];
    for (var i in as)
        if (as[i] !== bs[i])
            r.push(i + ' differs: ' + as[i] + ' | ' + bs[i]);
    return r.join('\n');
}

Example:

>>> styleDifferences(document.body, document.querySelector('pre'));
backgroundColor differs: rgb(255, 255, 255) | rgb(238, 238, 238)
borderCollapse differs: separate | collapse
fontFamily differs: Arial,Liberation Sans,DejaVu Sans,sans-serif | Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif
fontSize differs: 12.8px | 13.7px
height differs: 1928.28px | auto
lineHeight differs: 12.8px | 17.8px
marginBottom differs: 0px | 10px
maxHeight differs: none | 600px
overflow differs: visible | auto
paddingTop differs: 0px | 5px
paddingRight differs: 0px | 5px
paddingBottom differs: 0px | 5px
paddingLeft differs: 0px | 5px
textAlign differs: center | left
whiteSpace differs: normal | pre
width differs: 1423px | auto
MozColumnGap differs: 12.8px | 13.7px
overflowX differs: visible | auto
overflowY differs: visible | auto