Difference between two styles of elements in Google Chrome

Question

I use the Google Chrome developer tools, and I constantly check one element against the other back and forth to find out what might cause a particular style problem.

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

Can this be done with chrome at present or with some workaround? Is there a tool that can do what I'm looking for?

The current example of the difference in styles is that I have a built-in H4 next to A , where A appears above when vertically aligned. I am not looking for a solution in this matter, as I will understand.

Answer 1

---

Update: As a result of this discussion, the Diff CSS "Chrome Extension.

---

Great question and cool idea to expand!

Proof of concept

As a proof of concept, we can do a little trick here and avoid creating an extension. Chrome saves the items that you select using the check item button in variables. The last item selected at $0 , one before that at $1 , etc. Based on this, I created a small snippet that compares the last two elements tested:

 (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 the two elements you want to compare one by one, and paste the code above into the console.

Result