From the course: Learning Chrome Web Developer Tools

Accessing and using the developer tools - Chrome Tutorial

From the course: Learning Chrome Web Developer Tools

Start my 1-month free trial

Accessing and using the developer tools

“

- [Instructor] All major browsers include developer tools, or DevTools for short, which enable developers to examine the code of the document open in the browser window, run tests on that code, debug issues, and even simulate changes to the code to see what they look like and how they respond to interaction. The DevTools built into Google Chrome include a whole lot of useful features that let you do this and more and they're widely used by web developers. To open the Chrome developer tools, first open Google Chrome. My installation of Chrome opens a new 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, so I'm going to close this up and do it again. The keyboard shortcut for the developer tools is Control + Shift + J in Windows or Command + Option + I on a Mac and that's going to do exactly the same thing as that menu command. I'm going to close this up one more time because there's one other way to do this that's even more handy if your hand is already on the mouse or touchpad. You can right click, or Control + Click on a Mac, anywhere in the browser window and then on the menu that shows up you can click Inspect. This takes you to a specific part of the developer tools, which is the Elements panel. When the developer tools open, you may see them in a few different places. They're most commonly attached, or docked, to the bottom of the screen or the right side of the screen, or they may show up on the left, or 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 DevTools button, which is a column of three dots near the top right corner of the developer tools window. I'm going to refer to this as the Customize button for short. When you click the Customize button, a sub-menu is displayed with the four options for the DevTools location available as a set of buttons here at the top. The button on the far left undocks the DevTools into a separate window. The button next to that, docks the DevTools on the left side of the browser window, the next button docks the tools on the bottom of the window, and the button on the far right docks the DevTools on the right side of the browser window. For this course, I'm going to click the Dock to Bottom button and display my browser tools at the bottom of the screen. And I have this extra little window showing the console here and what's new, and I'm just going to click this X over here to close that. It's called a drawer. And so now I have my DevTools at the bottom of the screen and if you want your screen to match mine as closely as possible, go ahead and make that change for yourself. When the DevTools are docked, you can drag the border between the DevTools and the browser window to change the amount of space that the DevTools 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 the DevTools, or you may need an expanded view of the DevTools with just a little of the browser window. For now, you should adjust the size of your DevTools pane to occupy about a third of the entire browser window area.

Contents