Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

JavaScript code can update the properties/attributes of DOM elements in real time by responding to events and so on. Here is an example.

In the table on that page, move your mouse over the cells. Notice how they change color when the mouse is on them, and the color goes away when you move the mouse to another cell.

Now, using Firefox or Chrome (but not IE, Opera, etc.), I want to examine the background color, expressed in RGB or hex or whatever, of the cells updated in real time, as the mouse cursor enters and leaves the region and causes the JS to do its thing.

The behavior that I observe, currently, is that the Inspect Element functionality of both Firefox and Chrome does not update the value of the properties as they are updated by JavaScript. So, in order to view the latest value of the property, I have to inspect the element again, and it takes a momentary "snapshot" of the values. But since the values only change while I have the mouse on them, I can't take a snapshot of the value I want while my mouse cursor is over the cell, because I have to remove my mouse from the cell to select the "Inspect Element" item in the right-click list!

If it is possible to have the values updated in real time using either Firefox or Chrome, or an extension, on any recent version of the software (up to the latest stable), please provide instructions for doing so.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

When you pick one of the cells in the demo, it will automatically select the <div> that is contained in the cell unless you hit the cell exactly on the border:

enter image description here

However, the style change is applied on the cell, not on the <div>. When you hover over the cell while it is focused in the developer tools, you should be able to see the new CSS being applied. Additionally, you can expand the Computed Style pane to see the full set of styles:

enter image description here

share|improve this answer
    
That's it! It did the trick! Now with the <td> element selected, I can see the background-color update in real time :D You are a pro! Thank you, Oli! :) –  ÃŁŁǫǛȉЖΦΤїҪ Nov 15 '12 at 1:39
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.