A Beginner's Guide to Chrome Developer Tools | Elements | Console | Network | Performance

The DevTools is an essential tool for any web developer. In this video we check out together the Chrome Dev Tools and some of the things it can do that as a web developer you will use the most. Manipulating DOM elements on the fly, prototyping CSS styles, debugging JavaScript and checking a website's performance are some of things you can do with this amazing tool!

Oh, you want to buy me a coffee? How sweet! ❤️ ☕
Ko-fi supporters get access to exclusive content and are the first to know what's coming! ❤️
https://ko-fi.com/bellacapilla
https://www.buymeacoffee.com/bellacap...

What is the DOM? -    • What is the DOM?  
Chrome Dev Tools Documentation - https://developer.chrome.com/docs/dev...

Timestamps:
00:00 - Intro
01:10 - Open / Shortcuts
01:45 - Select element on hover
03:15 - Responsive - devices / orientation check
05:00 - DOM manipulation / CSS prototyping
16:00 - The Console
19:20 - Sources Panel - JavaScript debug (Breakpoints)
20:55 - Lighthouse Panel - Performance check
22:45 - The Network Tab - XML Http Requests

Leave your comment and suggestions for next videos!

SUBSCRIBE - Help to spread the love! ❤️️
   / @bellacapilla​  

NOW ON RUMBLE 😎
https://rumble.com/c/c-2389300

FOLLOW ME
  / bella_capilla  
  / ​  
  / bellacapilla​  

CHECK IT OUT
https://bella-capilla.com/