JavaScript Developer Tools

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.

Learning outcomes

After completing this lesson, you will be able to:

  • Change screen size of a website with developer tools
  • View and change the DOM
  • Debug JavaScript
  • Use breakpoints

Opening Dev Tools

There are three ways to open the Developer Tools menu:

  1. From the Browser Menu:
    • Chrome: Select the Chrome Menu > More Tools > Developer Tools
    • Firefox: Select the Firefox Menu > Web Developer> Toggle Tools
  2. Right-click anywhere on a webpage and select Inspect
  3. Use the keyboard shortcut F12 or CTRL + Shift + C (option + command + C on Mac)

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.

  1. 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:
    • Open DevTools
    • CSS
      1. View and change CSS
      2. CSS features reference
    • Console
      1. Console overview
    • Mobile Simulation
      1. Simulate mobile devices with Device Mode
    • Get Started With Viewing And Changing The DOM
    • JavaScript
      1. Debug JavaScript
      2. Pause your code with breakpoints
  2. Then, watch this video by The Net Ninja for more detail on using the JavaScript Console.

Additional Resources

  1. Learn 14 tips and tricks in this JavaScript 30 Video by Wes Bos
  2. Learn the new Firefox Dev Tools in this Video by Wes Bos

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord