What you should know - Chrome Tutorial

Contents

• Introduction Introduction

  • Streamlining development with Chrome DevTools

    33s
  • What you should know

    32s
  • Setting up your environment

    3m 2s
• 1. Developer Tools Introduction 1. Developer Tools Introduction

  • Accessing and using the developer tools

    3m 49s
  • Customizing the display of the developer tools

    3m 49s
• 2. Using Layout Tools 2. Using Layout Tools

  • View a page in Device Mode

    2m 17s
  • Test a responsive design

    3m 44s
  • Emulate rendering on other devices

    4m 12s
  • Model connection speeds

    3m 27s
  • Challenge: Critique a responsive design

    1m
  • Solution: Critique a responsive design

    8m 25s
• 3. Using the Elements Panel 3. Using the Elements Panel

  • Inspect elements

    4m 24s
  • Modify the DOM

    2m 3s
  • Inspect styles

    6m 20s
  • Modify styles

    3m 48s
  • Capture a screenshot

    3m 58s
  • Challenge: Inspect and modify elements and styles

    1m 9s
  • Solution: Inspect and modify elements and styles

    6m
• 4. Using the Console Panel 4. Using the Console Panel

  • View messages in the Console

    5m 51s
  • Write information to the Console

    4m 28s
  • Use the Console command line

    3m 20s
  • Examine elements in the Console

    3m 31s
  • Challenge: Work with the Console

    1m 3s
  • Solution: Work with the Console

    5m 50s
• 5. Using the Sources Panel 5. Using the Sources Panel

  • Open files in DevTools

    3m 34s
  • Work with breakpoints

    8m 12s
  • Edit files and save changes

    7m 27s
  • Challenge: Edit source files

    1m 10s
  • Solution: Edit source files

    5m 20s
• 6. Using the Network Panel 6. Using the Network Panel

  • View HTTP request and response headers

    3m 57s
  • Identify items that slow page loading

    3m 20s
  • Emulate mobile connections

    3m 20s
  • Challenge: Examine network performance

    50s
  • Solution: Examine network performance

    4m 25s
• 7. Using the Application Panel 7. Using the Application Panel

  • Examine storage

    4m 42s
  • Work with cookies

    3m 52s
  • Challenge: Examine local storage and cookies

    40s
  • Solution: Examine local storage and cookies

    3m 58s
• Conclusion Conclusion

  • Next steps

    48s