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,048 students enrolled
84% off
Take This Course
  • Lectures 21
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

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.

What are the requirements?

  • Familiarity with basic CSS and Javascript syntax is recommended but not required.
  • A computer with an internet connection
  • Google Chrome browser

What am I going to get from this course?

  • Debug web and mobile applications
  • Turbo charge your web development
  • Locate bottlenecks in your application
  • Master the Chrome Developer Tools Console commands

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Welcome to Mastering Google Chrome Developer Tools
Section 2: Getting Started

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.


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.

Section 3: Inspecting CSS Using Google Chrome Developer Tools

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.


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.


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.

Section 4: Debugging Javascript Using Chrome Developer Tools

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.


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.

Section 5: Google Chrome Developer Tools Console
Beginning Chrome Developer Tools Console
Intermediate Chrome Developer Tools Console
Advanced Chrome Developer Tools Console
Section 6: Chrome Developer Tools Mobile Features

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.


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.

Section 7: Performance

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.


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.


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.

Section 8: Chrome Extensions

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.


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.

Section 9: Conclusion

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!

Bonus Lecture: Developing Mobile Apps Using Swift Language

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mohammad Azam, 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.

Ready to start learning?
Take This Course