How to use your browser's Developer Tools - The Element Inspector

Welcome to a special tutorial from EasyProgramming.net. Today, I want to lay some groundwork for a future tutorial series in JavaScript. One thing that you will most definitely need to know is how to use the developer tools in your browser, more specifically, the element inspector, and the JavaScript console. Today, I'll cover three parts of the element inspector and go a little over the JavaScript console, more on the console will come later!

So what is the element inspector? The element (or page) inspector is part of a browser which allows you to see the view and even modify the DOM, or the document object model. This means you can use it to create, edit, and delete DOM elements on the page in HTML. you can also create, modify, and delete CSS. And with the JavaScript console, you can run JavaScript commands to do your bidding.

All major browsers have the element inspector and I'll be using the one on Chrome. You can do this in Firefox, Opera, or whatever browser you prefer. The inspector will look similar. You can also use plugins like firebug. The inspector allows you to troubleshoot items on web pages every easily with help from the sources or network tab, or by debugging a script. something I'll briefly go over today and cover more in depth in another tutorial.

I hope you learn something new today and if you have any questions, please ask in the comments below and please subscribe for future tutorials.

Remember to visit my site EasyProgramming.net to view my other programming tutorials! If you have any suggestions for future videos, feel free to comment and let me know.

#DevTools #Chrome

-----------

Subscribe on YouTube: youtube.com/c/nazmusnasir
Support me on Patreon: patreon.com/nazmus
Follow me on Twitter: twitter.com/Nazteroid
Like me on Facebook: facebook.com/EasyProgrammingNet
Follow me on Google+: plus.google.com/+NazmusNasir
Check out my Github: github.com/naztronaut