Using The Chrome Developer Tools
![Pluralsight](https://static.mytechlogy.com/cache/198e0a947da0127606f2749b57b54665_w30_h30_cp_sc.png)
Pluralsight
Course Summary
An exploration of every one of the 8 panels that exist in the Chrome Developer Tools toolbar.
-
+
Course 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!
-
+
Course Syllabus
Overview and Console- 35m 3s
—Introduction 0m 39s
—Who This Course Is For 0m 53s
—Course Overview 1m 6s
—What Are The Chrome Dev Tools? 1m 15s
—Opening The Dev Tools 1m 16s
—Panel Overview 1m 44s
—The Console 0m 53s
—Opening The Console 0m 50s
—Console Logging 0m 36s
—Project Setup 1m 11s
—Using Logging 2m 41s
—Filtering 1m 28s
—Using Assert 1m 9s
—Grouping And Formatting 0m 28s
—Using Grouping 2m 48s
—Using Formatting 2m 34s
—Logging Objects 1m 32s
—Timing 1m 19s
—Debugger 1m 28s
—Command Line API 0m 41s
—Javascript Expressions 2m 14s
—Selectors 0m 51s
—Using The $ Selector 1m 25s
—Inspecting 1m 21s
—Monitoring Events 2m 3s
—Up Next 0m 38sElements Panel- 33m 24s
—Introduction 0m 35s
—View, Edit, Reload 0m 36s
—The Solution 0m 39s
—Elements Panel Overview 0m 57s
—Using Inspect Element 1m 22s
—Adding And Editing 2m 31s
—Moving And Deleting 0m 53s
—Inspect Mode 1m 1s
—Recently Selected 1m 22s
—Styles 0m 26s
—Examining Styles 2m 15s
—Computed Styles 1m 50s
—Enabling And Disabling 1m 12s
—Editing And Adding 1m 20s
—Pseudostate Styles 2m 17s
—Box Model 0m 30s
—Editing The Box Model 2m 51s
—Editing Properties 1m 6s
—DOM Breakpoints 2m 52s
—Event Listeners 1m 28s
—Searching 1m 20s
—Saving Modifications 3m 24s
—Up Next 0m 37sResources And Network Panels- 30m 59sSources And Network Panels- 27m 50sTimeline And Profiles Panels- 42m 56s