ptg1647605230 LESSON 2: Getting Your Tools in Order
From the earliest days of the Web, browsers have supported a feature called “View
Source” that displays the actual HTML source code for the web page that you’re view-
ing. In Google Chrome, you can view the source for the current page by selecting View
Source from the Developer submenu of the browser’s View menu. The source for
http://g etbootstrap.com/ appears in Figure 2.5.The Developer Tools are a much more powerful extension of this concept. The Developer
Tools have a number of tabs. When you open them, the Elements tab is displayed. This
tab contains the source of the page, sort of. When a browser downloads a web page, it
transforms it so that the engine that formats the HTML and presents it can understand
it. Depending on the validity of the web page, this transformation is pretty minor. The
Elements tab presents the HTML as the browser sees it. View Source shows the actual
HTML that the browser downloaded, so if you compare the contents of the View Source
window with the contents of the Elements tab, you’ll see a few differences that illustrate
what I’m talking about.
Don’t worry about what any of the actual HTML does right now, I’ll dig into that soon
enough. For now, just focus on the tool. When you move your mouse over the elements
in the Elements tab, the part of the web page associated with the element under the
mouse will be highlighted so that you can see how the HTML corresponds to the HTML
source. When you click one of the elements, the panes to the right of the window are
updated with the style information for that element. Later, when you start working with
Cascading Style Sheets, this feature will be really helpful because it shows exactly how
the browser interprets your styles.FIGURE 2.5
The source
code for http://
getbootstrap.com/.