English (United States)
See more
Devtools extension for viewing live data about your Fluid application.
Latest Version
Version
1.0.2
Update
November 22, 2024
Size
7.93MiB
Developer
Category
Users
65 
Rating
0 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Fluid Framework Developer Tools Extension
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.
The \"Audience\" tab allows you to view the users currently in the container, their client ID and permissions scopes. You also get a historical view of all users joining/leaving the container.
The \"States\" tab shows a log of container state changes (connect, attach, disconnect)
Selecting \"Telemetry\"/\"Events\" in the left navigation shows a running log of framework events including details of the events.
Fluid Framework is a collection of client libraries for distributing and synchronizing shared states and makes it simple for developers to build real-time multiuser collaborative experiences. To learn more, visit https://aka.ms/fluid.
Read more
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.
The \"Audience\" tab allows you to view the users currently in the container, their client ID and permissions scopes. You also get a historical view of all users joining/leaving the container.
The \"States\" tab shows a log of container state changes (connect, attach, disconnect)
Selecting \"Telemetry\"/\"Events\" in the left navigation shows a running log of framework events including details of the events.
Fluid Framework is a collection of client libraries for distributing and synchronizing shared states and makes it simple for developers to build real-time multiuser collaborative experiences. To learn more, visit https://aka.ms/fluid.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx",\t"manifest_version": 3,\t"name": "Fluid Framework Developer Tools",\t"description": "Devtools extension for viewing live data about your Fluid application.",\t"author": "Microsoft",\t"version": "1.0.2",\t"action": {\t\t"default_icon": {\t\t\t"16": "icons/icon_16.png",\t\t\t"32": "icons/icon_32.png",\t\t\t"48": "icons/icon_48.png",\t\t\t"128": "icons/icon_128.png"\t\t},\t\t"default_popup": "popup/popup.html"\t},\t"permissions": ["activeTab"],\t"devtools_page": "devtools/devtools.html",\t"background": {\t\t"service_worker": "background/BackgroundScript.js"\t},\t"content_scripts": [\t\t{\t\t\t"js": ["content/ContentScript.js"],\t\t\t"matches": [""] \t\t}\t],\t"icons": {\t\t"16": "icons/icon_16.png",\t\t"32": "icons/icon_32.png",\t\t"48": "icons/icon_48.png",\t\t"128": "icons/icon_128.png"\t}}
Read more
