JavaScript Tutorial For Beginners #5 - Google Chrome Developer Tools

Yo everyone. So in this JavaScript tutorial I want to show you the basics of the Google Chrome developer tools that ship freely with Google Chrome. The developer tools are a wicked tool for debugging not only JavaScript, but also HTML & CSS as well as running other site diagnostics such as site speed & performance. I'm not gonna dig too deeply into all of those right now, but I just want to highlight a few areas of the developer tools that come in handy when learning JavaScript.

Other browsers also have their own version of developer tools, but personally, I like Chrome's :).

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[IkraamDev]

I wish I started coding when this video was uploaded!

[Fuckingcoward]

currently doing TOP. as someone who has already learned c, c++ & python its easy for me to grasp those concepts, so if you are reading this and you are doing TOP javascript fundamentals and you find it hard just give it time and don't rush through the lessons if you understand it well you can easily learn any language in the future.

[JCMLR]

You're videos are great. Thanks for sharing your knowledge with everyone!

[francisdez]

Great. Your enthusiasm and simplicity is awesome.

[jackkamonyo]

it gets easier, it really does.. the trick is to keep doing it everyday!

[arnopisspot]

have you ever noticed how much the sound decibels change when the "slice" sound effect? you should balance that, specially for your headphone users.

[owolabikingsley]

Thanks alot i really appreciate your explanation that is shared and i understand is very well

[Joshca]

Constructive review: we need more zoom in the code for me its so small i got 14" screen so poor, also love this tutorials

[charr-sharr]

That sword sound hurting my ears... but thank you for contents.

[swathinagarajan]

The videos are great. But in this particular video, when I press F12 I am unable to view the elements tab. Thought when I hover over the script which appears when clicked F12, when right clicked on <script....</script> unable to view " Open file in resources panel". Please help.

[halkostas]

liked for the content, didn't love the loud intro, wasn't expecting it

[nocode]

I have a doubt! I have a notepad with javascript ready! I save it as new.js reference it in the <script> </script>. But the file is in my desktop..How does the browser know it and reflect it?

[folahar]

your intro is too loud and disturbing... but you did a great job

[khaikiaklim]

how to create a new file inside this devTool

[seth]

Did a chrome update possibly change this from being called “resources” to “application”. Because I cant find resources in chrom dev tools but I can see that when I  right click the source and go to “Application" it looks identical to the resource screen.

[zunairazeem]

My linked file of test.js is not blue(not a url) and its not showing any option.. what should i do ..?

[drewbug]

I'm studying the JavaScript console today!

Just a quick warning, when I'm on web pages (like Google, YouTube, or Facebook), I don't want to accidentally delete codes on the "Elements" tab. Can you do that, or will the computer not allow you too?

[YaserBasravi]

when i am right-clicking on script...its not showing the "resource" option

[WhoKnows-unkd]

You don't enlarge the font at all. Extremely small.

[aliraafat]

i cant create any file or folder help plz??