#CodeUtilize Explored: console.dir | Engineering Thought

// console.dir preview

Have you ever tried to look inside a complex object in your code, only to find a messy pile of data that's hard to read? Most of us start with the classic console.log, but as our projects grow, we need better tools to "see" what's going on.

In this guide, we'll explore how to become a "data detective" using different inspection techniques in JavaScript and TypeScript. Whether you're a seasoned pro or just starting out, these tips will save you hours of debugging time!

###🔍 The Basic Approach: console.log

The quickest way to peek at data is console.log. It's like taking a quick snapshot of a room—great for a general idea, but you might miss the details hidden in the corners.

playground.js

// A complex object representing a bank account
const personAccount = {
  name: "Aldo",
  age: 20,
  cash: { account: { bank: { a: { a1: 1000000, a2: 2000000 } } } },
};

console.log(personAccount);

// Result:
// { name: 'Aldo', age: 20, cash: { account: { bank: [Object] } } }

The Catch: Notice the [Object] part? console.log often "hides" deeper information to keep the output short. For simple data, it's perfect. For complex "nested" data, we need more power.

###🔬 The Deep Dive: util.inspect

If console.log is a snapshot, util.inspect is a high-powered microscope. It allows you to tell the computer: "Show me everything, no matter how deep it's hidden!"

playground.js

const inspect = require("util").inspect;

const personAccount = {
  name: "Aldo",
  age: 20,
  cash: { account: { bank: { a: { a1: 1000000, a2: 2000000 } } } },
};

// Depth: Infinity tells it to never stop looking deeper!
console.log(inspect(personAccount, { depth: Infinity, colors: true }));

This ensures you see every single "room" in your data structure, beautifully colored for readability.

###🌳 The Interactive Way: console.dir

My personal favorite is console.dir. It creates an interactive, expandable tree. It's like having a digital map where you can click to open folders and see exactly what's inside.

playground.js

const personAccount = {
  name: "Aldo",
  age: 20,
  cash: { account: { bank: { a: { a1: 1000000, a2: 2000000 } } } },
};

// Makes the object interactive and fully visible
console.dir(personAccount, { depth: Infinity, colors: true });

In your browser's developer tools, this becomes a clickable list that makes exploring large datasets feel like second nature.

###🆚 Which one should you use?

Method	Best For...	"Vibe"
console.log	Quick checks & simple variables	📸 The Snapshot
util.inspect	Server-side (Node.js) deep debugging	🔬 The Microscope
console.dir	Interactive browser-based exploration	🗺️ The Map

###💡 Final Thought

Debugging doesn't have to be a headache. By choosing the right "lens" to look at your data, you can spot bugs faster and understand your system more deeply.

If you found this helpful, check out my GitHub for more technical guides and creative experiments. Happy debugging!