Dreamweaver Inspect Element Live View

Dreamweaver Inspect Element Live ViewAdobe Dreamweaver CC Inspect Element and Live View Tools are finally here. When I was working on WordPress sites, editing themes and would open any browser and right click on anything in a page, it amazed me at how most any browser would show me the CSS associated with the selected object. That was very handy. What really freaked me out was that the browser would even show me the line of code in CSS where I could find the CSS selector. What freaked me out even more in these browsers was that I could change the code in inspect element mode and the page right in front of my eyes would change. I could change font sizes, colors, all kinds of stuff. That was amazing.

The Inspect Element and Live View Tools is here and does what browsers have been doing for a couple of years. The great thing with Adobe Dreamweaver CC is that you can find the element and adjust the properties in the CSS and you are actually making changes to the real CSS style sheet. I find that the Adobe Dreamweaver CC Inspect Element and Live View Tools are really handy because you can right click on an element in the CSS Designer panel and go the the code in the CSS style sheet.

I really have to give it to Adobe for upgrading their Inspect Element and Live View Tools. They are extremely helpful and pretty much reflect what is going to happen in the browser more than ever before (of course, always test everything on the devise and in different browsers, ALWAYS).

I use the tools all of the time. I use them a lot of times when editing WordPress themes. Finding div names and classes can be a real Easter Egg Hunt in WordPress Theme land.

Lately, I find myself using the tools when I am editing a site or page I haven’t looked at in a view weeks or maybe months. So, the tools help me, hopefully this video will help you see how the Inspect Element and Live View Tools can speed up your workflow.