Categories

(83)
(69)
(8)
(34)
(74)
(149)

A glimpse at using DevTools for JavaScript debugging

23.06.2017
A glimpse at using DevTools for JavaScript debugging
Author:

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!

6 votes, Rating: 4.3

Read also

1

In today’s article, we will mention cyber threats which are currently very widespread. We will also suggest tips to you to help you be prepared for those threats and avoid cyberattacks.

2

Now DevOps is in the mainstream, occupying headlines and attracting all the attention. But a lot of people still don’t know what this buzz word mean. Is it a movement or a new job title? A new...

3

The opportunities to get data from websites in a convenient way, and in the desired format, is an interesting topic that deserves a series of articles. Last time, we discussed exporting data as...

4

Every business is interested in affecting, convincing, encouraging, engaging and converting more customers. Previously, we have offered you 5 steps to better communication with customers, because...

5

CSV is a popular format widely used for importing and exporting data. Let’s discover more about it and see how it’s done with a special API that we created for our customers.

Subscribe to our blog updates