JavaScript can be debugged faster

It can make a big difference in getting things done. JavaScript is notoriously difficult to debug. However, it's possible to keep some tricks in your toolbox to make things easier.

Here are 16 tips to help you debug JavaScript code.

Raygun Crash Reporting is a great way to quickly find JavaScript bugs. It will notify you of bugs and provide the stack trace.

These tips are primarily for Chrome and Firefox. However, many of them will work with other inspectors.

Debugger

Debugger is my favourite quick debugging tool after console.log. Chrome will stop execution at the debugger line if you include it in your code. It is possible to wrap it in conditionals so that it only runs when it is needed.

Use tables to display objects

Sometimes you may have multiple objects you wish to view. You have two options: console.log them, scroll through the list or use the console.table.helper. This makes it easier for you to see what's going on!

You can try all sizes

Although it would be great to have every mobile device at your desk, it is not practical in real life. What about resizing the viewport? Chrome has everything you need. Click the toggle device mode button in your inspector. Watch your media queries come to life!

How to quickly find your DOM elements

You can mark a DOM element using the elements panel. Chrome Inspector retains the history of the last five elements so that the last marked element is displayed with $0 and the second to last element $1. The following items can be marked in order: 'item-4,' 'item-3,' 'item-2,' 'item-1,' 'item-10'. You can then access the DOM nodes in the console by marking them as follows:

Benchmark loops with console.time() or console.timeEnd()

Knowing exactly how long it took to execute something can be extremely helpful, especially for debugging slow loops. Multiple timers can be set up by simply assigning a label. Let's take a look at how it works.

Find the stack trace of a function

JavaScript frameworks are known for producing a lot code quickly.

There will be many views, and you'll trigger many events. So eventually you will need to find out what caused that particular function call. JavaScript isn't a structured language so it can be difficult to see what happened and when. Console.trace, or just trace in console, is a great way to debug JavaScript. Imagine that you would like to view the stack trace of the function call "funcZ" in the car instance at Line 33.

We can now see that func1 was called func2, and func4 was called func4. Func4 created an instance Car, which was then called function car.funcX. This can be very useful even if you think you are good at your script. Let's suppose you want to improve the code. You can now get the trace and a great list of all related functions. Each one can be clicked, so you can go back and forth. It's like having a customized menu.

Unminify code is an easy way to troubleshoot JavaScript

Sometimes, production issues can cause problems and the source maps may not make it to the server. Don't worry. Chrome can convert Javascript files into a format that is more easily readable by humans. Although the code will not be as useful as your actual code, at least you can see what is happening. Click the "Pretty Print" button located below the inspector's source viewer.

To debug, quickly find a function

Let's suppose you need to set a breakpoint for a function. There are two ways to do this:

1. Locate the line in your inspector, and add a breakpoint

2. Include a debugger to your script

Both of these options require you to manually navigate through your files in order to find the line you are trying to debug. The console is a more common option. The console can be used to debug(funcName), which will cause the script to stop once it reaches the function that you have passed in.

Although it's fast, the downside is that this doesn't work with anonymous or private functions. It's the fastest way to locate a function to debug. (Note: console.debug is a different function, despite its similar name.

Black box scripts which are not relevant

Many web apps today use a variety of libraries and frameworks. They are generally well-tested and have few bugs. The debugger will still access files that are not relevant to this task. You can blackbox the scripts you don't want to debug. This could include scripts you write. This article explains how to debug black box.

Complex debugging can be complicated. Find the key points

Sometimes, we want to output multiple lines when debugging is more complicated. To maintain a more structured output, you can use more console functions such as console.log, console.debug and console.warn. You can also use console.info and console.error. The inspector can filter them. This is sometimes not what you want when debugging JavaScript. If you want to be creative with your messages, you can do so by using CSS. You can use CSS to create your own messages for the console when debugging JavaScript.

Give Insurance Provide Insurance Daily Insurance Study Helps Insurance Rights Insurance Asking Insurance Discussing Insurance According To Insurance Useful Insurance Thanks Insurance Insurance Terms Reading Insurance Must Insurance Successful Insurance Insurance Sure Insurance Opinion Daily Finance Study Education Career Advisors