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:
- From the Browser Menu:
- Chrome: Select the
Chrome Menu
>More Tools
>Developer Tools
- Firefox: Select the Firefox
Menu
>Web Developer
>Toggle Tools
- Chrome: Select the
- Right click anywhere on a webpage and select
Inspect
- Use the keyboard shortcut
F12
orCTRL + 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
- 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)
-
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
- Get Started with Viewing and Changing CSS
- CSS Reference
- Console
- Overview
- Mobile Simulation
- Overview
- DOM
- Get Started
- JavaScript
- Get Started
- Pause Your Code With Breakpoints
-
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
- 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
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
- Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
- Is it urgent? Did you try reaching him on Slack