Made in Builder

Made in

How to Build: Localization webinar on March 23rd @ 10am PST. Register Now




Use Cases





Log in




Talk to an Expert











Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required



Get StartedLogin

‹ Back to blog

web development

Make the most of your console.log()

March 6, 2023

Written By Sami Jaber

Some people (like my coworker Daniel) keep telling us how easy it is to use the NodeJS debugger. But to those who just can’t stay away from their console logs, I wanted to share some tips that will hopefully improve your everyday usage of them!

Tip #1 - Wrap variables in an object

instead of console.log(url, url2, baz) , use console.log({ url, url2, baz })


If you compare the two, you’ll see how useful this is: having the url and url2 keys avoid any confusion between the two urls

When logging in multiple places across your app, it’s useful to come up with a unique prefix, and use it for all of your logs. This makes it easier to search and filter the logs in the console.

Watch this brief video to highlight just how convenient it is:

Searching for debug-issue: will allow you to move between all of your unique logs, saving you a lot of time if there are other unrelated logs in-between.

console.table()is a much more powerful visual alternative to console.log() when it comes to printing multiple similarly structured objects.

Consider this example:

The table format makes it immediately clear that we misspelled name as names in one row, and forgot an id in another!

console.dir() is great at helping you investigate complex protypes whose toString() output does not reveal everything about them

Consider this Qwik app which logs a function and a DOM element:

And let's look at the outputs:

You can see that console.log provides a stringified version of the function, whereas console.dir provides lots of other properties. What's really cool is that if you click on the [[FunctionLocation]] link, it will show you the source code for that function:

Similarly, you will see that the DOM element output is much more in-depth with console.dir, as you can see every single property of the DOM element:

I'm going to refer to my colleague Yoav, who mentioned in his CSS tips article how you can style your console.log statements. Check it out!

Hope you enjoyed all of these tips. I’ll keep sharing as I learn more about all the useful features Playwright has, although I hope I never hit a flaky integration test again! If any of these tips helped you, reach out and let me know!

Visually build with your components is a headless CMS that lets you drag and drop with your components right within your existing site.

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />

registerComponents([MyHero, MyProducts])


Facebook is a headless CMS that lets you drag and drop with your components.

Learn more

Like our content?

Sign up for our newsletter

Continue Reading
Web Development12 MIN
Signals vs. Observables, what's all the fuss about?
WRITTEN BYMiško Hevery
March 20, 2023
software engineering5 MIN
Using Feature Flags for API Version Upgrades
WRITTEN BYShyam Seshadri
March 20, 2023
performance optimization5 MIN
Inspect Source Code Performance with Deoptigate
WRITTEN BYMiško Hevery
March 14, 2023