Introduction
Knowing how to use the Developer Tools inside your browser is an important skill for any web developer. The Developer Tools are useful for running JavaScript code, editing HTML and CSS styles without having to refresh the page, and viewing performance data. They also save you lots of time. Getting started couldn’t be any easier. You should already be familiar with using them for debugging and working on HTML and CSS, so let’s take a look at how they can benefit us when writing JavaScript.
Lesson overview
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.
- Debug JavaScript.
- 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.
Opening DevTools
There are three ways to open the Chrome DevTools menu:
- From the
Chrome Menu>More Tools>Developer Tools - Right-click anywhere on a webpage and select
Inspect - Use the keyboard shortcut F12 or Ctrl + Shift + C (Mac: Opt + Cmd + C)
Assignment
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:
- CSS
- Get Started With Viewing And Changing The DOM
- Mobile Simulation
- JavaScript
- Debug JavaScript - Warning: In point 4 of step 3 of the tutorial, devtools will pause on the second line (
if (inputsAreEmpty()) {) rather than at the declaration of the function. Don’t worry, this is expected. - Pause your code with breakpoints
- Debug JavaScript - Warning: In point 4 of step 3 of the tutorial, devtools will pause on the second line (
- Go through the Chrome DevTools console overview to familiarize yourself with the console and its usage.
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Learn 14 tips and tricks in this JavaScript 30 Video by Wes Bos