Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Ink and yarn
  • Contact
A cup of dev

How to become aconsole.log() ninja

By Eli H. Schei on Wednesday, 8 September 2021, 19:00Wednesday, 22 September 2021, 12:14

If you are a web developer I’m guessing you have used console.log() a couple of (thousand) times. But did you know that the console object has some other usefull methods you can use to structure the output you get?

What is the console object?

First, a very with a short introduction to the console object before we dive in to its methods.

So what is the console object? The MDN Web docs sais “The console object provides access to the browser’s debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.”

In other words, it is a object that is available to use for debugging purposes.

Lets take a look at some of the methods it provides.

console.table()

You have two objects that contains the same structure of information about two pets. You add both pets to an array.

let myPet = {name: "Poppy", animal: "cat", age: "2", favoriteToy: "ball"};
let myOtherPet = {name: "Harry", animal: "pig", age: "3", favoriteToy: "food"};

let pets = [myPet, myOtherPet];

If you want to print the array to the console you can use console.log(), that will look like this:

If you would like a better overview of what the array contains you can use console.table() instead.

console.table(pets);

That will give you a nice table presentation of the array content, like this:

console.group()

You can use console.group() to create collapsible groups of outputs. For instance you can use it to group output from functions.

const function1 = () => {
    console.group("Function 1 output");
    console.log("this is a message from function1");
    console.groupEnd();
};

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
    console.groupEnd();
};

function1();
function2();

When the functions are called you will get the messages presented like this:

Nested groups

You can also nest groups inside eachother

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
       console.group("This group is nested inside of the 'Other function output' group");
       console.log("Hello from inside this group");
       console.groupEnd();
    console.groupEnd();
};

collapsed groups

If you want the groups to collapsed as default you can use console.groupCollapsed("name of group") instead of console.group("name of group")

console.dir()

When you want to output information about an object in a structured manner you can also use console.dir(object);

console.assert()

If you want some condition to decide if your ouput is displayed in the console, console.assert() is the function for you. This function takes two parameters, a boolean and a string. The message (string) will only be displayed in the console if the boolean value is false.

const function1 = (condition) => {
     console.assert(condition, "This message will be displayed as a warning if the condition equals false");
};

function1(false);

Adding color to your console output

The console object have two built in functions that will add color to the displad text. These are console.warn() and console.error(). And as you might have guessed they will be displayed as a warning and an error.

Add your own styling

If you add %c before your string, and pass a string of styling as a second parameter you can style your output.

Other usefull console methods

Create and use a timer

You can use console.time() to start a timer, and console.timeEnd() to end it.

Where is your function being called?

Use console.trace() to see where the function was called from

Resources

  • console (MDN)

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. šŸ™‚

Thank you for reading, and happy coding!

/Eli

Share this:

  • Twitter
  • Facebook

Post navigation

My top 5 favorite newsletters to keep up with frontend development news
5 reasons I started a ‘developer blog’ and why you should concider starting one too.

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Create an azure function for authentication with Microsoft Authentication Library (MSAL), using node and TypeScript
  • How to solve CORS issues when running an Azure function locally
  • An introduction to version control using git and GitHub
  • 5 tips for nailing your first Microsoft certification exam
  • My top 5 most read blogposts in 2022

Categories

  • Azure
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development PCF PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams tools wcag Windows terminal
©2023 A cup of dev | WordPress Theme by SuperbThemes.com