Developer Tools: Part 2 (v1)

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 let’s 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 F12 or CTRL + Shift + I (option + command + I on Mac)

Hands-on

1.Watch this introductory video by The Net Ninja on using the JavaScript Console.

Duration: 5 minutes

2. Watch the first 33 minutes of this in-depth video by Traversy Media and learn all about the powerful tools available through in Chrome’s Developer Tools

Duration: 34 minute (Watch the video up to 33:35)

3. 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. Get Started with Viewing and Changing CSS
     2. CSS Reference
   • Console
     1. Overview
   • Mobile Simulation
     1. Overview
   • DOM
     1. Get Started
   • JavaScript
     1. Get Started
     2. Pause Your Code With Breakpoints

4. After becoming familiar with the Chrome DevTools, install and open up Mozilla FireFox check and compare the Developer tools. You must familiarize yourself with at least 3 browsers and their Developer tools in order to be able to debug browser-specific issues.

Additional Resources

1. Learn 14 tips and tricks in this JavaScript 30 Video by Wes Bos.

Duration: 10 minutes

Assignment

• Use Loom or another screen recording software to record a small video (5 minutes max) in which you’ll demonstrate and describe the following DevTools capabilities:
  • Open up the DevTools
  • Switch to Mobile/Tablet View
  • Check/Uncheck (toggle) some CSS properties
  • Change the (text) content of some Element
  • Add/remove CSS classes from an element
  • Delete an element
  • Copy/Paste an element somewhere in the HTML
  • Force the :hover state on an element
  • Use the color picker to change either the color or background-color of an element
  • Modify some CSS rule’s pixel values using the keys
  • Find the width, margin, border and padding of an element’s Box model using the Computed panel
  • Get a reference to an HTML element in JavaScript ($0)
  • Run some console assertions

Record your video, add the URL in a text file named devtools-part2-screencast.txt and upload it in the Assignment panel below. In case you use some other kind of recording software, upload the file in Google Drive or DropBox, share the video link and add the relevant URL in the text file.

---

Material based on Erik Trautman | The Odin Project

UPDATED: 29.04.2021