@fluidframework/devtools
This library contains developer tools for use alongside the Fluid Framework. It is used to power our associated browser extension.
Installation
To get started, install the package by running the following command:
npm i @fluidframework/devtools -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.
DevtoolsLogger
About the 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.
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 opencode@microsoft.com 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.