ptg16476052Using the Google Chrome Developer Tools 292
Using the Google Chrome Developer Tools
After you’ve downloaded and installed Google Chrome, open the application, and navi-
gate to http://getbootstrap.com/. Bootstrap is a generic framework for web pages and is
discussed later. For now, it’s useful because the source code for the web pages was writ-
ten to be easily readable. In Chrome’s View menu, open the Developer submenu, and
then click Developer Tools. At this point, the Developer Tool s will open, as shown in
Figure 2.4.
FIGURE 2.4
The Google Chrome
Developer Tools.
There is also a keyboard shortcut to open the Developer Tools.
On Windows, you can open them by pressing Control+Shift+I. On
OS X, you can open them with Command+Option+I. You’ll find
yourself using the Developer Tools a lot, so it’s definitely worth
memorizing the keyboard shortcut.TIPThe Developer Tools opens as a panel in the browser, covering the bottom of the web
page. If you prefer, you can click the button on the upper right to detach the Developer
Tools from the browser window. This allows you to see more in both windows, but
you’ll have to switch between them. You can also move the tools to the side of your
browser window rather than the bottom if you prefer. Position the Developer Tools how-
ever you feel the most comfortable.