Learning Chrome Web Developer Tools

Course details

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.

Topics include:
- Setting up your testing and debugging environment
- Customizing the display of Chrome Developer Tools
- Simulating webpages and apps in different devices
- Emulating rendering
- Inspecting elements and styles
- Reading and writing in the Console
- Opening and editing files in the Sources panel
- Using the Network panel
- Identifying code that slows page loading
- Examining storage and data with the Application panel

Concepts

0. Introduction

01 - Streamlining development with Chrome DevTools
02 - What you should know
03 - Setting up your environment

1. Developer Tools Introduction

04 - Accessing and using the developer tools
05 - Customizing the display of the developer tools

2. Using Layout Tools

06 - View a page in Device Mode
07 - Test a responsive design
08 - Emulate rendering on other devices
09 - Model connection speeds
10 - Challenge - Critique a responsive design
11 - Solution - Critique a responsive design

3. Using the Elements Panel

12 - Inspect elements
13 - Modify the DOM
14 - Inspect styles
15 - Modify styles
16 - Capture a screenshot
17 - Challenge - Inspect and modify elements and styles
18 - Solution - Inspect and modify elements and styles

4. Using the Console Panel

19 - View messages in the Console
20 - Write information to the Console
21 - Use the Console command line
22 - Examine elements in the Console
23 - Challenge - Work with the Console
24 - Solution - Work with the Console

5. Using the Sources Panel

25 - Open files in DevTools
26 - Work with breakpoints
27 - Edit files and save changes
28 - Challenge - Edit source files
29 - Solution - Edit source files

6. Using the Network Panel

30 - View HTTP request and response headers
31 - Identify items that slow page loading
32 - Emulate mobile connections
33 - Challenge - Examine network performance
34 - Solution - Examine network performance

7. Using the Application Panel

35 - Examine storage
36 - Work with cookies
37 - Challenge - Examine local storage and cookies
38 - Solution - Examine local storage and cookies

Conclusion

39 - Next steps