This section contains a general overview of topics that you will learn in this lesson.
- Change screen size of a website with developer tools
- View and change the DOM
- Use breakpoints
- View and edit HTML in the Elements tab
- View the Resources Panel to check the scripts running on a website
- Add CSS Pseudostate to a Class
- View CSS Properties in Alphabetical Order
- View and edit the Box Model of any Element in Chrome DevTools
- View a page in print mode
- Enable or Disable CSS Classes
- Simulate media queries in Device Mode
There are three ways to open the Chrome DevTools menu:
- From the
- Right-click anywhere on a webpage and select
- Use the keyboard shortcut F12 or Ctrl + Shift + C (Mac: Opt + Cmd + C)
Google has updated some of the required sections in the below tutorials and some elements have changed or no longer exist, but you can still follow along using the same functionality and tools that they cover. For example, you may be asked to inspect a button that is no longer on the page- you can still follow along and inspect existing elements without issue.
- Head to the Chrome DevTools Documentation by Google. The following subsections cover what you’ll be using the Developer Tools for 95% of the time. Feel free to skip the elements you are already familiar with, and only read these:
- Then, watch the console overview video and read through the page to familiarize yourself with the console and its usage.
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.