💡 Key Takeaways
🕵️♀️ Object Inspection: console.dir() and Object.keys() reveal structure and content.
⏱️ Timing Code: console.time() and console.timeEnd() measure performance easily.
⚠️ Pro Tip: Add debugger; anywhere to pause JS execution in DevTools.
🧩 Logging Basics
- Use
console.log()to print variables - Add labels for clarity (
console.log('x:', x)) - Inspect objects visually with
console.dir()
console.log('user:', user);
console.log(typeof myVar);
console.dir(obj);
🐞 Pausing and Tracing
debugger;pauses JS execution at that point- Opens DevTools automatically for inspection
- Use
console.trace()to see the call stack
debugger;
console.trace();
🧠 Checking Values
- Compare directly for
undefined - Use
??for nullish fallback values - Detect falsy values with simple checks
console.log(myVar === undefined);
console.log(myVar ?? 'fallback');
if (!myVar) console.log('Falsy!');
🗝️ Inspecting Objects
- Get all keys with
Object.keys(obj) - Get all values with
Object.values(obj) - Combine or inspect deeply with
console.dir()
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.dir(obj);
⏱️ Timing and Grouping
- Measure performance with
console.time() - Stop timer with
console.timeEnd() - Group related logs for readability
console.time('label');
// code here
console.timeEnd('label');
console.group('info');
// related logs...
console.groupEnd();
⚠️ Error Handling
- Wrap risky code in
try...catch - Use
console.error()for red error logs - Log stack trace with
console.error(e.stack)
try {
riskyFunction();
} catch (e) {
console.error('Error:', e.message);
}
🌐 DOM and Events
- Log DOM elements with
querySelector() - Inspect event targets on user actions
- Use
console.dir()to expand element props
const el = document.querySelector('#id');
console.log(el);
el.addEventListener('click', e => console.log(e.target));
🧮 Arrays and Values
- Check if array includes a value
- Log arrays to inspect contents
- Count elements easily with
.length
console.log(arr.includes(value));
console.log(arr.length);
console.log(arr);