Flow Inspector: Debugging with Flow.js

Flow Inspector is an add-on component of Flow.js that allows you to easily determine which model variables are being used where and in which Flow.js (data-f-) attributes in your user interface.

It's a great way to help you understand the connection between your UI and your model. It can also help to debug problems in your UI, whether you're a front-end developer or a modeler.

Enabling Flow Inspector

There are two ways to enable Flow Inspector. You can add it to specific pages (always enabled). Or, you can add it to your browser as a bookmark, and turn it on for a specific page by clicking the bookmark link while you are visiting that page.

To add Flow Inspector to a specific page:

Make sure you're using the latest version of Flow.js:
```
 <script src="//forio.com/tools/js-libs/flow/latest/flow.min.js"></script>
```
Minimum version of Flow.js 0.10 is required to use Flow Inspector; using latest in your script src tag ensures that you are always using the most current version.

Add the Flow Inspector stylesheet to your page:

 <link rel="stylesheet" href="//forio.com/tools/js-libs/flow/latest/add-ons/flow-inspector.css">

Add the Flow Inspector source to your page:

 <script src="//forio.com/tools/js-libs/flow/latest/add-ons/flow-inspector.min.js"></script>

Add Flow Inspector to the body of your HTML, by placing a call in the script of your page, anytime after your call to initialize Flow:
```
 Flow.initialize(...);
 new window.Flow.Inspector('body');
```
This causes Flow Inspector to appear every time you load this page of your project.

To use Flow Inspector on-demand on any page:

Click and drag the bookmarklet to your bookmarks or favorites bar.

Now Flow Inspector will appear every time you click this bookmark. For example, go to a page in your project, where your user interface is created using Flow.js. Then, click the Flow Inspector bookmark from your Bookmarks Bar to make the Flow Inspector appear.

Flow Inspector goes away when you reload the page, but you can re-enable it by clicking the link from your Bookmarks Bar again.

(If your browser doesn't support clicking and dragging the bookmarklet, it's likely that your browser doesn't support Flow.js anyway. However, you can create a bookmark manually by setting the URL to the URL in the Flow Inspector Read Me file on Github.)

Features of Flow Inspector

Once you've enabled Flow Inspector for a page in your project, you see two windows appear. You can drag each window, independently, as needed.

Legend Window

The Legend window displays a legend of different kinds of Flow.js attributes. You can choose to show all kinds of attributes (default) or use the checkboxes to show only those you need.

The Bind Output highlights read-only elements (e.g. <span>) using the data-f-bind attribute. (Learn more.)
The Loop Output highlights elements using the data-f-foreach and data-f-repeat elements. (Learn more.)
The Custom Output highlights elements using custom attributes.
The Bind Input highlights read-write elements (e.g. <input>) using the data-f-bind attribute. (Learn more.)
The Event Input highlights elements that call operations, such as data-f-on-click. (Learn more.)

For each highlighted element,

A narrow, dark band shows the type of input or output attribute being used.
A medium band shows the name of the model variable or model operation bound to the element.
A narrow, light band shows the converters, if any, being applied to this model variable.

Mousing over the Inspector for the element displays the full contents of all three bands.

Highlighted element
Highlighted element with mouse over

Context Window

The Context Window of Flow Inspector provides additional data on model variables and model operations. These data appear when you click a Flow Inspector element.

For model variables, the Context Window provides the variable definition.
For model operations, the Context Window provides the operation definition.

Flow Inspector Context Window with Operation

The Context Window currently only provides data for Python models. However, support for additional modeling languages is expected, and the window itself appears regardless of modeling language.