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.2
9 ratings
413 students enrolled
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Full Stack Developer learning path.

Try out the 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

Student feedback

4.2
Course Rating

56%

22%

22%

0%

0%

Reviews

Deepak Kakkar (@deepcode89)
Sep 15, 2021
Teaching is not everyone's cup of tea.
Ankur Sharma (@ankur1493)
Aug 21, 2021
not as good as other courses
Pranav M (@pranavtechie)
Aug 21, 2021
intuitive coruse to form a base on the dev tools. Highly recommended
Gunasekaran (@Gunasekaran)
Aug 09, 2021
Nice one
heilerm (@heilerm)
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!!

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 :)

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

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
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)