View Full Version : Live View and Inspect Mode --the mysteries thereof

08-26-2011, 06:35 PM
I know these must be very powerful tools, but the little video Dreamweaver's tech lead runs through doesn't quite cut it in the way of explanation for an old fogey like me,. Can anybody enlighten me on what tags that the colored boxes that pop up represent, and how to correlate this information with what's flashing by in the CSS style window? I think yellow is probably margins, purple is padding, but it's not always accurate....Sometimes, I'm fast enough to make it stop, and then edit the CSS by typing in the CSS style window, but then, it doesn't usually update the CSS doc like it should. Are these just sort of like "chrome on the radio knobs," or are they actual, usable features?

08-28-2011, 11:58 PM
Inspect is a nice feature but not up to the quality of a tool like Firebug.

That said, in inspect mode, you can hover over an item and see the applicable CSS in the Current tab of the CSS palette and the html object you are over in the HTML structure list in the Status Bar at the bottom of the Document Window.

Click on an object to select it and show the relevant CSS for that object.

To select a nested object, while you are hovering over an object, you can use the left arrow key to move up the HTML structure of the page (and the right key to move back down).

08-29-2011, 01:02 AM
Thanks for that! I'll check it out. Note: I'm working on my boss to convince him that it would be in his best interest to pay for my enrollment in your course. You do seem to have answers I don't get anywhere else...

I just installed IE 9, and their debugging tool looks pretty good too. I"ll check out Firebug some more, but this brings up another quandry, which I'll post under another thread, because its probably a common problem...