Chrome DevTools – Crash Course

Wordpress sites

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Learn how to use them to improve your productivity as a web developer. You will learn how to do things like troubleshoot and live-edit web pages.

✏️ This course was developed by Nabheet Madan. Check out his channel:

In this course, you will learn about the following dev tools:
– Elements
– Source
– Console
– Network
– Performance
– Application
– Security
– Memory
– Lighthouse

πŸŽ‰ Thanks to our Champion supporters:
πŸ‘Ύ Otis Morgan
πŸ‘Ύ DeezMaster
πŸ‘Ύ Katia Moran

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

28 thoughts on “Chrome DevTools – Crash Course”

  1. I just wanted to learn about these tools now and you uploaded thisπŸ”₯πŸ”₯πŸ‘πŸ‘

    1. Panfilo Alvaraco Uribe Mequetrefe

      Please activate subtitles for video. I don’t speak english and subtitles can help me to understand, even more, when the Teacher is not native speaker…

  2. The Local Storage and Session Storage explanation (around 5:20 timeline) is wrong. It may not seem a big deal for some people, but it will feed a wrong information to those who have never heard the words before. I know it happened in error, but please make correction on it.
    Other than that, this is a good topic and hopefully we will gain very useful knowledge from this video. Thank you for making it available free!!!
    This comment was written on 05/06/2021. By the time you are reading it, you may find the issue has already been fixed.

    1. Nabheet Madan

      Thanks for the feedback. I mixed up so mistake on my side but while explaining in details the different types of storage on memory tab it is correct.

  3. Mostafizur Rahman

    Can you please make a tutorial video on json, wp ajex and wp rest api?

    That would be much helpful.

  4. This channel is a gold no diamond mine for developers .
    Hats off to everyone

  5. – Elements 10:53
    – Source 19:45
    – Console 41:19
    – Network 53:50
    – Performance 1:03:40
    – Application 58:45
    – Security 1:09:17
    – Memory 1:10:34
    – Lighthouse 1:03:40

    1. Thank you for summarizing and saving us TONS of time versus watching content that does not get to the point quickly.

  6. Wandile Mawelela

    fCC always has a way of bringing great content at the right time. Thank you!

  7. Neel's Tech Show

    Hey! I wanted to tell you that you were a big inspiration in starting my programming channel! Thanks!

  8. Paddy Mc Glone

    Thank you for this course, I really enjoyed it and learnt a few new things πŸ™‚

  9. Thank a lot free code camp. You’re really life saver for the developers.

    I have learned countless amazing things here.

  10. Hrishi Bhagat

    I think when we store data in local storage it exists until we explicitly delete that data (so local storage data still exists when we close browser or machine )

  11. 藍偉任

    Thanks for your sharing.
    The performance profiling /network record & lighthouse parts are very useful

  12. Thanks for the vid! I have a question that’s kind of hard to explain – but I’ll try. I use a laptop for my code, and then an ultrawide monitor for previewing my code. When previewing, I tend to make my window take up about 2 thirds of my monitor. I’ll open the developer console and set the width to what I’m working with (1440px, for example). What I’ve realized is that this looks totally different than if I did this on my laptop, instead of a monitor! For example, when previewing this window at 1440px wide and zoomed in at 100%, I get a height of 845px. When doing the exact same thing on my laptop I get a height of 491px. I’ve been designing code on my monitor that looks horrendous on most people’s laptops, and I’ve only just realized! Does anyone know a way of working where this won’t happen? I can switch to using my laptop as the preview screen, but it’s a small display – so id prefer not to.

  13. Dr. Philip Yap PT

    Thank you very much for the detailed walkthrough!! But I do hope that you could use a better mic in the future, it will be great. Thanks

  14. Sindura Vishnu

    Thank you sharing it was so helpful I basically work on same assertion and wanted to know how can I capture from the web application

  15. The console and network parts are really awesome and well explained. These free resources are the entry points of every professional programmers out there, so thank you for letting a lot of people learn, without the necessity to moving from home or spending any money.

Comments are closed.