Mastering Chrome Developer Tools v2

Mastering Chrome Developer Tools v2

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 3h 35m | 1.30 GB

Go beyond console.log to master all the built-in tools available in Google’s Chrome Developer Tools to edit, debug, and profile your web applications! You’ll learn to step through your code with the debugger, audit web page performance, debug Node.js, and remove “page jank” when a site isn’t keeping up.

Table of Contents

Introduction
1 Introduction
2 A History of Debugging
3 Developer Tool Panels

Editing
4 Elements & Styles
5 Specificity and DOM Nodes
6 DOM Breakpoints
7 Saving Changes in Workspaces
8 Recent Selection History
9 Editing a Page Exercise
10 Editing a Page Solution

Debugging
11 Step Through Debugging
12 Blackboxing
13 Conditional & XHR Breakpoints
14 Debugging Exercise
15 Debugging Solution

Networking
16 The Waterfall
17 Color Codes
18 Screenshots

Auditing
19 Auditing Tools
20 Audit Exercise
21 Audit Solution

Node.js Profiling
22 The –inspect Flag
23 Node.js Debugging Exercise
24 Node.js Debugging Solution

Performance Monitoring
25 The Performance API
26 Mark and Measure Exercise
27 Mark and Measure Solution

Image Performance
28 Querying By Size
29 srcset Exercise
30 srcset Solution

Page Jank
31 Page Jank
32 Performance Panel
33 Page Jank Exericse
34 Page Jank Solution

Memory
35 Causes of Memory Leaks
36 Chrome Task Manager & Snapshots
37 Memory Leaks Exercise
38 Memory Leaks Solution

Wrapping Up
39 Wrapping Up