Developer Tools 2

Introduction

Knowing how to use the Developers 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, or 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 lets take a look at how they can benefit us when writing JavaScript.

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 CTRL + Shift + I (option + command + I on Mac)

Assignment

  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 (i.e. the Elements Panel):
    • Open DevTools
    • Device Mode
      1. Device Mode
      2. Test Responsive and Device-specific Viewports
    • Elements panel
      1. Get Started With Viewing and Changing CSS
      2. Inspect and Tweak Your Pages
      3. Edit Styles
      4. Edit the DOM
    • Using the Console
    • Sources panel
      1. Get Started With Debugging 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

Web Development 101

Developer Tools 2

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship