Even for professionals, coding isn’t easy. That’s probably why developers spend a large amount of their time hunting down bugs in their code. Sometimes a bug is obvious, causing the entire program to break all at once. Other times a bug is very subtle, producing correct-looking output which nevertheless contains flaws.
As counterintuitive as it may seem, obvious bugs are better because they’re easier to find. A sneaky bug can lurk for years in software used everyday.
Think of it this way: if you were in a building that was slowly filling with poisonous gas, would you want the gas to be odorless, tasteless, and colorless, or bright purple and smelling like gunpowder?
Because debugging is such a crucial step in the development process, there exist many tools for doing so. Today we’re going to discuss debugging Javascript in Chrome. Javascript is far and away one of the most popular overall languages, and probably the most popular language for web development. Similarly, Chrome is one of the most widely-used web browsers.
As someone who will soon be an in-demand web developer, it’s a good idea to be familiar with debugging Javascript with Chrome. I encourage you to follow along with this nifty example web page built specifically to practice debugging.
Using the Source Panel
Chrome comes built with a number of powerful tools which allow developers to inspect the source code of a website, including the HTML, CSS, and Javascript.
This is a fantastic way to read the code of websites you enjoy, and to learn to debug them.
Looking Around
As of 2019 and the most recent version of Chrome, accessing the developer tools is as simple as going to View -> Developer -> Developer Tools in the browser menu at the top of your screen. This opens up the Chrome developer panel with its many useful tabs.
The ‘Elements’ tab lets you inspect the HTML and Javascript making up the web page. The ‘Console’ tab furnishes a place for you to tinker with Javascript. Open up the console for the example page linked in the previous section and type console.log(‘hello’). This Javascript command should be executed in-browser.
The ‘Sources’ tab shows you the actual content of the page’s source files and gives you a way to set breakpoints and inspect the call stack.
Breakpoints and debugger;
Along with print statements, breakpoints are one of the basic techniques developers use for debugging.
Setting a breakpoint in the Chrome console is easy: just click on the line number you’re interested in. A breakpoint is a place where code automatically pauses in its execution. This allows you to inspect everything that’s happened up to this point, including things like the current value of every variable and all the transformations that have taken place.
Breakpoints are a great way to check the progress of your code to see if anything has gone wrong.
We can manually achieve the same effect by placing debugger; into our code wherever we want to begin the debugging process.
By setting multiple breakpoints we can get a close-up view of everything our code is doing, which makes it much easier to spot errors.
Conclusion
While this certainly isn’t everything you need to master the art of debugging, it’s quite a head start. Most of successfully fixing code comes down to very patiently and very clearly thinking through what you wanted your code to do and comparing that to what you actually told your code to do.
With the information above, you’re well on your way to debugging Javascript with Chrome.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
