Devtools 2017: The Basics of Chrome Developer Tools
4.3 (156 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
6,064 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Devtools 2017: The Basics of Chrome Developer Tools to your Wishlist.

Add to Wishlist

Devtools 2017: The Basics of Chrome Developer Tools

A Quick Start Guide to Editing Live Web Pages
4.3 (156 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
6,064 students enrolled
Created by Rocco Balsamo
Last updated 4/2017
Price: Free
  • 44 mins on-demand video
  • 5 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
  • 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.

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 is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
The Basics
8 Lectures 21:32

An introduction to the types of things we'll learn in the class, and also five things about me, your instructor!

What We'll Accomplish

Tweak HTML tags and styling with the elements panel.

Introduction & The Elements Panel

An exercise to get you more familiar with the Elements Panel.

Elements Panel Exercise

Run through each of the tabs in DevTools and understand the basics about what each of them does.

A Quick Tour of DevTools

A few questions after your tour of the devtools about where certain items exist.

After your tour
5 questions

Run simple Javascript commands in the console panel.

Using the Console to Run Javascript

Exercise: Color Changes with Javascript

Learn the basics of adding breakpoints to stop and step through your code. Also known as debugging!

Sources Tab and Basic Debugging

A few questions about basic breakpoints and debugging

Breakpoints / Debugging
3 questions

Learn how to test out larger chunks of code in the snippets panel.

Snippets: The Console on Steroids
Digging Deeper
9 Lectures 19:31

Inspect and modify cookies and localstorage using the application tab.

Cookies and Local Storage with the Application Tab

Local Storage Exercise

A look at the network calls from the yelp reservation page.

A Peak at Network Calls

Network Calls Exercise

Understand how to review page load issue with the Audits panel. And a note about the IRS.

Page Load Speed with Audits

A quick dive into the more advanced panels in devtools: Performance / Timeline, Memory, and Security.

Performance, Memory and Security

A look at the keyboard shortcuts that I find most useful for navigating around in Chrome Devtools.

The Most Useful Keyboard Shortcuts

A lecture from my followup course that takes a deeper dive into how to use the different styling tools available in DevTools.

Styling Editors

Styling Editors Exercise
1 Lecture 04:52

Where to go for other documentation, and a preview of my complete course: DevTools 2017 Beginner To Expert w/ Google Chrome Developer Tools. Code: TENBUCKS

Bonus! Coupon at 1:15! Other Resources & My Twitter
About the Instructor
Rocco Balsamo
4.3 Average rating
225 Reviews
6,499 Students
2 Courses
Founder at

Rocco is founder of Simmer Industries, a place for developers to share their WebGL content. WebGL is an open standard on the web that enables 3D graphics in the web browser.

Previously, Rocco was a Senior Developer at TINT where he focussed on frontend development and user experience. He has 15+ years of development experience and has shipped dozens commercial video games and web applications over his career.

He taught Computer Science II and was a teacher's assistant for Java Enterprise Programming at Rensselaer Polytechnic Institute, and occasionally speaks at industry events such as ForwardJS, HTMLDevConf and Unity Unite.

He's a volunteer mentor at MissionBit in San Francisco where he teaches public high school students how to begin web programming.

When he's not writing code or teaching, he enjoys skiing, bike riding and traveling.