Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Mastering Web and Mobile Debugging Using Chrome Dev Tools to your Wishlist.

Add to Wishlist

Mastering Web and Mobile Debugging Using Chrome Dev Tools

Turbo charge your web development!
4.3 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,059 students enrolled
Created by Mohammad Azam
Last updated 1/2016
$10 $195 95% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Debug web and mobile applications
Turbo charge your web development
Locate bottlenecks in your application
Master the Chrome Developer Tools Console commands
View Curriculum
  • Familiarity with basic CSS and Javascript syntax is recommended but not required.
  • A computer with an internet connection
  • Google Chrome browser

Mastering Web and Mobile Debugging Using Chrome Developer Tools is a course about the productivity gains that you are going to learn by using Google Chrome Developer Tools. The knowledge you will learn in this course will make you a better web and mobile web developer. You will be able to quickly resolve CSS, Javascript and performance issues in your web applications.

This course is designed to be for all levels of developers. We will start with the basics and then step by step improve our knowledge by tackling real world problems and scenarios. The course is designed to be around two hours long which provides ample amount of time to cover the most features of the Google Chrome Developer Tools.

The information and knowledge provided in this course will make you an elite web developer with the skills to quickly diagnose and solve an issue. Stop wasting hours of time chasing web development issues which can be resolved in few minutes using the correct techniques and information.

This is the most comprehensive course on Google Chrome Developer Tools available on Udemy website. I am also very active on Udemy forums and will be available 24/7 to answer any questions about the course.

Who is the target audience?
  • This course is intended to all web and mobile web developers who want to expand their knowledge of debugging web applications. No prior programming knowledge is needed.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 21 Lectures Collapse All 21 Lectures 02:03:06
Welcome to Mastering Google Chrome Developer Tools
1 Lecture 03:07
Getting Started
2 Lectures 11:21

In this lecture we will download Google Chrome browser. This is the first step to get started with debugging web development and mobile websites using Chrome.

Downloading Google Chrome

In this lecture we are going to explore the Google Chrome Developer Tools. This will be a quick overview of different features available in the Google Chrome Developer Tools.

Exploring Google Chrome Web Developer Tools
Inspecting CSS Using Google Chrome Developer Tools
3 Lectures 22:57

In this lecture we are going to utilize the Chrome Web Dev Tools to alter the look and feel of a web page. We are going to take a simple web page and enhance the appearance by changing the CSS using Chrome Dev Tools.

Preview 08:37

This lecture demonstrates how to create workspaces in Google Chrome Developer Tools. Workspaces allows to map the local folder to Google Chrome web pages. This means you can easily persist the changes you make in Chrome browser to our local drive.

Persisting CSS Changes Permanently to Local System

In this lecture we will refactor our CSS and move it into a separate file. Moving the inline CSS into a separate file allows our app to gain performance benefits and make our application faster.

Making CSS Code Reusable
Debugging Javascript Using Chrome Developer Tools
2 Lectures 16:04

In this lecture we will introduce Javascript debugging using Chrome Developer Tools. This lecture focuses on how to create and debug a simple Javascript calculator.

Developing a Calculator

In this lecture we will refactor the Javascript code and put it in a separate file. Creating a separate file for Javascript allows the website to run faster and also it makes it easy to modify the code easily in the future.

Making Javascript Code Reusable
Google Chrome Developer Tools Console
3 Lectures 24:13
Beginning Chrome Developer Tools Console

Intermediate Chrome Developer Tools Console

Advanced Chrome Developer Tools Console
Chrome Developer Tools Mobile Features
2 Lectures 10:59

In this lecture we will cover how to get started with debugging mobile websites and also Hybrid mobile applications. We will cover different types of mobile modes and how to switch between devices as well as the network connections to test your device.

Understanding Chrome Device Modes

This lecture focuses on debugging a mobile website live on your physical device. We will learn about the remote debugging feature in Google Chrome Developer Tools which allows to test your mobile applications in a physical Android device.

Remote Debugging Devices
3 Lectures 15:46

In this lecture we will learn about how to use the Timeline feature. Timeline allows us to debug performance related issues with our applications. Timeline indicates which resources were downloaded, how much it took and also which events were triggered to download resources. A good understanding of Timeline feature can help you optimize your applications.

Understanding Timeline

Related to Timeline, Profiling also allows you to capture performance related statistics about your application. Profiling digs deeper into the memory allocations and the amount of resources used in your web application.

Profiling Applications

In this lecture we will take a quick look at different settings available in Google Chrome Developer Tools. These settings include caching, disabling Javascript, rulers, mobile devices modes, throttling modes etc.

Side Note: Chrome Developer Tools Settings
Chrome Extensions
3 Lectures 12:46

In this lecture we will pay a visit to the Google Chrome Play Store. The Play Store allows us to download Google Chrome extensions which can be utilized to enhance the features and experience of the Google Chrome browser.

Downloading and Adding Extensions

This lecture covers the basics of the Postman extension. Postman extension allows to create network requests using Google Chrome browser. The really power of Postman extension is the ability to inject custom headers and data to the request and also analyze the results in different formats.


This lecture covers EditThisCookie extension. EditThisCookie allows developers to view different cookies injected in their browser by the websites. EditThisCookie is an easy way to manage cookies and inspecting the values of cookies.

2 Lectures 05:53

Every good thing must end! The great thing about this ending is that you can use all the knowledge you learned in this course and apply it to create your next web or mobile web application. I sincerely hope that you have enjoyed the course as much as I have enjoyed developing it. I also hope that the techniques you have learned in this course will allow you to cut down on your debugging time. Thank you once again for watching this course!

What did we learn?

About the Instructor
4.2 Average rating
94 Reviews
4,057 Students
6 Courses
Apple Featured iOS Developer and iOS Instructor

My name is Mohammad Azam and I have been programming in iOS for the last 6+ years. Currently, I am teaching iOS at The Iron Yard academy, which is the world's largest coding bootcamp. Before joining The Iron Yard I have worked as a lead mobile developer for many large companies including Schlumberger, Baker Hughes, AIG and Valic. Currently, I am a senior developer at Blinds Dot Com, a Home Depot company. Before iPhone development I was leading projects in Microsoft ASP technology. I was also awarded the Microsoft MVP award five years in a row due to my contributions in the community.

I have also published several of my personal apps to the App Store including Vegetable Tree which was featured by Apple as the most beautiful gardening app on the App Store. I am a frequent speaker at local and national conferences and have authored many articles for many different development magazines.

Report Abuse