Learning Chrome Web Developer Tools

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