@fluidframework/devtools

This library contains developer tools for use alongside the Fluid Framework. It is used to power our associated browser extension.

• Chrome: https://aka.ms/fluid/devtool/chrome
• Edge: https://aka.ms/fluid/devtool/edge

Using Fluid Framework libraries

For a dependency on a Fluid Framework library's public APIs, we recommend a ^ (caret) version range. For example, use ^1.3.4.

For a dependency on an unstable API, such as a beta API, we recommend a more restrictive version range. For example, use a ~ version range.

Installation

Run this command to install the package:

npm i @fluidframework/devtools -D

Importing from this package

This package uses package.json exports to separate APIs by support level. For information about the support guarantees, read API Support Levels.

Import the public APIs from @fluidframework/devtools.

Import the beta APIs from @fluidframework/devtools/beta.

Import the alpha APIs from @fluidframework/devtools/alpha.

API Documentation

Read the @fluidframework/devtools API documentation at https://fluidframework.com/docs/apis/devtools.

Usage

The Devtools' API surface is designed to fit nicely into most application flows.

Initialization

To initialize a devtools session for your container, call initializeDevtools. This function accepts a DevtoolsLogger for receiving Fluid telemetry from your application, a list of initial Fluid Containers to associate with the session, and (optionally) customized data visualization configurations for visualizing Container data.

About the DevtoolsLogger

The DevtoolsLogger is an optional piece when calling initializeDevtools but it is strongly recommended that you use it because several features in Fluid Devtools are powered by the telemetry that Fluid Framework generates, and this logger is the way in which that telemetry gets into Fluid Devtools.

You can obtain a DevtoolsLogger by calling its constructor, and then should pass it to initializeDevtools and to your application. This way the logger will receive all the telemetry generated by Fluid Framework in your application, and forward it to Fluid Devtools as necessary. For example, when using the AzureClient API you would do something like this (note how devtoolsLogger is passed to initializeDevtools() and to new AzureClient()):

import { createDevtoolsLogger, initializeDevtools } from "@fluidframework/devtools";

// Instantiate the logger
const devtoolsLogger = createDevtoolsLogger();

// Pass the logger when instantiating the AzureClient
const clientProps = {
    connection: { ... }, // Your application's configuration to connect to the Fluid service
    logger: devtoolsLogger,
};
const client = new AzureClient(clientProps);

// Use the AzureClient to create a Container
const containerSchema = { /* Define the objects in your Fluid Container */ };
const { container, services } = await client.createContainer(containerSchema)

// Initialize the Devtools passing the logger and your Container.
// The Container could be added later as well with devtools.registerContainerDevtools().
const devtools = initializeDevtools({
    logger: devtoolsLogger,
    initialContainers: [
        {
            container,
            containerKey: "My Container",
        },
    ],
});

If you're not working with AzureClient but with lower-level APIs (e.g. you manually instantiate a Loader from the @fluidframework/container-loader package package, you probably want to refer to the @fluidframework/devtools-core package instead of this one).

During local development the recommendation is that your application should receive the DevtoolsLogger instance instead of any logger it would normally receive when deployed to a real environment, to avoid local development activity from mixing with real telemetry. If you still want to provide a real application logger and use the Fluid Devtools features that are powered by telemetry at the same time, you can pass an existing logger to the DevtoolsLogger constructor and it will forward all telemetry it receives to that logger as well:

import { createDevtoolsLogger } from "@fluidframework/devtools";

// Your application's logger
const yourApplicationLogger = getInstanceOfYourApplicationLogger();

const devtoolsLogger = createDevtoolsLogger(yourApplicationLogger);

// Pass devtoolsLogger to initializeDevtools() and to your application as described above

Clean-up

The Devtools object is managed as a global singleton. That singleton is automatically cleaned up prior to the Window's "unload" event. So typical application flows likely won't need to worry about cleanup. That said, if you wish to have tighter control over when the Devtools are torn down, you can simply call the dispose method on the handle returned by initialization.

Contributing to the package

Build

To build the package locally, first ensure you have run pnpm install from the root of the mono-repo. Next, to build the code, run npm run build from the root of the mono-repo, or use fluid-build via fluid-build -t build.

• Note: Once you have run a build from the root, assuming no other changes outside of this package, you may run npm run build directly within this directory for a faster build. If you make changes to any of this package's local dependencies, you will need to run a build again from the root before building again from directly within this package.

Test

To run the tests, first ensure you have followed the build steps above. Next, run npm run test from a terminal within this directory.

Minimum Client Requirements

Fluid Framework client libraries support the platforms in this document. These requirements are intentionally restrictive. Within a major version series, we can relax these requirements, but we cannot make them stricter. For a Long Term Support (LTS) version, we might need to support these platforms for several years.

Other configurations can work, but Fluid Framework does not support them. If an unsupported configuration stops working, we do not classify this as a bug. To request support for a configuration that is not listed, file an issue. The product team will evaluate your request. In the issue, specify the current status of the configuration:

• The configuration works but needs official support.
• The configuration does not work and requires changes.

Supported Runtimes

• Fluid Framework supports Node.js versions 22 and 24 while they receive upstream support.
  • Fluid Framework will stop support for version 22 when upstream support ends on 2027-04-30.
  • Fluid Framework does not support Node.js with the --no-experimental-fetch flag.
• Fluid Framework supports modern browsers that support the ES2022 standard library.

Supported Tools

• TypeScript 6.0:
  • Fluid Framework supports all strict options.
  • Set the build targets (lib, target) to ES2022 or later.
  • Enable strictNullChecks.
  • Fluid Framework does not support configuration options deprecated in TypeScript 6.0.
  • Fluid Framework does not fully support exactOptionalPropertyTypes. If you enable this option, do not use in, Reflect.has, Object.hasOwn, or Object.prototype.hasOwnProperty to narrow members of Fluid Framework types. These methods can incorrectly exclude undefined from the possible values.
• webpack 5
  • We do not require a specific bundler. Other bundlers that handle ES Modules can work, but we actively test only webpack.

Module Resolution

In TypeScript compilerOptions, use Node16, Node20, NodeNext, or Bundler module resolution. These settings follow the Node.js v12+ ESM Resolution and Loading algorithm.

Do not use Node10 module resolution.

Module Formats

• ES Modules: Use ES Modules to consume Fluid Framework client packages, including in Node.js.
• CommonJS: Fluid Framework does not officially support CommonJS in version 3.0 or later.

Contribution Guidelines

You can contribute to Fluid Framework in these ways:

• Answer questions in GitHub Discussions.
• Submit bug reports and help verify fixes.
• Review source code changes.
• Contribute bug fixes.

For detailed instructions, read the repo documentation.

This project follows the Microsoft Open Source Code of Conduct. For more information, read the Code of Conduct frequently asked questions. For questions or comments, contact [email protected].

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Read the Fluid Framework documentation for information about Fluid Framework concepts and APIs.

To request information that the documentation does not contain, create an issue.

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.