JavaScript Console Methods (Code Snippets)

JavaScript Console Methods (Code Snippets)

Working on frontend projects can be 100% fun to figure out what is going wrong. That is why browsers now allow you to do all sorts of debug messages from your JavaScript code.

Today I will be going through these and showing what they can look like in a browser console. This blog post will use Chrome as its tool for the screenshots.

And just to try and be fun, these examples all involve a car in some way.

log()

log() is great for general debugging purposes.

console.log("Hey! What's up?");

info()

info() will work exactly the same as a log message but can be filtered in the browser as its own type.

console.info("The left wheel is turning");

warn()

warn() is a great log method to make your message stand out in the console with yellow text and background.

console.warn("The left wheel is not turning");

error()

error() is when you really want to show that something in the app is really not supposed to be doing that action. It will show in the console with red text and background.

console.error("The car has stopped");

table()

table() is fantastic when you want to show a table of an object or JSON blob while debugging.

const carPartVendors = {
  tires: "Michelin",
  engine: "Ford Motor Company",
};

console.table(carPartVendors);

time() & timeEnd()

These two functions act as a great tool for when you need to establish how long a function or piece of code is taking to run. Just log a time() at the beginning of that code and timeEnd() at the respective end. It will log out a nice elapsed time that passed.

๐Ÿ’ก
Make sure you use an identifier string when calling both so it knows the name of the time to log against, in our example below we used "ENGINE START TIME" in a piece of code that logs how long it took for the engine to start.
console.time("ENGINE START TIME");
for (let i = 0; i < 10000; i++) {}
console.timeEnd("ENGINE START TIME");

clear()

clear() says what it does on the tin, this will clear the current console.

console.log("The Engine has stopped running");
console.clear();
console.log("The Engine has started again");

group() and groupEnd()

group() is a handy function for when you want to group a variety of log messages that occur during the same process and then display in a dropdown in the console.

Start off by making a group using console.group() and providing it a string for the group name, then once you have logged all the info you want to collate use console.groupEnd() to end the group collection and output to the console window.

console.group("Engine Stats");
console.log("Manufacturer: Ferrari");
console.log("Fuel Type: Petrol");
console.log("Valves No: 32");
console.groupEnd();

console.group("Tyre Stats");
console.log("Manufacturer: Michelin");
console.log("Width (mm): 224");
console.log("Radial Construction: R");
console.groupEnd();

assert()

assert() is a great way to test out if the result of an action in JavaScript is producing the outcome you expected.

const addPassenger = (originalAmount, additionalAmount) =>{
	return originalAmount + additionalAmount
}
console.assert(addPassenger(1, 3) === 3, "Passengers count is not 3");

count()

count() is a fantastic little console function that will count the number of times it has been called, if you also provide it a label it will add the count to that label only.

const exec = (carPart) => console.count(carPart);

exec();
exec(); // count should be 2 in console as exec has been called twice

Custom Colours

This one is my favourite, I remember when I made my first logging js library to capture all my logs in an application and when in a dev mode send them to the console otherwise store them in a database for later debugging issues.

The best part was making custom logs with emojis and colours in them to really brighten up the console window. Most people will never see this extra bit of work but when I see it in codebases I always get a smile on my face.

console.log("Car Running"); // No Colour
console.log("%cEngine 1 Status %cOffline", "color: white", "color: red");
console.log("%cEngine 2 Status %cOnline", "color: white", "color: green");

Subscribe to Making sense of the world around me, one blog post at a time

Donโ€™t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe