- 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
Skill Level Intermediate
- [Sasha] Chrome Developer Tools, or DevTools, are a popular choice among web developers for checking and testing web pages and apps. These tools are also an important debugging helper and can give you significant insights into the performance of your site or app, even before it's deployed. But with so many utilities packed into the DevTools, it can be hard to know where to start and easy to overlook some really useful aids in development. Working with the most useful basic utilities in Chrome DevTools can give you a feel for what they can do for you. Getting some practice using them on your own code, as well as on the web at large, also gives you a strong sense of the breadth of tools available. In my LinkedIn Learning course, I walk you through using the parts of Chrome Developer Tools that I find most useful. I also show you some tricks and shortcuts that the builders of Chrome have included for developers to get things done more quickly. I'm Sasha Vodnik. I'm a web developer and I've spent a lot of time debugging and optimizing code in my browser. If you want to take fuller advantage of front-end utilities for developers and up your debugging game, I invite you to join me for this course on Chrome Developer Tools.
1. Developer Tools Introduction
2. Using Layout Tools
3. Using the Elements Panel
4. Using the Console Panel
5. Using the Sources Panel
6. Using the Network Panel
Emulate mobile connections3m 20s
7. Using the Application Panel
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.