Overview

The Datadog Browser SDK developer extension for Chrome includes a Feature Flags tab. The tab lists your organization’s feature flags and lets you override them locally in your browser. Use it to see how your application behaves under different flag values, without changing flag configuration in Datadog.

Overrides apply only to your browser. They are never sent to Datadog and don’t affect other users.

The extension includes other tabs for inspecting Browser SDK behavior. This page covers the Feature Flags tab.

Prerequisites

Before you begin, you need:

• Google Chrome.
• Access to feature flags in a Datadog organization on a commercial Datadog site: US1 (datadoghq.com), US3 (us3.datadoghq.com), US5 (us5.datadoghq.com), EU1 (datadoghq.eu), AP1 (ap1.datadoghq.com), or AP2 (ap2.datadoghq.com). Datadog for Government sites are not supported.
• A browser application instrumented with the Datadog Feature Flags SDK for JavaScript.
• The DatadogDevtools wrapper composed into your OpenFeature provider stack. See Add the DatadogDevtools wrapper.

Install the extension

Install the Datadog Browser SDK developer extension from the Chrome Web Store.

Add the DatadogDevtools wrapper

DatadogDevtools is an OpenFeature provider that wraps another provider. It reads the overrides the extension sets, returns them for matching flag keys, and delegates every other evaluation to the provider it wraps. Without it, the tab shows a DatadogDevtools not detected notice. You can still set overrides, but they don’t apply until the wrapper is in place.

Import DatadogDevtools from @datadog/openfeature-browser, pass your provider to it, and register the wrapper through the OpenFeature API:

import { DatadogProvider, DatadogDevtools } from '@datadog/openfeature-browser';
import { OpenFeature } from '@openfeature/web-sdk';

const provider = new DatadogProvider({
  applicationId: '<APPLICATION_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  env: '<ENV_NAME>',
});

await OpenFeature.setProviderAndWait(new DatadogDevtools(provider));

Set site to the Datadog site your organization uses. Use the same site you select in the extension’s dropdown. If they differ, you browse and pick variants from one organization’s flag catalog while your application resolves flags against a different organization’s catalog.

The wrapper accepts any OpenFeature provider, so you can also use it over an InMemoryProvider in a local development build. If your application registers providers for multiple domains, wrap each one.

Confirm that an override applied

DatadogDevtools reads overrides once, when the provider initializes. Evaluate the flag with a details method to see where the value came from: an overridden flag resolves with a reason of STATIC and flagMetadata.overridden set to true.

const client = OpenFeature.getClient();
const details = client.getBooleanDetails('<FLAG_KEY>', false);

console.log(details.value, details.reason, details.flagMetadata.overridden);

An override whose value doesn’t match its declared type is ignored when the wrapper reads it at initialization, and the wrapper logs a warning to the browser console. Integer overrides must be whole numbers.

Open the Feature Flags tab

1. Open your application in Chrome.
2. Open Chrome DevTools (Cmd+Opt+I on Mac, F12 on Windows or Linux).
3. Select the Browser SDK panel. If you don’t see it, select the overflow menu (») in the DevTools tab bar.
4. Select the Feature Flags tab.
5. Select your Datadog site from the dropdown before you sign in. Your site selection determines which Datadog organization the sign-in and the flag list come from. Then click Sign in to Datadog.

Your credentials are stored for the browser session and clear when the session ends. To sign out and revoke the session, click Disconnect. You can also revoke the extension’s access in Datadog under Organization Settings > Authorized Applications.

Browse and filter flags

The tab shows a Feature Flag Overrides heading and a badge confirming which Datadog site you are connected to. Above the list is a count of the flags available to you. Each flag shows its name, key, description, and variant buttons.

To narrow the list, use the filter row:

Override a flag

To override a flag from the list, click one of its variant buttons.

To set a value that isn’t defined as a variant, expand Add a custom override. Enter the flag key, select the value type, and enter the value. Applying a key that already has an override replaces the existing value. A value that doesn’t match the flag’s type is rejected in the extension UI before it’s saved.

Overridden flags move into a highlighted Local overrides section at the top of the list, which shows how many are active. The selected variant is highlighted, and each row has a revert control to remove that single override. To remove overrides in bulk, click Clear all at the bottom of the tab. See Clear all overrides.

An override row can also carry a warning:

Apply overrides to your application

Overrides are saved as soon as you set them, but DatadogDevtools reads them once, when your provider initializes. Setting or reverting an override has no effect on the running page. Click Refresh Page at the bottom of the tab to reload so that the new values take effect.

Manage overrides

Overrides persist independently of your Datadog sign-in. Signing out, closing DevTools, and restarting your browser all leave them in place. When a page has overrides and you are signed out, the connect screen shows how many overrides are stored for the page. It also offers Clear all, so that you can remove them without signing in.

Revert individual overrides or click Clear all when you finish testing, then refresh the page so that your application resolves flags from Datadog again.

Overrides are scoped to a Datadog site

Overrides are stored separately for each Datadog site. An override you set while connected to one site doesn’t apply while you are connected to another.

Selecting a different site in the dropdown changes which overrides apply. The tab shows a Reload to apply <SITE>’s overrides banner: the page keeps using the overrides it loaded with until you reload it. Selecting the original site again restores that site’s overrides. Switching sites doesn’t delete any overrides.

Clear all overrides

Clear all removes overrides in bulk and asks you to confirm first. What it removes depends on whether you are signed in:

After you clear overrides, the tab prompts you to reload. The page keeps applying the cleared overrides until you do.

Further reading

Additional helpful documentation, links, and articles:

JavaScript Feature FlagsDOCUMENTATION Local Flag Overrides with the Multi-Provider PatternDOCUMENTATION Variants and Flag TypesDOCUMENTATION