Browser Developer Tools - Using For Everything

Increase your productivity significantly by learning to use the most powerful tool a web developer has available in 2024

What you'll learn

How to improve the web development workflow when working on UI by using the browser developer tools first, then applying to code

How to use the browser developer tools on Android/iOS apps and be able to apply changes in realtime

How to manipulate any web application behaviour through the elements, console, and application tabs

How the browser developer tools can be used for studying, taking your html/css skills into another level.

The power of javascript and the console tab, not limiting yourself into only using it when developing applications

Many other real-world examples of how the browser developer tools can be used for productivity, debugging, and learning purposes

Requirements

The basics of HTML

The basics of CSS

The basics of JavaScript

Description

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. By the end of this course, you will gain a new perspective on the Browser Developer Tools, and develop a comprehensive understanding of practical application in day-to-day development and its usage on web applications.What exactly are you going to learn then?The overview of the most used tabs of the browser developer toolsElementsConsoleSourcesNetworkApplicationPerformance, Memory, Lighthouse & and more toolsHow you can use the browser developer toolsTo customise any app/website for your own benefitTo avoid repeating yourself while developing with hot-reload mode activated.To save time while developing hybrid apps.To still be able to contribute with your team or product even when not on your development machineTo learn new HTML/CSS techniques and implementations.To increase implementation success of your app/website suggestions or improvementsTo gain control over any app/website behaviour through storage manipulation.To be aware and learn from the network activity of any app/website desired.To discover new technologies used by any app/website out there.

Overview

Section 1: Tabs Overview

Lecture 1 We’re always learning

Lecture 2 How to open the inspector (chrome, firefox, safari)

Lecture 3 The Elements tab overview

Lecture 4 The Console tab overview

Lecture 5 The Sources tab overview

Lecture 6 The Network tab overview

Lecture 7 The Application tab overview

Lecture 8 Performance, Memory, Lighthouse, and more

Section 2: Use cases

Lecture 9 Using it to customise external app/website for your own benefit

Lecture 10 Using it when developing an app/website with hot-reload

Lecture 11 Project setup and opening the Developer Tools (Web/Android/iOS)

Lecture 12 Using it for realtime change on Android/iOS apps

Lecture 13 Using it when you are not on your computer

Lecture 14 Using it to improve your html/css skills

Lecture 15 Using it to suggest changes

Lecture 16 Using it to manipulate app/website behaviour

Lecture 17 Using it to study external app/website network requests

Lecture 18 Using it to discover external app/website technologies

Section 3: Wrap-up

Lecture 19 Thanks for being part of the course

You are a web developer,You are a UI/UX designer,You are a quality assurance tester,You work with any of these three