Using The Chrome Developer Tools
Level: Beginner | April 2013 | Duration: 2h 50m | Trainer: John Sonmez | Compressed: 274 MB
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.
.
Overview and Console | 00:35:03 | |
Introduction | 00:39 | |
Who This Course Is For | 00:53 | |
Course Overview | 01:06 | |
What Are The Chrome Dev Tools? | 01:15 | |
Opening The Dev Tools | 01:16 | |
Panel Overview | 01:44 | |
The Console | 00:53 | |
Opening The Console | 00:50 | |
Console Logging | 00:36 | |
Project Setup | 01:11 | |
Using Logging | 02:41 | |
Filtering | 01:28 | |
Using Assert | 01:09 | |
Grouping And Formatting | 00:28 | |
Using Grouping | 02:48 | |
Using Formatting | 02:34 | |
Logging Objects | 01:32 | |
Timing | 01:19 | |
Debugger | 01:28 | |
Command Line API | 00:41 | |
Javascript Expressions | 02:14 | |
Selectors | 00:51 | |
Using The $ Selector | 01:25 | |
Inspecting | 01:21 | |
Monitoring Events | 02:03 | |
Up Next | 00:38 | |
Elements Panel | 00:33:24 | |
Introduction | 00:35 | |
View, Edit, Reload | 00:36 | |
The Solution | 00:39 | |
Elements Panel Overview | 00:57 | |
Using Inspect Element | 01:22 | |
Adding And Editing | 02:31 | |
Moving And Deleting | 00:53 | |
Inspect Mode | 01:01 | |
Recently Selected | 01:22 | |
Styles | 00:26 | |
Examining Styles | 02:15 | |
Computed Styles | 01:50 | |
Enabling And Disabling | 01:12 | |
Editing And Adding | 01:20 | |
Pseudostate Styles | 02:17 | |
Box Model | 00:30 | |
Editing The Box Model | 02:51 | |
Editing Properties | 01:06 | |
DOM Breakpoints | 02:52 | |
Event Listeners | 01:28 | |
Searching | 01:20 | |
Saving Modifications | 03:24 | |
Up Next | 00:37 | |
Resources And Network Panels | 00:30:59 | |
Introduction | 00:52 | |
Resources Panel Overview | 00:37 | |
Modified JavaScript Files | 01:25 | |
Chrome Version | 00:51 | |
Frames | 02:43 | |
Web SQL | 02:19 | |
Indexed DB | 03:13 | |
Local and Session Storage | 01:45 | |
Cookies | 02:28 | |
Application Cache | 01:45 | |
Network Panel Overview | 00:34 | |
Reading The Timeline | 04:20 | |
More Advanced Timeline | 03:38 | |
Sorting The Timeline | 02:03 | |
Request Data | 01:36 | |
Up Next | 00:50 | |
Resources And Network Panels | 00:27:50 | |
Introduction | 00:48 | |
Sources Panel Overview | 00:52 | |
Viewing Sources | 02:16 | |
Modifying The Scripts | 02:03 | |
Basic Debugging | 03:08 | |
Watch Expressions | 01:19 | |
Scope Variables | 01:16 | |
Conditional Breakpoints | 02:31 | |
Caught Exceptions | 01:25 | |
Uncaught Exceptions | 01:05 | |
XHR Breakpoints | 02:14 | |
Event Listener Breakpoints | 02:18 | |
Web Workers | 02:55 | |
Audit Panel Overview | 00:34 | |
Running An Audit | 02:18 | |
Up Next | 00:48 | |
Timeline And Profiles Panels | 00:42:56 | |
Introduction | 00:45 | |
Timeline Panel Overview | 01:05 | |
Recording a Timeline | 01:28 | |
Events View – Top Bar | 01:43 | |
Events View – Records | 05:12 | |
Frames View | 05:59 | |
Memory View – Top Frame | 02:17 | |
Memory View – Counters | 00:59 | |
Troubleshooting Slow JavaScript | 03:31 | |
Marking The Timeline | 02:17 | |
Profiles Panel Overview | 00:52 | |
CPU Profiles | 03:25 | |
CSS Selector Profiles | 02:44 | |
Memory Overview | 01:11 | |
Memory Snapshotting | 05:12 | |
Comparing Snapshots | 03:25 | |
The End | 00:51 |
.
.
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!
.
Download
Mirror
47 total views, no views today