- Setting up your testing and debugging environment
- Customize the display of Chrome Developer Tools
- Inspecting elements and styles
- Using the Console
- Opening source files in the Sources panel
- Identifying code that slows page loading
- Emulating mobile connections
Skill Level Intermediate
- [Sasha] Chrome developer tools, or dev tools, are a popular choice among web developers for checking and testing web pages and apps. I'm Sasha Vodnik, a web developer, author, and educator. In this course, I'll give you hands on experience using the most powerful dev tools features for everyday tasks. We'll look at tools for exploring the DOM and elements styles in different states. We'll examine errors, and create our own error messages. We'll open source files, and set and use break points, and we'll look at the HTTP requests and response headers for files on the current page, and use dev tools to identify bottlenecks in page load.
After you explore and use each of these utilities, you'll have an expanded toolbox for your day to day development work, whether front end, back end, or full stack. Let's get started.