DEV Community: Pooja Garva

Preserve Console Logs in Browser using DevTools 🧠

Pooja Garva — Wed, 05 Nov 2025 10:26:37 +0000

Ever lost your console.log() messages after a page reload or redirect?
That’s because Chrome clears the console on every navigation by default.

Here’s how to preserve logs - super handy when debugging redirects in React, Next.js, or any front-end app 👇

useEffect(() => {
  console.log("User data before redirect:", userData);

  if (!userData) router.push("/login");
}, [userData]);

Normally, after router.push("/login"), the new page loads and your log disappears.
But we can fix that!

*How to Preserve Logs ✅ *

Open DevTools → Console tab
Check ✅ “Preserve log” (top-right of the console)
Reload your page - your logs will now stay visible even after navigation 🚀

When It Helps 💡

Debugging redirects or auth flows
Tracking OAuth callbacks
Seeing state before reload

That’s it! Now your logs survive page reloads - simple but powerful. 🔥

Chrome’s new “Split Tabs” -Finally, True multitasking in your browser 💻

Pooja Garva — Wed, 05 Nov 2025 10:06:56 +0000

Google Chrome is testing a brand-new Split Tabs feature - and it’s a total productivity boost! ⚡

Instead of juggling multiple windows, you can now view two tabs side-by-side in the same window.

Perfect for:
🧑‍💻 Developers comparing docs and code
✍️ Writers referencing research
📊 Anyone who loves multitasking on ultrawide screens

🔧 How to try it:

Open chrome://flags
Search for Split Tabs or Side-by-Side
Enable it and restart Chrome
Right-click a tab → “Split tab with…”

💡 It’s still experimental, but it already feels like a game-changer for focused workflows.

Split Tabs might just be the productivity boost we needed to cut the window chaos. 💫

visibilitychange: Ever wondered how your browser knows when you leave a tab?

Pooja Garva — Tue, 04 Nov 2025 17:21:33 +0000

Have you ever noticed how when you switch to another tab, the video or animation you were watching suddenly pauses, and when you come back - it resumes automatically? Or how some pages seem to pause their activity the moment you move away, and pick up right where they left off when you return?

That’s all because of the Page Visibility API - specifically, the visibilitychange event. This simple event lets a web page know when it’s visible to the user or hidden in the background, so it can act smarter - like saving battery, pausing timers, or deferring background tasks until you return.

Here’s the simplest possible example that shows exactly how it works 👇

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tab Visibility Demo</title>
  </head>
  <body>
    <h1>Switch tabs to see the magic ✨</h1>

    <script>
      document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
          console.log('👋 You left the tab! The page is now hidden.');
        } else {
          console.log('👀 Welcome back! The page is visible again.');
        }
      });
    </script>
  </body>
</html>

✅ How to try it:

Copy this into a file like tab-visibility.html.
Open it in your browser.
Open DevTools (F12 → Console).
Switch to another tab → “👋 You left the tab!”
Come back → “👀 Welcome back!”

React version (just as easy)

import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    function handleVisibility() {
      if (document.hidden) {
        console.log('👋 You left the tab!');
      } else {
        console.log('👀 Welcome back!');
      }
    }

    document.addEventListener('visibilitychange', handleVisibility);
    return () => document.removeEventListener('visibilitychange', handleVisibility);
  }, []);

  return <h1>Switch tabs and check your console 👀</h1>;
}

This tiny event is behind so much of what makes the web feel smooth - from pausing media and animations to keeping your apps efficient and responsive. And the best part? It only takes a few lines of JavaScript!

Browser Storage Quotas: Limit to store data/files inside browsers

Pooja Garva — Thu, 11 Jul 2024 17:22:29 +0000

In the digital age, web browsers have become essential tools for accessing information, communicating, and conducting various activities online. Behind the scenes, browsers manage a significant volume of data, including cookies, cached files, and user-uploaded content. However, there’s a limit to how much data browsers can store locally, and understanding these storage quotas is crucial for both users and developers.

Exploring Chrome’s “quota-internals”

One of the most popular web browsers, Google Chrome, offers insight into its storage quotas through a feature known as “quota-internals.” Accessible via the URL “chrome://quota-internals”, this tool provides users and developers with valuable information about the storage usage within the browser.

Before delving into how storage affects Chrome’s quota internals, it’s essential to understand the different types of browser storage:

Types of Browser Storage

Local Storage: This mechanism stores data with no expiration date. It remains persistent even after the browser is closed and reopened.
Session Storage: Data stored here is cleared when the browser session ends, i.e., when the browser is closed.
IndexedDB: This is a powerful API for storing significant amounts of structured data in the browser, supporting indexes and transactions.

Impact on Quota Internals

When users upload files or store data using local storage, session storage, or IndexedDB, it contributes to the overall storage usage tracked within Chrome’s quota internals. Each of these storage mechanisms has its own quota limits, which vary based on factors such as browser settings and permissions.

Exceeding these quotas may result in various consequences, such as denial of further storage, prompting for user permission, or other browser-defined behaviors. Thus, developers must manage storage usage responsibly to ensure a smooth user experience and avoid potential quota-related issues.

chrome://quota-internals

When you upload files or save data using these storage methods, it adds up. If you go over the limit, your browser might not let you store more. This could slow things down, cause issues with certain websites or might crash the tab.

It’s important to know about browser storage limits.
Chrome’s “quota-internals” feature offers valuable insights into storage usage within the browser, empowering users and developers to make informed decisions regarding data management and application design.