Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Elements Tab
The Elements tab lets you see all the web page elements that were rendered from the HTML and CSS that was retrieved by Safari. The Elements tab is composed of three components: the DOM (Document Object Model) inspector pane, the CSS (Cascading Style Sheet) inspector pane, and the bottom toolbar / breadcrumb ribbon.
DOM Inspector and Editor
The left pane of the Element tab gives you access to all the DOM elements that Safari rendered, presenting them in an expandable hierarchy. This gives you visibility into the relationship between each element and the elements it contains. You can explore the contents of an element by clicking the little triangle next to it (as a former Domino developer, I refer to these as "twisties").
The twistie is a toggle: click it once and it "expands" the nested content; click it again and it "collapses" it, letting you see more or fewer of the nested elements within the DOM element that you want to inspect.
Clicking on the actual element tag (to the right of the twistie) in the DOM Inspector pane, a "div" tag for example, causes the rendered element to be highlighted in the content pane above the Web Inspector, letting you see exactly where and how the element is being shown to your web page users, assuming that the element you clicked on is actually visible on the web page.
In addition to letting you see the elements by navigating through the DOM structure, you can modify them as well! For example, if there is a hidden "div" element that you want to unhide, double-click in the "style" attribute and you can change the text from "display:none" to "display:block" and the element will become visible!
You can modify any DOM element attribute in this way. This is a handy way to figure out adjustments that need to be made to your web content without having to code them first.
The search field in the Elements tab is very powerful, allowing you to search for any text appearing in the web page content by typing it in and pressing the Enter key.
When you enter your search text, the number of matches is displayed to the left of the search field. Pressing the Enter key repeatedly in the search field without changing the search text continues the search to the next matching piece of text. As each match is found, it is highlighted in the DOM Inspector as well as in the content pane (see Figure 6).
)
Figure 6 Search in action!
In addition to plain text, you can search the Elements tab for items by their CSS Selector or by their XPath. For example, to find all "div" tags that are of the "widget" class, you can enter "div.widget" in the search field. This is the CSS selector for all such div elements. For another example, in order to find all the "hidden" div elements on your page, you would use the following XPath syntax "//div[contains(@style,'hidden')]" as your search criteria.
CSS Inspector and Editor
The right pane of the Elements tab shows the CSS Inspector (see Figure 7). This pane allows you to inspect and modify the CSS that has been applied to the DOM element that is currently selected in the DOM Inspector pane.
)
Figure 7 CSS Inspector
Like the DOM Inspector, you can expand and collapse the information by clicking on the twistie. Also like the DOM Inspector, you can modify some CSS attributes to see the effect that those changes would have on your rendered web page. The CSS editing features are not as extensive as those in the DOM Inspector; they are limited to disabling some CSS attributes and changing some of the values in the "Metrics" portion of the CSS Inspector.
Toolbar/Breadcrumb Ribbon
The final component of the Elements tab is what I'm calling the toolbar/breadcrumb ribbon along the bottom of the Web Inspector pane. The first three icons in the ribbon give you access to additional Web Inspector features, and everything to the right of these three tool buttons represents a breadcrumb path to the currently selected DOM element in the DOM Inspector.
The first icon undocks the Web Inspector into its own separate window. This is useful as it lets you see more of the content in the Web Inspector and the content of your web page.
The Error Console
The second icon lets you activate the console, which lets you see all the specifics of any errors or warnings that Safari generated while rendering your web content. It displays the warning or error along with a link to the content that caused the error (see Figure 8).
){kind=small}
Figure 8 Error console
If the error occurred in the HTML or JavaScript of your web page, clicking on the link opens the Resource tab (coming up next) and displays the offending content.
Element Locator
The last tool button in the bottom ribbon is the magnifying glass icon, which I refer to as the element locator. When you click this icon, you can use your cursor in the content pane to reveal specific DOM elements in the Web Inspector pane.
As you hover over content in the content pane, it is highlighted. When the content you want to inspect is highlighted, click on it. Doing so reveals in the DOM Inspector the DOM element associated with the content you clicked on.
This is a very convenient way of locating an element in the DOM Inspector without having to guess what DOM element it is nested under. Instead of using the twisties, you use your cursor to locate the content you want to see in the DOM Inspector.
Breadcrumb Navigator
The final piece of the bottom ribbon is the breadcrumb navigator. As you navigate through elements in the DOM Inspector, this portion of the ribbon shows the complete DOM path to the specific DOM element that is highlighted.
This representation of your DOM element gives you a very clear picture of where in your HTML the DOM element is located. In addition to showing you the relative location of an element, the breadcrumb can also be used to navigate to and highlight any element displayed in the breadcrumb.
Hovering over an element in the breadcrumb highlights it in the content pane. Clicking on an element in the breadcrumb both highlights it in the content pane and reveals the DOM content in the DOM Inspector.
Double-clicking a breadcrumb element "zooms" into that element in the DOM Inspector, hiding all other DOM elements that are parents of the element you double-clicked on (see Figure 9).
)
Figure 9 Zoomed into a DOM Element using the breadcrumb navigator
This gives you more working space to see the content of a specific element. If you want to navigate "up" one level or to reveal all the content again, double-click any of the breadcrumb elements that come before the one that is highlighted.
So much functionality, so little space to write about it! So far, we've covered only the first tab in the Web Inspector. Had enough? If not, let's get into the Resources tab.