Mastering Web and Mobile Debugging Using Chrome Dev Tools
4.5 (12 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,108 students enrolled
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.5 (12 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,108 students enrolled
Created by Mohammad Azam
Last updated 1/2016
English
Current price: $10 Original price: $195 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • Familiarity with basic CSS and Javascript syntax is recommended but not required.
  • A computer with an internet connection
  • Google Chrome browser
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.

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
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
01:49

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
09:32
+
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
05:20

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
09:00
+
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
11:14

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
04:50
+
Google Chrome Developer Tools Console
3 Lectures 24:13
Beginning Chrome Developer Tools Console
09:10

Intermediate Chrome Developer Tools Console
06:49

Advanced Chrome Developer Tools Console
08:14
+
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
06:07

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
04:52
+
Performance
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
05:50

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
05:23

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
04:33
+
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
03:17

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.

Postman
05:01

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.

EditThisCookie
04:28
+
Conclusion
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?
03:19

About the Instructor
Mohammad Azam
4.3 Average rating
210 Reviews
6,901 Students
8 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.