The Outline menu on the Web Developer toolbar offers a number of tools that provide visual cues to help make sense of web page structure. These tools are particularly useful when viewing an unfamiliar web page built by someone else. This week I will cover two tools from the Outline menu; Show Element Names When Outlining and Outline Current Element.
Show Element Names When Outlining
In last week's lecture pages, I covered the use of the Outline Block Level Elements tool which graphically displays the boundaries of block level elements in a web page. It is a useful tool on its own, but wouldn't it be nice if the type of block level element was also displayed? It can be done!
From the Web Developer Toolbar choose Outline | Show Element Names When Outlining. This tool works only in conjunction with other Outline menu tools. Nothing happens until you also select one of the three following tools from the Outline menu:
- Outline Headings
- Outline Block Level Elements
- Outline Deprecated Elements
In the example shown below, the Show Element Names tool is used in conjunction with the Outline Block Level Elements tool.
You may find it useful to combine Show Element Names with both the Outline Block Level Elements tool and the Display ID & Class Details tool, both which were covered in the Week 2 lecture materials.
The Show Element Names tool is toggled on/off by selecting it from the Outline menu.
Outline Current Element
The Outline Current Element tool is similar to the Outline Block Level Elements tool in that it graphically displays an outline around web page elements. There are two differences:
- The Outline Current Element tool only shows one outlined element at a time; whatever element is the current focus of the mouse.
- The Outline Current Element tool can display inline element boundaries as well as block level boundaries.
The Outline Current Element tool is toggled on/off by selecting it from the Outline menu.
