Debugging

Introduction

The goal of this page is to get you started with debugging your Fluid Framework code.

Debugging using DevTools

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,

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

2. After opening the component in the browser using npm run start, right click on the browser page and click on Inspect to open the DevTools. You should see something similar to this, in the case of Clicker

3. From here, you can navigate through your visual HTML elements in Elements and all of your source code in Sources.

4. To set up breakpoints in your code, navigate to Sources and press Ctrl+P or Cmd+P to open the search bar. Here, just type in name of the file you want to debug. Let's do clicker/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.

5. Clicking on this, we can now see our Clicker source code and set any breakpoints.

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

Debugging using Fiddler

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.

1. Install Fiddler
2. On the right panel select Filters

3. Select Use Filters
4. Select Show only the following Hosts from the second dropdown
5. Add localhost to the input
6. Now, run your client component package using these steps. Once this opens up on localhost:8080, you should start seeing its network traffic.
7. 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.