Adobe Dreamweaver CC Inspect Element and Live View Tools
As you know, I´ve been using Adobe Dreamweaver since the year 2000 (again, back then it was a MacroMedia product). Adobe has brought live view a long way. I have told clients for years, “Never trust what you see in live view. NEVER!”
Today, Live View comes real close to what you might see in a browser. Of course, browsers are and will be a problem for years to come. All browsers allow and don´t allow different forms of code. So what looks good in Safari, may look really bad in Internet Explorer 6 (Internet Explorer 6 is the work of the Devil, any web design person will tell you that).
But, Adobe has taken the view aspect even further. Little buttons on the bottom right side of the Dreamweaver environment allow you to see how the page will appear on a phone, a tablet and desktop.
Width and Height of Page Detector.
Yeap, maybe I just wasn´t looking in previous versions of Dreamweaver, but now, at the bottom right hand corner of the page, you can see the width and height of the document changing as you change the size of the Dreamweaver page manually. This is a great helper for when you have Live View turned on, and you want to see what is happening in the page at certain “Break Points.” Of course Break Point is the term used the the page sizes you are using in your media queries.
I still don´t trust the figures totally, I still have plugins from the browsers themselves that show width and height of the page as it is actually in the browser. Then I have my Samsung Galaxy Note 3, iPad, and desktop to put it to the real test which I believe is still necessary.
Using the CSS Designer Panel with the Inspect Element Tool
This is way cool. Yes it truly is! When you click to go into Live View, suddenly a new button pops up to the left of it. The new button is the Inspect Element Tool. When you click that and hover your mouse over the page that you are working on, any element that you are hovering over “lights up.” Links, divs, images, blocks, lists, anything.
The Quick tag inspect that shows the path to elements in the lower left hand corner of Dreamweaver shows you the path to the element being hovered over so you can see what div it is contained in with that div´s name.
The Coolest thing about this mode is that as you are hovering, if you have the CSS Designer panel wide open so that you can see the properties section of that panel in full mode, then the CSS Designer panel shows you the actually properties of the elements being hovered over.
Once you find an element you are looking for, you can click the element. That kind of stops the show as far as colors lighting up in the page. The great thing is now that you have clicked, selected an element, it´s properties are stationary in the CSS Designer Panel and you can manipulate the properties in the CSS Panel, and this actually makes those changes in you CSS Style sheet. WOW!
