EXAMINE ELEMENTS’ STRUCTURE AND LAYOUT

The Chrome Inspector enables you to examine a web page’s elements’ structure with its Elements panel. This panel can be launched multiple ways: You can right-click a rendered HTML element, you can open up the inspector with the Chrome menu, or press one of the keyboard shortcuts described in the preceding section, “Launch the Chrome Inspector.”

When examining an element, it is possible to highlight the rendered HTML block and the source code tree at the same time by using the Examine Element keyboard shortcut or the images button in the inspector itself. This is a very useful way to follow how a web page is built, ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.