Learn how to use Chrome Developer Tools (DevTools) to test and debug websites and applications.
Overview
Syllabus
Introduction
- Streamlining development with Chrome DevTools
- What you should know
- Setting up your environment
- Accessing and using the developer tools
- Customizing the display of the developer 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
- 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
- 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
- Open files in DevTools
- Work with breakpoints
- Edit files and save changes
- Challenge: Edit source files
- Solution: Edit source files
- View HTTP request and response headers
- Identify items that slow page loading
- Emulate mobile connections
- Challenge: Examine network performance
- Solution: Examine network performance
- Examine storage
- Work with cookies
- Challenge: Examine local storage and cookies
- Solution: Examine local storage and cookies
- Next steps
Taught by
Sasha Vodnik