Devtools Pro: The Basics of Chrome Developer Tools

A Quick Start Guide to Editing Live Web Pages
Rating: 4.4 out of 5 (1,938 ratings)
27,862 students
Devtools Pro: The Basics of Chrome Developer Tools
Rating: 4.4 out of 5 (1,941 ratings)
27,979 students
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

Requirements

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

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 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
Curriculum
3 sections • 18 lectures • 45m total length
  • What We'll Accomplish
  • Introduction & The Elements Panel
  • Elements Panel Exercise
  • A Quick Tour of DevTools
  • After your tour
  • Using the Console to Run Javascript
  • Exercise: Color Changes with Javascript
  • Sources Tab and Basic Debugging
  • Breakpoints / Debugging
  • Snippets: The Console on Steroids
  • Cookies and Local Storage with the Application Tab
  • Local Storage Exercise
  • A Peak at Network Calls
  • Network Calls Exercise
  • Page Load Speed with Audits
  • Performance, Memory and Security
  • The Most Useful Keyboard Shortcuts
  • Styling Editors
  • Styling Editors Exercise
  • Bonus! Coupon at 1:15! Other Resources & My Twitter

Instructor
Founder at SIMMER.io
Rocco Balsamo
  • 4.3 Instructor Rating
  • 2,628 Reviews
  • 31,257 Students
  • 3 Courses

Rocco is founder of SIMMER .io, 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.