Devtools Pro: Beginner to Expert w/ Chrome Developer Tools

The Complete 2017 Guide to Building Beautiful, Fast, and Bug Free Web Applications with Google Chrome DevTools

4.41 (1792 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Devtools Pro: Beginner to Expert w/ Chrome Developer Tools
9,886
students
2.5 hours
content
Apr 2017
last update
$54.99
regular price

What you will 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

Why take this course?

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.

Screenshots

Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Screenshot_01Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Screenshot_02Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Screenshot_03Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Screenshot_04

Reviews

Mark
October 4, 2023
You can still learn some good tips about DevTools. It is not for beginners though. The teaching is fast.
Sara
October 3, 2023
After taking the basic course of Devtools, I enrolled on this one to learn more about how to do some basic IT analysis before leaving all the bugs to my dev team. I've learned a lot, no doubts, but since I do have very very little basic knowledge of HTML, CSS and/or Javascript, I did not understand some of the lessons. However, what I understood made me want to go deeper into this subject, so thank you, Rocco! PS. Some names or described operations are a little bit updated since Chrome Devtools have changed since 2017, but Chrome documentation can help you out.
Luis
September 27, 2023
Learned more skill sets and added the to my work flow. Definitely a good resource to revisit for a dev tools refresher.
Mohd
September 17, 2023
I wanted to express my gratitude for your excellent teaching style and for creating such a helpful course. Thank you!"
Josué
August 24, 2023
Everything is very straight forwards. Sometimes, a little explanation of the "Why" behind something could be great.
Hitoshi
June 21, 2023
The course contains information to get started on using Chrome Developer tools. I actually started using Selenium and needed information to improve my development. This course provided me get started.
Noriode
May 15, 2023
Good content, a nice refresh for an experienced developer and a good learning opportunity for a beginner.
Magenta
May 1, 2023
I'm already starting to be able to see insights on why the landing page of the site I'm working on is loading slowly. P.s. fellow students, it's helpful to go through this class while looking at a website whose codebase you're familiar with.
Samuel
March 28, 2023
Exactly as advertised -- Straightforward and simple tips for understanding how to better debug sites and apps with the Dev Tools.
Matt
March 14, 2023
Good explanations. Some code snippets missing from lessons. Some previous experience necessary to understand, for example, how to install Python. Some examples outdated, for example, the CSS History panel is now called Changes, and if you're using Python 3, the commands to setup a server are different.
Surya
March 5, 2023
Course gave good information but later commands in future versions need to be updated atleast in notes so that new users with latest versions may feel comfortable while learning.
Nataliia
February 27, 2023
a lot of features don't work with an Angular code:( for instance, you click on some button, go to the Elements -> Event Listeners -> Click.. and it shows only Angular under the hood methods, but not the function which is called on click.
Branislav
January 9, 2023
Great class! In this course I have acquired a lot of knowledge that HTML and CSS courses don't cover. This DevTools course shows so much useful everyday options.
Will
December 29, 2022
I have done a few classes about this subject, but this takes you deeper and explains each feature in much more detail. I highly recommend this class.
Sebastiaan
March 7, 2022
current date is december 2022. These lessons are very practical. Every topic is well explained with a whole bunch of personal little tricks the teacher gathered over the years. Thanks for a great course!

Charts

Price

Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Price chart

Rating

Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Ratings chart

Enrollment distribution

Devtools Pro: Beginner to Expert w/ Chrome Developer Tools - Distribution chart
1140232
udemy ID
3/9/2017
course created date
2/8/2020
course indexed date
Bot
course submited by