Debugging in lightning using Javascript Console API.

Updated: Jan 17

Putting debug statement in code is an essential part of finding bugs and making sure that code is working as expected. Anyone who worked in Aura Component has used the console.log() method to log on the console screen but very few salesforce developer knows that console API provides wide range of methods which can also be used in debugging efficiently.


This blog will discuss each method with some example.


1. assert() - assert needs no introduction. It accepts two arguments and if the first argument is false, it will display the message you put as the second argument.

Ex -

let flag = false;

console.assert(flag, "Something is wrong");


in this example, "Something is wrong" will be displayed on the console screen.


2. clear() - Clears the console screen.

Ex -

console.clear();


3. error() - Logs error on the screen. It shows the message in the form of error.

Ex -

console.error("Something wrong has happened");


4. info() - It outputs an informational message to the console Ex -

console.info("Step 1 is missed");





5. warn() - just like the info method, it shows a warning message on console.

Ex -

console.warn("Warning message");


6. table() - It shows data in the console in a tabular format. It is useful when data in arrays or objects.

Ex -

let arr = [["Name", "Saurabh"], ["Designation", "SFDC Developer"], ["City", "Noida"]]; console.table(arr);



7. log() - display message in console. One of the straightforward method in console API.

Ex -

console.log("inside init function");


8. time() and timeEnd() - These two methods are used to calculate elapsed time between these two functions. time() method starts a timer and timeEnd() stops the timer.

Ex -

console.time(); for (i = 0; i < 100000; i++) { // some code } console.timeEnd();


timeEnd() function end the timer as well as logs the time on console.


9. trace() - Shows the stack trace and display how the code ended up here.

Ex -

function tempFu(){ console.trace(); console.log("inside tempFun"); console.log('Processing'); } tempFu();



10. group() and groupEnd() - These two methods help in displaying messages in group. The current group ends when groupEnd() is called.

Ex -

console.log("message without group"); console.group("Section1"); console.log("This message is in group Section1"); console.log("This message is also in group Section1"); console.groupEnd(); console.log("Now again this message is without group");




11. groupCollapsed() - Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called.

It creates a group in console but that group is collapsed by default. so you need to open it to see the messages inside it.

Ex -

console.log("Hello world!"); console.groupCollapsed(); console.log("Hello again, this time inside a collapsed group!");




©2019 by SFDC Blogs.