Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
up vote 4 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! :) – allquixotic Nov 15 '12 at 1:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .