Learn how to use chrome developer tools
4.9 (5 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.
579 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn how to use chrome developer tools to your Wishlist.

Add to Wishlist

Learn how to use chrome developer tools

Practical Hands-On Guide to Using the Chrome Developer Tools
4.9 (5 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.
579 students enrolled
Last updated 8/2017
English
Curiosity Sale
Current price: $10 Original price: $105 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 6 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Access the chrome devtools
  • Use the Element Panel
  • Manipulate DOM elements on the fly
  • Use the Sources Panel
  • Setup Persistence
  • Debug Javascript code
  • Setup basic debugging workflow
  • Explore HTTP request headers
  • Check resource load times
  • Simulate mobile devices
View Curriculum
Requirements
  • Basic understanding of HTML
  • Basic understanding of CSS
  • Basic understanding of JavaScript
Description

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. 

You can  Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. Every web developer should learn how to use the chrome developer tools to help troubleshoot web app issues and  improve the performance of their web apps.
 
All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. 

This course will show you how to explore  the various  tools within the chrome developer tools and equip you with an  expanded toolbox for your day-to-day work. We will explore the most commonly used panels within the chrome devtools , including the Console, Elements panel, and Network panel. You learn the basic workflow to fix JavaScript related bugs.

Topics include:
Setting up your testing and debugging environment
How to access the chrome devtools
Installing Live local server
Debugging JavaScript code
Working with the Elements Panel
Working with the Console
Using and exploring the Network Panel
Emulating mobile devices
Live editing of the DOM elements
Setting up Persistence Workspace
Opening source files in the Sources panel
Editing the BOX-Model

After completing this course you will have the basic skills to explore and use the chrome devtools.

Who is the target audience?
  • Beginner Web Developers
  • Beginner Programmers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
27 Lectures
02:06:40
+
Introduction and Environment Setup
11 Lectures 35:56





Git Installation
06:02

Installing Atom
02:46

Atom live-server
05:40

What is the DOM
05:47

How to access chrome devtools
04:00

Resource Files
01:39
+
Using DevTools Panesl
9 Lectures 59:51
Introduction to chrome devtools groups
02:24

Exploring more devtools options
05:02

Simulating Mobile Devices
06:15

Working with Element Panel
06:56

Setting up Persistence
08:45

How to edit and examine the BOX-Model
05:26

Using the Console
09:42

Using and exploring the Network Panel
10:37

Exploring other devtools panels
04:44
+
How to debug Javascript code inside DevTools
7 Lectures 30:53
Introduction
03:28

Step 1 Reproducing theBug
02:04

Step 2 Pausing the code with a breakpoint
03:40

Step 3 Stepping through the code
04:39

Step 4 Setting up another breakpoint
03:28

Step 5: Checking variable values
06:11

Step 6 Applying the Fix to the code base
07:23
About the Instructor
Bluelime Learning Solutions
4.0 Average rating
1,578 Reviews
35,319 Students
86 Courses
Learning made simple

Bluelime is UK based and creates quality easy to understand eLearning solutions .All our courses are 100% video based. We teach hands –on- examples that teach real life skills .

Bluelime has engaged in various types of projects for fortune 500 companies and understands what is required to prepare students with the relevant skills they need.