All major browsers include developer tools, which enable developers to examine the code of the document or app open in the browser window, as well as to run tests and evaluate metrics related to that code. This video covers accessing the Chrome Developer Tools using menus and keyboard shortcuts, and taking inventory of the different tools available in Chrome.
- [Instructor] All major browsers include developer tools, or dev tools for short, which enable developers to examine the code of the document open in the browser window, and to run tests and evaluate metrics related to that code. Google Chrome has been a leader in adding useful features to its developer tools, and as a result has become widely used by web developers. To open the Chrome developer tools, first open Google Chrome. My installation of Chrome opens a tab containing a search page by default.
But if you've customized your installation of Chrome, you may have a different page or even a blank page. It doesn't matter what's open in the browser window though. You can open and use the developer tools regardless. Once Chrome is open, there are a few different ways to open the developer tools. You can use the menus by clicking view, pointing to developer, and then clicking developer tools. But it's more convenient to use either a keyboard shortcut or a context menu.
The keyboard shortcut for the developer tools is Ctrl shift I in Windows or Cmd option I on a Mac. If your hand is already on the mouse or touchpad though, and you don't want to switch back to the keyboard and then back again to the touchpad, you can right-click anywhere in the browser window and click inspect on the context menu. This takes you to a specific part of the developer tools, the elements panel. When the developer tools open, you may see them in a few different places.
By default, they're attached or docked to the bottom of the screen. If your installation has been customized though, you may instead see the developer tools at the right side of the screen or they may show up in their own window altogether, separate from the main browser window. You can control where the developer tools are displayed using the customize and control dev tools button, which is a column of three dots near the top right corner of the developer tools window. When you click the customize button, a sub-menu is displayed with the four options for the dev tools location available as a set of buttons at the top.
The button on the far left undocks the dev tools into a separate window. The button next to that docks the dev tools on the left side of the main browser window. And the button on the far right docks the dev tools on the right side of the main browser window. To match my screen in this course, you should click the button second from the right, docked to bottom, which docks the dev tools to the bottom of the browser window. When the dev tools are docked, you can drag the border between the dev tools and the browser window to change the amount of space that the dev tools take up.
When you move the mouse pointer over the border, it turns into a double headed arrow. You can then click and drag in either direction. Depending on what you're doing, you may want to see most of the app in the browser window with a little bit of dev tools, or you may need an expanded view of the dev tools with just a little of the browser window in view. For now, you should adjust the size of your dev tools panel to occupy about a third of the height of the browser window.
- Setting up your testing and debugging environment
- Customize the display of Chrome Developer Tools
- Inspecting elements and styles
- Using the Console
- Opening source files in the Sources panel
- Identifying code that slows page loading
- Emulating mobile connections