Diving into Dev Tools

#javascript #beginners #programming

So if you have made it this far in your coding career to have stumbled upon the concepts of Dev Tools you have probably been debugging your code like a caveman using the primitive console.log() method... If that is the case then today I come to you bearing gifts, the gifts of Developer Tools!!!!

There are many different task you can perform with the wide array of DevTools Available to you for the purpose of todays post we will discuss them in relation to debugging your code.

The first section of the Dev Tools toolbox we want to get familiar with is going to be the sources panel. To get there we want to right click on the page in google chrome and click inspect page... alternatively you can press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Once the Dev Tools panel appears you can click on the sources tab, and wal lah...

The sources panel is comprised of 3 parts. The first is called the File Navigator pane which list every file that the page request. The second being the Code Editor which displays the contents of the files we selected with our File Navigator. The third part being the JavaScript Debugging pan which is comprised of multiple tools used inspecting the pages javascipt.

As apposed to console.log()ing every time we want to see whats going on with our code through the help of Dev Tools we can now add breakpoints at specific parts of our code and accomplish the same task only far quicker.

With DevTools we can use EventListnerBreakpoints to pinpoint specific events in our code which can help us debug quicker and with more accuracy when utilized correctly. This is simply one of the many breakpoint types available in your ToolBox.

Another useful trick in our ToolBox is ablility to step through and even over certain blocks of code and function calls. This gives you the power to use a breakpoint and stop the code even closer to your actual error or bug.