Learning Chrome Web Developer Tools
Offered By: LinkedIn Learning
Course Description
Overview
Learn how to use Chrome Developer Tools (DevTools) to test and debug websites and applications.
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
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX