codedamn logocodedamn
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.4
15 ratings
172 students enrolled
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Full Stack Web Developer Learning Path 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.4
Course Rating

67%

20%

13%

0%

0%

Reviews

Kevin K. (@kevink520)
Nov 30, 2021
Learned some new things about Chrome DevTools.
Harshal Giri (@hgpkk)
Nov 25, 2021
Very informative and easily understandable.
Walter L Traylor (@wltraylor)
Nov 02, 2021
Cool running thus far
Harsh Singh Bais (@pandaGOD)
Nov 01, 2021
Very good course, It would be better had there been an advanced course as well for the things that are left in this course
WahidS (@WahidS)
Oct 23, 2021
Good content so far.

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)