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 :).
SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
========== JavaScript for Beginners Playlist ==========
========== CSS for Beginners Playlist ==========
========== HTML for Beginners Playlist ==========
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk
========== Social Links ==========
Twitter – @TheNetNinja – https://twitter.com/thenetninjauk
Original source
17 responses to “JavaScript Tutorial For Beginners #5 – Google Chrome Developer Tools”
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.
So cool thank you Dude 😀
I don't know like – this console doesn't seem all that important. You can always test pages in a text editor and you can do arithmetic on your calculator. Not really seeing the huge utility for it yet but I guess I'll stay tuned.
That sword sound hurting my ears… but thank you for contents.
your intro is too loud and disturbing… but you did a great job
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.
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?
You're videos are great. Thanks for sharing your knowledge with everyone!
Great. Your enthusiasm and simplicity is awesome.
You're a great teacher!
My linked file of test.js is not blue(not a url) and its not showing any option.. what should i do ..?
liked for the content , didn't love the loud intro, wasn't expecting it
i cant create any file or folder help plz??
F12 on a Mac is your volume control
Constructive review: we need more zoom in the code for me its so small i got 14" screen so poor, also love this tutorials
how to create a new file inside this devTool
when i am right-clicking on script…its not showing the "resource" option