Tip for using Live View Inspect Mode in CS5

Dreamweaver CS5 introduces the Inspect Mode in Live View. This can be turned on (among other ways) using:
  View > Inspect
Once you are in Inspect mode, the element under the mouse in Live View is “inspected”. Box Model highlighting is displayed in Live View for the inspected element, the element is selected in Code View (both static and Live Code) and in the Tag Selector, and element details are displayed in all Panels that track selection (such as the CSS Panel Current Mode).
This allows you to move the mouse around the page to quickly discover the page structure. Click in the page to feeze the inspection (i.e. selection) on the current element. Click again to exit Inspect Mode.
This feature uses the Live View “hover” mechanism to determine the current element. This makes it impossible to inspect any container element where the container has no padding and has only 1 child, and the child element has no margins. There are no pixels over which you can hover the mouse to choose the container element for inspection.
To handle this case, simple keyboard navigation is provided using the left-arrow and right-arrow keys:

  1. In Inspect Mode, place mouse over any element.
  2. Without moving mouse, press left-arrow key to change inspection to parent element.
  3. You can keep navigating to the parent all the way up to the <body> element.
  4. Pressing right-arrow key returns inspection to previous child element. Once the mouse is moved to a different element, then the list of “previous” child elements are forgotten.

Give this a try and let me know how this works for you.
Thanks,
Randy

Share your thoughts

Your email address will not be published. Required fields are marked *

*


9 − three =