What you'll learn

Modify live webpages and test out new ideas quickly
Quickly build and test scripts live without ever refreshing the browser
Diagnose and fix problems with existing code
Optimize loading, memory and performance issues

Course content

11 sections • 39 lectures • 2h 35m total length

Introduction and Syllabus3:29
An introduction to why Chrome Devtools are so important, and the different topics that we'll cover in the class.
Three ways to open Chrome Developer Tools2:14
Learn the three ways to open Chrome Developer Tools, and get an introduction to your instructor.
Console Commands and Multiline Statements3:57
Understand how to type Javascript commands into the console and how to enter multiline statements like for loops or functions.
Sources, Network, and Other Panels2:51
A brief overview of:
Networking
Security
Sources Pretty Print
Application Tab and Cookies
Audits
Inspect and Style a Page Live4:34
Use the inspector to preview live styling changes on a webapp called TodoMVC.
How to View Your Changes6:33
Get before and after snapshots of your page edits. Understand where your changes were made on the page with the Meld diff tool.

Introducing Snippets2:08
Understand that styling changes are only temporary, and get introduced to Javascript snippets to run code on any webpage.
Applying Changes5:03
Copy changes from the inspector to your hosted webpage.
CSS History1:18
Experimental Chrome Features & Workspaces2:11
Learn how to find and enable experimental Devtools features, and use Workspaces with persistence 2.0 to automatically save code to your hard drive from Devtools.

Console Multiline and Asserts5:04
Use multiline console statements, and understand where to find info about the Console API.
Miscellaneous Console Functions4:19
Learn various console functions like dir, dirxml, group, warn and time.
Console Profile & Dollar Shortcuts8:09
Run profiles from the console, understand different chrome versions, and use "dollar shortcuts" to quickly tweak DOM elements with Javascript.
Console Styling1:34
Add styling and images to your console messages!

Types of Breakpoints4:27
Line of Code Breakpoints6:14
Review of how to stop your code with line-of-code breakpoints and the debugger statement.
Conditional Breakpoints2:05
Stop your code only when a certain condition is met.
DOM and Network Breakpoints2:43
Stop your code when the DOM changes or when an AJAX / XHR request is made.
Event and Exception Breakpoints3:09
Stop code when an event occurs or an error is thrown.

Downloading From Codepen.io1:48
Download content from Codepen to run it locally.
The Network Panel6:58
Hacking Reservations on Yelp4:01
Use the network panel to understand real-world network requests, and hack the calls made to a live API.
Improve page load speed with Audits & Lighthouse2:19
Understand where to find problems with page load and an intro to Lighthouse for advanced performance checking.
Security and HTTPS with NGrok3:04
Learn how to look at HTTPS issues with devtools, and a solution for delivering your own development HTTPS server.

Introducing a Client Performance Example3:57
Introduce an example which shows CPU, memory and rendering slowness.
Task Manager, FPS meter, and Rendering Tab4:30
Use the Task Manager, frames per second meter, and rendering tab to detect memory and performance problems on your site.
Performance / Timeline Tab4:01
Look at your page performance over time, view memory and CPU usage, and Javascript code profiling.
Detecting Memory Leaks3:37
A real world memory leak and how to diagnose similar problems with the memory tab.

Requirements

You have basic knowledge of HTML, CSS and/or Javascript

Description

Do you want to become an expert web developer?

I've worked with tons of different platforms from PC to Playstation, and nothing beats the power of Google Chrome Developer Tools. Let's take advantage of that.

This course is the comprehensive guide to DevTools. We start with simple styling examples, and use tools like the colorpicker and box shadow editor to design our pages. But we move quickly to advanced topics like using the Audits panel to understand slow page performance, and the memory panel to understand why our app might be leaking memory.

Testimonials:

I learned a lot of things I didn't know about although I've used Devtools for many years. -Bernard Niset
My first Udemy course, but I enjoyed it thoroughly. I have some prior experience with chrome dev tools, but there were still some tips I will be taking with me from this course - Stephen Wong
The instructor is clear and concise and the course is loaded with information. There are even some valuable nuggets for experienced developers! - Tom Fitch

Here's a sample of what you'll be able to achieve after taking this class:

Add advanced styling with built-in editors like the animations panel and the transitions editor.
Using six different breakpoint techniques, you'll be able to understand and debug any piece of javascript code.
Analyze network calls, and even hack the dinner reservation system on Yelp.
Speed up your page load speeds with Audits and Lighthouse to make your site blazingly fast.
Profile and fix rendering, CPU and memory bottlenecks.

Every minute of this course provides valuable information and there is minimal repetition and typing. The course was built in 2017 with a prerelease version of Chrome and even demonstrates the use of experimental features such as Workspaces 2.0.

For the beginners, I start slow, but work quickly towards advanced usage, and for the experts, I've made sure to sprinkle in original techniques to improve your web pages that can't be found anywhere else.

Who this course is for:

Anyone with an interest in taking their web development skills to the next level.
Developers / Programmers / Software Engineers
UI/UX Designers
Artists
Project / Product Managers

What you'll learn

Explore related topics

Course content

A Tour of the Developer Tools6 lectures • 24min

Setting Up a Local Server2 lectures • 9min

Snippets & Alternate Ways to Understand Your Changes4 lectures • 11min

GUI Style Editors2 lectures • 9min

Basic Javascript Debugging3 lectures • 15min

Navigating & Applications Tab2 lectures • 6min

Console API & Shortcuts4 lectures • 19min

Breakpoints5 lectures • 19min

Network, Page Speed and Security5 lectures • 18min

Client Side Performance Monitoring4 lectures • 16min

Requirements

Description

Who this course is for: