Small Web Development Tricks That Make Your Daily Coding Life Easier

Over time, I’ve noticed something interesting about web development.

It’s not always the big frameworks or advanced architecture that improves productivity. Most of the real improvements come from small, almost “hidden” tricks that make everyday coding faster and less frustrating.

Here are a few I wish I had learned earlier.

1. Use console.table() instead of console.log() for arrays

When debugging arrays of objects, console.log() becomes messy very quickly.

Instead, use:

console.table(data);

It formats the output into a readable table, which makes it much easier to scan and debug.

2. Quick DOM selection shortcut

In the browser console, you can use:

$0

to reference the currently selected element in DevTools.

And:

$$('div')

to select all elements matching a selector (like document.querySelectorAll but shorter).

3. Use copy() in DevTools

You can copy data directly from the console:

copy(JSON.stringify(data, null, 2));

This is extremely useful when dealing with API responses or debugging payloads.

4. Optional chaining saves a lot of debugging time

Instead of writing long checks like:

if (user && user.profile && user.profile.name)

You can simply write:

user?.profile?.name

It makes code cleaner and reduces unnecessary errors.

5. Named console logs for better debugging

Instead of:

console.log(data);

Do:

console.log('API Response:', data);

When your app grows, unclear logs become a serious problem. Naming logs properly saves time later.

Final thoughts

These are small things, but they add up over time. In development, speed is often not about typing faster, but about reducing friction in everyday tasks.

If you have similar small tricks, I’d love to hear them.