Sharing Is Caring:

Devtools Pro: The Basics of Chrome Developer Tools

  • A Quick Start Guide to Editing Live Web Pages
  • Free tutorial
  • Rating: 4.3 out of 54.3 (7,495 ratings)
  • 62,113 students
  • 44min of on-demand video
  • Created by Rocco Balsamo
  • English

What you’ll learn

  • Navigate around in the DevTools and make live changes to HTML / CSS and Javascript.
  • Use awesome built-in tools like the colorpicker and text shadow editor!
  • Write simple Javascript commands and learn the basics of how to debug your code.
  • Understand how to simulate Mobile Devices.
  • Get info to improve page load times with Audits
  • Write larger blocks of test code in the Snippets panel


  • The course is for beginners!
  • You’ll get the most out of it if you know basic HTML, CSS and Javascript.


This course is a simple introduction to the Google Chrome Developer Tools. In this course we’ll cover the basics of devtools which are absolutely essential to productive web development.

And pssst… The course has a humourous twist–your instructor will teach you about amazing colors like blanchedalmond and cornflowerblue!

When you’re finished you’ll be able to:

  • Use the elements panel to modify and update live webpages with tools like the colorpicker and text shadow editor.
  • Type simple Javascript commands in the console.
  • Write and test larger blocks of code with the snippets panel.
  • Understand how to stop and step through code with breakpoints and basic debugging.
  • Learn how to simulate mobile devices for responsive development.
  • Use the audits panel to get useful information about improving page load time.
Read Also -->   WordPress Beginners Course (2022) for Students

This is a free course meant to cover the absolute basics. After completing this, you’ll have to tools and knowhow to become a DevTools wizard with my followup class, DevTools 2017: Beginner to Expert with Google Chrome Developer tools.

Who this course is for:

  • Front End Developers
  • Back End Developers Looking to Try Front End
  • UI/UX Designers
  • Software Engineers
  • Project / Product Managers
  • Anyone looking for a quick way to understand websites and web applications

Show less

Course content

3 sections • 18 lectures • 45m total lengthCollapse all sections

The Basics8 lectures • 22min

  • What We’ll Accomplish02:17
  • Introduction & The Elements Panel06:40
  • Elements Panel Exercise00:21
  • A Quick Tour of DevTools03:51
  • After your tour5 questions
  • Using the Console to Run Javascript03:09
  • Exercise: Color Changes with Javascript00:11
  • Sources Tab and Basic Debugging02:49
  • Breakpoints / Debugging3 questions
  • Snippets: The Console on Steroids02:13

Digging Deeper9 lectures • 19min

  • Cookies and Local Storage with the Application Tab02:43
  • Local Storage Exercise00:23
  • A Peak at Network Calls02:08
  • Network Calls Exercise00:20
  • Page Load Speed with Audits01:47
  • Performance, Memory and Security03:02
  • The Most Useful Keyboard Shortcuts02:07
  • Styling Editors06:45
  • Styling Editors Exercise00:14

Bonus1 lecture • 5min

  • Bonus! Coupon at 1:15! Other Resources & My Twitter04:52

👇👇👇👇 Click Below to Enroll in Free Udemy Course 👇👇👇👇

Go to Course

👇👇 See Also 👇👇

Join Us Join Us Join Us
Sharing Is Caring:

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock