-
Notifications
You must be signed in to change notification settings - Fork 532
Debugging
The goal of this page is to get you started with debugging your Fluid Framework code.
This section is for dedicating client component code packages. We will be using Chromium Edge in these steps but the steps are the same for Chrome. To do so,
-
Run the component you are looking to test using these steps. If you are looking to test a dependency package, i.e.
@fluidframeworks/aqueduct
, you can also view its code when running a component package that depends on it, i.e.@fluidframeworks/clicker
. To debug and test a dependency package in isolation, see this section on testing. -
After opening the component in the browser using
npm run start
, right click on the browser page and click onInspect
to open the DevTools. You should see something similar to this, in the case ofClicker
-
From here, you can navigate through your visual HTML elements in
Elements
and all of your source code inSources
. -
To set up breakpoints in your code, navigate to
Sources
and pressCtrl+P
orCmd+P
to open the search bar. Here, just type in name of the file you want to debug. Let's doclicker/index.tsx
. We can see that the search tool is really exhaustive and does most of the file path completion for us as we type. Just be careful to pick your.tsx
&.ts
files, and not the.js
compiled versions, as the line-numbers and syntax on the.js
files will not match your source code. -
Clicking on this, we can now see our
Clicker
source code and set any breakpoints. -
Now, simply refresh your page and you will see that the breakpoints will start being hit.
You can also similarly search for any dependency packages that Clicker
requires and be able to set up breakpoints there as well. From here, just step through your code using the debug tools and investigate the variable states to search for issues.
For more information on using the debug console, please see here.
If you are more interested in monitoring network traffic to see what is happening as Fluid operations are transmitted through websockets, Fiddler is a good tool for this.
- Install Fiddler
- On the right panel select
Filters
- Select
Use Filters
- Select
Show only the following Hosts
from the second dropdown - Add
localhost
to the input - Now, run your client component package using these steps. Once this opens up on
localhost:8080
, you should start seeing its network traffic. - Similarly, if you connect it to a local server instance using these steps, you will start seeing network traffic to it on
localhost:3000
.
For more information on using Fiddler, please see here.
This wiki is focused on contributing to the Fluid Framework codebase.
For information on using Fluid Framework or building applications on it, please refer to fluidframework.com.
- Submitting Bugs and Feature Requests
-
Contributing to the Repo
- Repo Basics
- Common Workflows and Patterns
- Managing dependencies
- Client Code
- Server Code
- PR Guidelines
- CI Pipelines
- Breaking vs Non-Breaking Changes
- Branches, Versions, and Releases
- Compatibility & Versioning
- Testing
- Debugging
- npm package scopes
- Maintaining API support levels
- Developer Tooling Maintenance
- API Deprecation
- Working with the Website (fluidframework.com)
- Coding Guidelines
- Documentation Guidelines
- CLA