Using The Chrome Developer Tools

An exploration of every one of the 8 panels that exist in the Chrome Developer Tools toolbar.
Course info
Rating
(532)
Level
Beginner
Updated
Apr 24, 2013
Duration
2h 50m
Table of contents
Overview and Console
Elements Panel
Resources And Network Panels
Sources And Network Panels
Timeline And Profiles Panels
Description
Course info
Rating
(532)
Level
Beginner
Updated
Apr 24, 2013
Duration
2h 50m
Description

Did you know that you can modify just about any part of a web page live in your browser? What about setting breakpoints that automatically trigger whenever an AJAX call is made, or whenever a specific element on a page is modified? You can do all this and more with the Chrome Developer Tools, and in this course I'll show you how. If you've seen the Chrome Developer Tools, but just not had the time to really dig into them, or you get the feeling that you are only scratching the surface of what the Chrome Developer Tools can do, this course might be exactly what you need to take your web development abilities to the next level. I've found that many web developers are only aware of the basic features of the Chrome Developer Tools, so I've structured this course to go over just about every inch of the tools and explain clearly what they do and how you can use them. In this course we'll cover every one of the 8 panels that exist in the Chrome Developer Tools toolbar. We'll start off by going over the function of the console, giving you the ability to modify JavaScript objects interactively on the page, debug issues and add helpful log messages with ease. Then, we'll take a trip to the elements panel where we'll be seeing how to modify HTML and CSS styles and see the effects immediately displayed on the page. After that, we'll check out the network panel and how to find out exactly what resources our pages are getting from the network, how long it is taking to get them, and what order all of this is happening in. Then, we'll head over to the sources panel and unveil the powerful built-in JavaScript debugging capabilities that Chrome has out of the box. (You won't want to miss this part.) We'll follow up with a quick review of the audits panel to see how it can give us some handy optimization tips for our pages. Then we'll dig into the timeline panel where we'll learn how to figure out exactly what is happening when a page is being displayed and how to optimize our pages to ensure the animation is never choppy. Finally, we'll wrap things up by seeing how the profiles panel can help us quickly identify performance problems with JavaScript or CSS selectors and also let us see into the scary realm of JavaScript memory management. If you’ve been waiting for the right time to really dig into the Chrome Developer Tools and see what all they can do, that time has come!

About the author
About the author

John Sonmez is the founder of Simple Programmer (http://simpleprogrammer.com), where he tirelessly pursues his vision of transforming complex issues into simple solutions

More from the author
Beginning Lua
Intermediate
2h 50m
2 Dec 2013
Beginning HTML 5 Game Development With Quintus
Intermediate
2h 52m
25 Oct 2013
Beginning HTML5 Apps For Firefox OS
Intermediate
2h 20m
17 Oct 2013
More courses by John Sonmez
Section Introduction Transcripts
Section Introduction Transcripts

Overview and Console
Hi, this is John Sonmez from Pluralsight, and welcome to this course on Chrome dev tools. Most web developers and Chrome users are at least somewhat familiar with Chrome's developer tools. But not many developers take the time to really learn how to use the tools. This course is aimed at giving you a comprehensive look at all of the major features of the Chrome dev tools and showing you step by step how to use each tool. By the end of this course, you should feel pretty comfortable using the Chrome dev tools and have a good idea of what exactly each of those tabs on the Chrome dev tools toolbar does and how to use them.

Elements Panel
Hi, this is John Sonmez, from Pluralsight, and in this module, we'll be going over the elements panel. Most developers that use the Chrome Developer Tools have at least seen the elements panel, but you won't want to skip this module, because we'll be going in-depth, and learning about some tips and tricks that you might not be aware of. Learning the tricks of the elements panel can save you time in getting your design just right, and troubleshooting tricky layout issues. In this module, you'll learn everything you need to know to start using the elements panel like a pro.

Resources And Network Panels
Hi, this is John Sonmez from Pluralsight, and this module we'll will be digging into HTML5 features as we explore the Resources panel and checking out exactly how resources are being loaded in the Network panel. We'll be learning some good techniques for determining exactly what data is being used in your web pages as we check out the Resources panel. And even though we won't be digging into the specifics of HTML5 features like IndexedDB and local storage, we'll see how the Chrome DevTools allows us to see exactly what data is being stored without having to write debugging code to get that data. We'll also learn how to make sense of all the data in the Network panel in order to figure out exactly what data is coming over the network and how long it's taking to get there.

Sources And Network Panels
Hi, this is John Sonmez from Pluralsight, and in this module, we'll be going over the sources and audit panels in the chrome dev tools. With the large amount of JavaScript that is used in web applications today, it's very important to be able to quickly troubleshoot and debug JavaScript issues. In this module, I'll show you how to get the most out of using the sources panel to debug JavaScript, and make it easier for you to get to the bottom of JavaScript problems. We'll also cover the audit panel, which is a handy tool for getting some tips for improving the performance of your web pages, or correcting other issues. By the end of this module, you'll know what all those options in the JavaScript debugger do, and hopefully learn a few new tricks that will save you some time.

Timeline And Profiles Panels
Hi this is John Sonmez from Pluralsight, and in this module we'll be wrapping up our coverage of the Chrome developer tools as we tackle the two most difficult panels, the timeline and profiles panels. These panels can be used in conjunction to really help us fine tune our web pages, and find out exactly what is happening inside the browser. The only problem is both of these panels can be a bit difficult to use, because they contain so much data, and what all that data is is not always apparent. Don't worry, though. I'll be giving you the best bang for your buck as I show you the things you should know about these panels that will benefit you the greatest, without requiring a degree in memory management.