Course image for Chrome DevTools Course

Chrome DevTools Course

Learn about the most underrated tool in frontend web development

1 hours+ of total content
4.5
5 ratings
342 developers learning
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Frontend Web Developer learning path.

Goals

  • Different tabs and their use in devtools
  • Pausing JS execution, breakpoints and debuggers
  • Analyzing network requests and throttling them
  • Patching JS on runtime, creating snippets, and more!

Description

I feel Chrome DevTools is one of the most underrated tools in the frontend industry because it can help you so much, yet, very few people take out time to actually understand it.

This course is exactly for that. We will explore in depth about Chrome DevTools and you will hopefully come to know about a lot of new features and things you can do. Let us learn in depth about these features and how they can help you speed up and improve your developer experience.

Course Structure

32 lectures 01:53:36 total duration

Introduction

(4 lectures • 06 minutes)
  Introduction (Watch video)
01:20
  Setup (Watch video)
01:23
  Prerequisites for the course (Watch video)
00:53
  Hello DevTools (Watch video)
02:29
  Console 101 (Watch video)
04:02
  Trying out different consoles 
09:18
  Sources tab 101 
03:58
  Setting up debugger 
07:03
  One more way to setup debugger 
02:29
  Event based debugger 
05:11
  Stepping in debugger 
04:38
  Breakpoints 
04:13
  Debugger 
01:28
  Call Stack 
03:35
  Patch code on runtime 
06:05
  Snippets 
05:33
  Networks Tab 
00:41
  Networks tab overview 
03:32
  Exploring Networks Tab 
06:27
  Filters 
04:24
  Columns in Network Tab 
02:09
  Throttling 
04:29
  Copy request payload 
02:29
  Elements Tab 
00:44
  Elements tab overview 
03:14
  Inspecting a node 
03:13
  Operations with a node 
03:05
  Special variable 
02:03
  Manipulate styles 
05:11
  Copying CSS Path 
02:20
  Color Picker 
04:19
  Next steps 
01:38

Course Reviews

Jun 30, 2021
pretty good course on DevTools, but you should have been already working with any debugger. Perhaps sometimes the speed is too high, to follow where Mehul has clicked and what happend. But beside this, very well done!!
Jun 27, 2021
Its really a very nice course, it's more than debugging
Mar 24, 2021
nicevideos
Mar 12, 2021
great course
Dec 21, 2020
Awesome Content !!!

Your Course Instructor

Course Instructor Image

Mehul Mohan

Full-stack developer and security researcher

I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)
codedamn logo

We ♥ quality. And we would love to see your growth. Hence, codedamn comes with a pro plan for advanced and accelerated learning!

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice
Try codedamn Pro (7 day free refund)