Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Learning Chrome Web Developer Tools

via LinkedIn Learning

Overview

Learn how to use Chrome Developer Tools (DevTools) to test and debug websites and applications.

All major browsers offer tools to examine the code of a webpage or app and evaluate its performance. Chrome Developer Tools (DevTools) is the industry standard. In this course, you can explore how Chrome DevTools work in actual testing and debugging scenarios and how you can add this useful collection of utilities to your development workflow. Each chapter digs into a different tool, including the Console, Elements, Network, and Application panels. Instructor Sasha Vodnik helps you test webpages and apps in different device modes and emulators, explore the DOM, inspect and modify HTML and CSS, edit source files, identify bottlenecks in page loads, access and manipulate cookies, and more. Plus, learn useful tricks and shortcuts for speeding up common debugging tasks.

Syllabus

Introduction
  • Streamlining development with Chrome DevTools
  • What you should know
  • Setting up your environment
1. Developer Tools Introduction
  • Accessing and using the developer tools
  • Customizing the display of the developer tools
2. Using Layout Tools
  • View a page in Device Mode
  • Test a responsive design
  • Emulate rendering on other devices
  • Model connection speeds
  • Challenge: Critique a responsive design
  • Solution: Critique a responsive design
3. Using the Elements Panel
  • Inspect elements
  • Modify the DOM
  • Inspect styles
  • Modify styles
  • Capture a screenshot
  • Challenge: Inspect and modify elements and styles
  • Solution: Inspect and modify elements and styles
4. Using the Console Panel
  • View messages in the Console
  • Write information to the Console
  • Use the Console command line
  • Examine elements in the Console
  • Challenge: Work with the Console
  • Solution: Work with the Console
5. Using the Sources Panel
  • Open files in DevTools
  • Work with breakpoints
  • Edit files and save changes
  • Challenge: Edit source files
  • Solution: Edit source files
6. Using the Network Panel
  • View HTTP request and response headers
  • Identify items that slow page loading
  • Emulate mobile connections
  • Challenge: Examine network performance
  • Solution: Examine network performance
7. Using the Application Panel
  • Examine storage
  • Work with cookies
  • Challenge: Examine local storage and cookies
  • Solution: Examine local storage and cookies
Conclusion
  • Next steps

Taught by

Sasha Vodnik

Reviews

Start your review of Learning Chrome Web Developer Tools

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.