Chrome Devtools For Beginners

Diagnose, troubleshoot, and debug websites using DevTools

What you'll learn

use DevTools as all-in-one web development, dignotic and testing tool

Increase your productivity during website development

Identify and fix the various errors occuring during website development

Improve the performance of the website using Chrome DevTools

Requirements

latest, updated version of the Google chrome browser, basic knowledge of JavaScript, HTML, and CSS

Description

Web development requires a vast skill-set.  As web developers, we're responsible for developing, and maintaining error-free, fast loading smooth-functioning websites. When it comes to developing such websites, we use lots of programming languages. But when it comes to testing, diagnosing and troubleshooting our web development projects, we have only a few tools at our disposal. Thankfully, Google offers an all-in-one diagnostic and testing tool-set, called Chrome DevTools, that can help us with all the diagnostic, and testing tasks. This course introduces you to Chrome Devtools from scratch. We start the course slow, so beginners can take it up slowly. The course tells you what is Chrome DevTools, how its interface looks like, what different tools (tool panels) it has. And once we warm up fully, the course goes on to discuss what all tools DevTools offers and how to use them effectively to build smooth-functioning, error-free, fast-loading, responsive websites.Register for the course to learn all about- The user interface of DevTools- DOM (The document object model)- keyboard shortcuts to work with DevTools faster- CSS debugging- understanding breakpoints- JavaScript debugging- Analyzing network calls- Detecting and fixing network issues- Improving page loading speed in the browsersThe course is still being updated, and we hope you like it!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How to open DevTools

Lecture 3 changing DevTools position with respect to the browser window

Lecture 4 Customising tabs' positions and the font size

Lecture 5 customizing the theme for DevTools

Section 2: Overview of different tabs

Lecture 6 The INSPECT mode & the DEVICE mode

Lecture 7 The ELEMENTS tab

Lecture 8 debugging CSS pseudo properties

Lecture 9 debuggins CSS properties - adding a class

Lecture 10 the CONSOLE tab

Lecture 11 the SOURCES tab

Lecture 12 the SECURITY tab

Lecture 13 Productivity hack - 1

Web developers responsible for improving the performance of their web applications and/or websites