Enterprise Application Development

Fast Modeling, Responsive Design, One-Button Deploy

BOOK a Demo

Economic theory-based business modeling

Resources, Events, Agents

BOOK a Demo
OMNIA – Low-Code Business Application Development Platform

6 Javascript Debugging Tips
Posted September 2nd, 2020

6 Javascript Debugging Tips
Posted September 2nd, 2020

Last week we’ve shared a different type of blog post with online tools to work with JSON and how they could improve your OMNIA development experience. Thankfully it was very well received and it got us thinking how can we keep improving your experience with similar pieces of content. And here we are.

 

This week we’re going to share with you 6 tips to better debug your web applications using Javascript (we know… good devs don’t need to debug 🤓)

6 Javascript Debugging Tips

Set Conditional Breakpoints

Using the Firefox Developer Tools JavaScript Debugger you can set conditional breakpoints by right-clicking the line number. The breakpoints will activate and pause the execution only if the condition is met. Debugging intermittent bugs and pausing execution on specific values and ranges becomes way easier.

Search by Function Name or Line Number

Also on Firefox Developer Tools JavaScript Debugger, you can search for a file name by using CTRL + P Windows and Linux (CMD on mac). If you want to search for a function inside that file or go to a line number directly, start your search with :and you’ll will go to a specific line.

Responsive Design Mode

Responsive Design Mode (CTRL + SHIFT + M) is the best and quickest way to test on mobile, or any other device. You can change the user agent, or even add custom ones according to your needs. Simulate some touch-screen events to better understand your app’s UX.

OMNIA's Modeler on an iPad

debugger()

If you place a debugger; line in your code, Chrome will automatically stop there when executing. You can even wrap it in conditionals, so it only runs when you need it.

Display objects as a table

Let’s say you have a complex set of objects you want to view. You can console.log them and scroll through the list, or break out the console.table helper.

Benchmark loops using
console.time() and console.timeEnd()

It can be super useful to know exactly how long something has taken to execute, especially when debugging slow loops. You can even set up multiple timers by assigning a label to the method. Let’s see how it works:

We hope you’ve enjoyed this post and will start taking advantage of these debugging tips.

 

If you’re not an OMNIA developer and would like to try our technology let us know and we’ll setup a free demo environment for you.

✉ Signup for our Newsletter to get our weekly news