Difference between two element styles with Google Chrome

Question

I use Google Chrome developer tools and I am constantly inspecting one element against another back and forth to find out what may be causing a particular styling issue.

It would be nice to compare the differences in style between element 1 and element 2.

Can this be done with chrome currently or via some workaround? Is there a tool out there that can do what I am looking for?

Current example of style difference is that I have an inline H4 next to a A where the A is appearing higher in vertical alignment. I am not seeking a solution in this question as I will sort it out.

Solution

---

Update: As a result of this discussion, the "CSS Diff" Chrome extension was created.

---

Great question and cool idea for extension!

Proof of concept

As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via 'inspect element' button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I've created a small snippet that compares last two inspected elements:

(function(a,b){    
    var aComputed = getComputedStyle(a);
    var bComputed = getComputedStyle(b);

    console.log('------------------------------------------');
    console.log('You are comparing: ');
    console.log('A:', a);
    console.log('B:', b);
    console.log('------------------------------------------');

    for(var aname in aComputed) {
        var avalue = aComputed[aname];
        var bvalue = bComputed[aname];

        if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
            continue;
        }

        if( avalue !== bvalue ) {
            console.warn('Attribute ' + aname + ' differs: ');
            console.log('A:', avalue);
            console.log('B:', bvalue);
        }
    }

    console.log('------------------------------------------');
})($0,$1);

How to use it?

Inspect two elements you want to compare, one after another, and paste the code above to console.

Result

Comments

[Valamas]

Fantastic. Have posted a follow up question stackoverflow.com/questions/12611440/…

[Konrad Dzwinel]

Since I ended up creating chrome extension for this, my original answer was updated.

[Katie Kilian]

Now, if it could be extended to compare styles between two different pages, I'd pay money for it.

[Geoffrey Hudik]

Very cool, except I need the same to compare pages between tabs - i.e. dev site to QA site comparision

[Konrad Dzwinel]

@GeoffreyHudik CSS Diff extension now works between the tabs - check it out.

[Geoffrey Hudik]

@KonradDzwinel I tried it yesterday and it hasn't been updated since then. Just realized that it's not working for me for the same page even - then again I may be doing it wrong... just quickly read through documentation.

[NoBugs]

If you don't mind using Firefox, I added an feature that lets you right click, set "A" node, right click, set "B" node, and compare attributes, css for the element and its children: addons.mozilla.org/en-US/firefox/addon/devtools-tweaks

[shareef]

@KonradDzwinel where and how i cant find it ?

[Dror]

@KonradDzwinel 404 ... are you sure it's still available ?

[wal]

link is currently dead

[Fluous]

@Dror This is a css diff chrome extension no clue whether it is the same one.

[Zdeněk Mlčoch]

CSS diff extension seems to not be woking - I didn't seen CSS diff tab in devtools :-(. I've used it in the past and was very satisfied. I cannot find it any more.

[Zdeněk Mlčoch]

Manually installed version 0.33.0 from github github.com/kdzwinel/CSS-Diff was working. It's on your own risk.

[jake downs]

here's a version that prints using console.table instead gist.github.com/jakedowns/384d6aa84db9f43c31616a5c88cf3649