Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Browser Developer Tools - Using for everything
Rating: 4.3 out of 5(11 ratings)
65 students

Browser Developer Tools - Using for everything

Increase your productivity significantly by learning to use the most powerful tool a web developer has available in 2026
Created byDerick Florencio
Last updated 5/2024
English

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

Course content

3 sections • 19 lectures • 1h 22m total length

  • We’re always learning1:36
  • How to open the inspector (chrome, firefox, safari)1:33
  • The Elements tab overview3:39

    Explore the elements tab to inspect and highlight page elements, view live CSS changes, and use the device toolbar to simulate sizes and review layout details.

  • The Console tab overview3:08

    Explore the console tab in browser dev tools to run JavaScript, create variables, and clear the console; filter log levels and use live expressions to monitor real-time properties.

  • The Sources tab overview1:10

    Explore the sources tab to view all files, including JavaScript, CSS, images, and SVGs; set breakpoints, inspect call stacks and variables, and tweak CSS and resources used by the page.

  • The Network tab overview2:31

    Open the network tab to monitor requests and reload the page to capture activity. Filter by type, inspect url, method, status, headers, and json response, use throttling and cache controls.

  • The Application tab overview1:33

    Explore the application tab to compare local storage and session storage, create and inspect storage items, see persistence across reloads and tabs, and use getItem and console outputs.

  • Performance, Memory, Lighthouse, and more1:08

    Use performance, memory, and lighthouse in the browser dev tools to record interactions, profile timings, and observe animations and GPU usage. Generate reports on performance, accessibility, SEO, and page quality.

  • Tabs overview

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 tools

    • Elements

    • Console

    • Sources

    • Network

    • Application

    • Performance, Memory, Lighthouse & and more tools


  • How you can use the browser developer tools

    • To customise any app/website for your own benefit

    • To 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 machine

    • To learn new HTML/CSS techniques and implementations.

    • To increase implementation success of your app/website suggestions or improvements

    • To 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.

Who this course is for:

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

Report abuse