Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn how to use chrome developer tools
Rating: 3.7 out of 5(37 ratings)
6,963 students

Learn how to use chrome developer tools

Practical Hands-On Guide to Using the Chrome Developer Tools
Last updated 3/2026
English

What you'll learn

  • Access the chrome devtools
  • Use the Element Panel
  • Manipulate DOM elements on the fly
  • Use the Sources Panel
  • Setup Persistence
  • Debug Javascript code
  • Setup basic debugging workflow
  • Explore HTTP request headers
  • Check resource load times
  • Simulate mobile devices

Course content

4 sections29 lectures2h 9m total length
  • Introduction1:19
  • What is chrome developer tools2:02
  • Setting your environnment1:32
  • What is Atom4:32
  • Atom Pre-Installation Requirement0:37
  • Git Installation6:02
  • Installing Atom2:46
  • Atom live-server5:40
  • What is the DOM5:47
  • How to access chrome devtools4:00
  • Resource Files1:39

Requirements

  • Basic understanding of HTML
  • Basic understanding of CSS
  • Basic understanding of JavaScript

Description

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. 

You can  Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. Every web developer should learn how to use the chrome developer tools to help troubleshoot web app issues and  improve the performance of their web apps.
 
All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. 

This course will show you how to explore  the various  tools within the chrome developer tools and equip you with an  expanded toolbox for your day-to-day work. We will explore the most commonly used panels within the chrome devtools , including the Console, Elements panel, and Network panel. You learn the basic workflow to fix JavaScript related bugs.

Topics include:
Setting up your testing and debugging environment
How to access the chrome devtools
Installing Live local server
Debugging JavaScript code
Working with the Elements Panel
Working with the Console
Using and exploring the Network Panel
Emulating mobile devices
Live editing of the DOM elements
Setting up Persistence Workspace
Opening source files in the Sources panel
Editing the BOX-Model

After completing this course you will have the basic skills to explore and use the chrome devtools.

Who this course is for:

  • Beginner Web Developers
  • Beginner Programmers