ptg16476052
Using the Google Chrome Developer Tools 31
2
▼
Finally, on the bottom row, you’ll find a number of buttons. The first is the button that
detaches or reattaches the tools window. The next opens the JavaScript console, which
is discussed starting in Lesson 17, “Introducing JavaScript.” The next button looks like
a magnifying glass. If you click it, you can then click content on the web page, and the
HTML element corresponding to it will be selected in the Elements tab. This is useful
when you want to inspect a particular element on the page.
Finally, the next buttons show the nesting order of the tags for the selected elements.
These are useful for moving through the structure of the web page. You’ll learn more
about how pages are structured in lessons to come.
Exercise 2.1: Using the Inspector
Before moving on, it’s worth seeing exactly how the Inspector works to see how to
use the Developer Tools to find specific elements on the page in the Elements view. If
you’re not viewing http://getbootstrap.com/ in your browser, go ahead and open it, and
then open the Chrome Developer Tools. You may want to go ahead and try the keyboard
shortcut mentioned earlier in a tip. As I said, as you progress you’ll find yourself doing
this a lot.
Once the browser tools are open, click the “inspect” button in the Developer Tools. It’s the
first button on the left in the bottom row—a magnifying glass. The button will turn blue,
indicating that the Developer Tools are ready to inspect the element that you click. At this
point, move the mouse over the browser window until you locate the large heading near the
top of the page. The browser window s hould look something like the one in Figure 2.6.
FIGURE 2.6
Inspecting the
Bootstrap page.
▼