Conditional Uniform Context Dev Tools

Last updated: June 22, 2026

Problem Statement

Uniform Context dev tools let testers with the Uniform Context browser extension simulate visitor activity to verify personalization. You want the dev tools disabled by default in production, but internal teams should be able to activate them via a hidden page — without code changes or developer involvement.

You can create a debug page that lets you activate and deactivate Uniform Context dev tools. (watch on Vimeo)

The steps below assume a Next.js app (page router, TypeScript) with Context dev tools already enabled. Tailwind CSS is used only for styling the hidden page.

Solution

1. Install js-cookie

npm i js-cookie
npm i -D @types/js-cookie

2. Make the dev tools plugin conditional

Find the code that configures the context plugins (probably in _app.tsx):

const clientContext = new Context({
  defaultConsent: true,
  manifest: manifest as ManifestV2,
  transitionStore: new NextCookieTransitionDataStore({
    serverContext: undefined,
  }),
  plugins: [
    enableContextDevTools(),
  ],
});

Refactor it so the plugin is only added when a specific cookie is set:

import Cookies from "js-cookie";

const plugins: ContextPlugin[] = [];
if (Cookies.get("_uniform-debug") === "true") {
  plugins.push(enableContextDevTools());
}
const clientContext = new Context({
  defaultConsent: true,
  manifest: manifest as ManifestV2,
  transitionStore: new NextCookieTransitionDataStore({
    serverContext: undefined,
  }),
  plugins,
});

3. Create the hidden control page

Add a page that toggles the cookie and reloads the app:

/*{ "title": "pages/debug.tsx" }*/
import Cookies from "js-cookie";
import { useEffect, useState } from "react";

export default function DebugPage() {
  const [debugMode, setDebugMode] = useState<string>();

  useEffect(() => {
    const value = Cookies.get("_uniform-debug");
    setDebugMode(value === "true" ? "ON" : "OFF");
  }, []);

  function toggleDebugMode() {
    let action = "";
    if (debugMode === "ON") {
      Cookies.remove("_uniform-debug");
      action = "deactivated";
    } else {
      Cookies.set("_uniform-debug", "true");
      action = "activated";
    }
    const result = confirm(
      `Debug mode will not be  until the application reloads. Do you want to reload the application?`
    );
    if (result) {
      document.location.reload();
    }
  }

  if (!debugMode) return;

  const action =
    debugMode === "ON" ? (
      <span className="font-bold text-red-800">DISABLE</span>
    ) : (
      <span className="font-bold text-green-800">ENABLE</span>
    );

  return (
    <>
      <h1>Debug mode: {debugMode}</h1>
      <div>
        <p>
          When debug mode is on, the Uniform Context dev tools plugin is enabled
          in the application. This means visitors who have the Uniform browser
          extension installed may be able to control classification and
          personalization on your site.
        </p>
        <p>
          To {action} debug mode, <a onClick={toggleDebugMode} href="#">click here</a>.
        </p>
      </div>
    </>
  );
}

4. Use it

  1. Open your website — the browser extension is disabled.

  2. Navigate to /debug.

  3. Enable debug mode and reload — the browser extension is enabled.

Troubleshooting

Verify it works: with the Uniform Context extension installed, the dev tools stay inactive on a normal visit; after enabling debug mode on /debug and reloading, the extension becomes active.

Dev tools never activate: check that the cookie check (Cookies.get("_uniform-debug") === "true") runs in the same code path that builds your Context plugins.

Resources