@fluidframework/devtools-core

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

Installation

To get started, install the package by running the following command:

npm i @fluidframework/devtools-core -D

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 the Loader instance you'll use to create/load Containers as shown below. This way the logger will receive all the telemetry generated by Fluid Framework in your application, and forward it to Fluid Devtools as necessary.

import { DevtoolsLogger, initializeDevtools } from "@fluidframework/devtools-core";

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

// Pass the logger when instantiating the Loader
const loader = new Loader({
	logger: devtoolsLogger,
	// Other necessary properties ...
});

// Use the Loader to create (and optionally, attach) a Container
const container = await loader.createDetachedContainer(/* params */);
await container.attach(/* params */);

// 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 working with AzureClient instead of lower-level APIs like the one described above, you probably want to refer to the @fluidframework/devtools 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 { DevtoolsLogger } from "@fluidframework/devtools-core";

// 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.

API Documentation

API documentation for @fluidframework/devtools-core is available at https://fluidframework.com/docs/apis/devtools-core.

Contribution Guidelines

There are many ways to contribute to Fluid.

• Participate in Q&A in our GitHub Discussions.
• Submit bugs and help us verify fixes as they are checked in.
• Review the source code changes.
• Contribute bug fixes.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [e-mail] with any additional questions or comments.

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

Not finding what you're looking for in this README? Check out our GitHub Wiki or fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

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.