This famous phrase is familiar to all developers, and, even more so, to a quality assurance testing company: “Don't code today what you can't debug tomorrow.” Thankfully, there are tools that let you debug plenty of things easily. It’s time to code, and it’s time to debug! So, after discussing the benefits of combining JavaScript “family” representatives — Angular and Node.js — with Drupal, we would like to turn your attention to a useful tool ready to help you with JavaScript debugging. In fact, it’s more than a tool — it’s a set of tools, called the Chrome DevTools.
DevTools for JavaScript debugging: where to start
Chrome DevTools is one of the most advanced assistants that lets you discover, analyze and fix bugs. It can be easily reached in the following ways.
- Click on “More Tools” in the top-right corner menu and select “Developer Tools.”
- Use the F12 key on your keyboard.
- Use Ctrl + Shift + I or Cmd + Opt + I on Mac.
- Right-click the desired element on your page and click “Inspect element.”
You are all set! Let’s now see at least some of the opportunities it offers.
Setting breakpoints in DevTools
An extremely useful feature in JavaScript debugging is setting breakpoints. This lets you stop your code execution at a certain point and examine everything you need.
One of the ways to set a breakpoint is to find the desired file in the “Sources” tab, select the desired line of code in the section containing code, and left-click this line number. It should then change its color.
You may not need breakpoints to work all the time, so you can choose to set:
- Conditional breakpoints that depend on some condition: right-click the line number and select “Edit breakpoint.”
- Event breakpoints that only work when some event happens: you can select these events in Sources — Event Listener Breakpoints.
Step over, step into, step out: sure steps through your code
When working with breakpoints for JavaScript debugging, you will often use a handy panel with intuitively understandable icons, similar to those in other tools. They will let you pause/resume the debugging, take steps through the code, deactivate breakpoints, and pause on exceptions:
- The button resembling a classic pause-and-play button will pause and resume the script execution.
- The button with a bent arrow lets you step over the next function call.
- The button with a downward arrow leads you into the next function call.
- The button with an upward arrow takes you out of the current function.
Restoring the minified code
Website or application performance improves from JavaScript code minification, while debugging becomes more troublesome. But there is a solution. If you have to deal with the minified code, use the DevTools “Pretty Print” feature that will de-minify the code back. Select your file and click on the icon with curly brackets — { }.
These are just a couple of hints for you to get inspired. JavaScript debugging opportunities with DevTools are endless. We hope you have fruitful debugging, but never find too many bugs ;) If you need help with debugging, or if you are interested in getting a cool application or website, web developers!