Fluid Framework Developer Tools

The Fluid Framework Developer Tools extension for the open-source Fluid Framework platform. It enables developers to gain a deeper understanding of Fluid state in their application, offering insights into Container and Audience states, data visualization, and a live telemetry view with more functionality coming soon.

To get started, ensure that your Fluid application has integrated the developer tools library, and is configured to initialize them as a part of application startup. For more information, see here: https://aka.ms/fluiddevtool.

From there, simply launch your application and open the "Fluid Framework Devtools" tab in the browser’s devtools pane.

The left navigation panel shows all the containers in your application. Selecting a container will show the details on the right panel.

Right panel shows the container state, current client ID and buttons to disconnect and close the selected container. Below that, the "Data", "Audience" and "States" tabs show more information.

The "Data" tab allows you to look at the Container data in hierarchical structure including data types and values.