How to view browser's calculated CSS specificity?

Question

Greetings: I have spent days trying to find a tool that would display the exact CSS specificity number for each CSS rule as calculated by the browser. I have already looked at many online resources including Tools to see CSS specificity - the links there talk about the overridden classes etc. but I want to see the exact specificity number calculated and used by the browser when applying specific CSS rules.

Why Do I Need To See Exact CSS Specificity Calculation?
I cannot overcome a certain issue where browser is using a CSS rules based on that rule's proximity to the element but I have another rule defined before it that should have a higher specificity then the rule that gets applied by the browser. I do not have a simple code that I can use to demonstrate using jsfiddle and the code I am trying to debug is too complex to include in the fiddle.

Almost every search has resulted in people pointing to some kind of "CSS specificity rules" or "understanding CSS specificity" links. I understand how CSS specificity is supposed to work, use Firebug and Chrome developer tools extensively, and well aware of links that point to understanding specificity rules. My quest is to try and peek into what browser engine thinking when applying one CSS rule over another! And since it has already calculated this info to decide which rule overrides other rules, somehow it should be accessible info, but I don't know how?

A very base example of the problem I am facing:

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }

Or it could be coded something like this.... (doesn't make any different in the final outcome.)

.testClass1 .title { corresponding CSS styles }     --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles }  --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles }  --- call it Rule 4

And the HTML structure looks something like this...

<!-- delivers intended results -->
<div class="testClass1">
   <div class="title">Some Title</div>
</div>

<!-- Does not deliver intended results. 
  - I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
    applied because of its proximity to the actual HTML element. 
    i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
  <div class="testClass1">
    <div class="title">Some Title</div>
  </div>
</div>

I thought best way to debug this issue would be to see what was browser's CSS specificity calculation instead of me having to assume certain rules and manually calculate it each time. Also, browser has already calculated this while applying it, so I was looking for tools to peek into browser calculation of these specificity rules but cannot find any way of doing it in Firebug or Chrome inspector.

Does anyone else out there know about this and can anyone point me to a tool that might exist? I greatly appreciate your help. Thank you!

EDIT: I tried to put together a fiddle to see if I can reproduce "something like what I am struggling with" to demonstrate. I guess, I am in luck - please see http://jsfiddle.net/smallworld/abvHC/1/. The problem in this fiddle is still too simple, but kind of representative of my challenge where classes are assigned dynamically so I have no way of predicting the exact order. The example 3 in the fiddle is somewhat of a representative case of why I needed to see the calculated specificity. In any case, I think it would be wonderful to be able to compare your calculated number with browser's calculation.

ANOTHER EDIT: While I still do not have answer to my quest for a peek into browser's specificity score for a given element, I think Faust and others have led me to a possible solution to the original problem I was facing. Please see comments thread below. Considering that question is about being able to view browser's specificity score, I might as well leave this question open - very likely answer is going to be that currently there are no tools available to be able to do so.

Answer 1

There is a getSpecificity() function available at the inIDOMUtils API in Firefox.

To use this API you'll have to write your own Firefox extension, though. This was requested for Firebug, though Firebug is discontinued now in favor of the Firefox DevTools, which also have a feature request for this.