ptg1647605232 LESSON 2: Getting Your Tools in Order
As you can see, the heading is highlighted, and some information about the size of the
element is provided in a tool tip. This is the element I want you to inspect, so you should
locate it in your browser and click it. As you saw in Figure 2.4, the source of the page
shown in the Elements is mostly collapsed when you initially open the Developer Tools.
When you inspect an element, the source is expanded enough to show you the HTML
source corresponding to whatever it was on the page that you clicked. The Developer
Tools window should now be displaying the HTML tags used to create the heading you
clicked. It will look like Figure 2.7.I don’t expect to understand much of what you see in the Developer Tools window yet,
but let me go over the highlights. In the left panel, you’ll see the actual HTML source for
the page. In the right column, you’ll find style information that shows why the selected
element looks as it does. In the bottom row, you can see where the selected element falls
within the structure of the page. The selected element is the “span” around the Bootstrap
B at the right end of the bottom bar. It is four levels deep in the page and has three CSS
classes applied to it.
You’ll find yourself falling back on the Developer Tools a lot, especially when things
don’t look like you’d expect them to on the page. It shows how the browser sees your
page and makes it easy to drill down to exactly the element you want to find, which is
especially useful as your pages grow larger and more complex.FIGURE 2.7
Inspecting the
B icon in the
Developer Tools.▼▲