We have installed our debugging tool, and we have applied it to our application; let's now see how it works, and what we can do with it. 

If you select any specific component by clicking on it, you can see which components and HTML elements it generates. You can also select a component in a more traditional way by selecting a component directly onscreen (click on the leftmost icon, to the left of the Memory tab) and then click on the React tab; the element you clicked on will be selected. You can also use the Search function to look for a specific component; this will be useful with large applications to avoid having to manually scroll through lots and lots of HTML.

In the third panel, you can see the current props. If you edit one (try setting the count prop to a different value, for example), you'll immediately see changes on the left. Also, if you click on a button, you'll see how the prop values change; experiment a bit with the three buttons on your application.

If you want to interact with any component, you may notice that the currently selected one has == $r next to it. This means that there is a special JS variable, which points to the selected component in our case, <Counter>. If you open the Console tab, you can examine its props, by typing in $r.props, or experiment with calling the diverse methods available, such as $r.onAdd1() , as shown in the next screenshot:

Interestingly, in our application, as we coded it, the .onAdd1() method actually dispatches an action, and we can see it in the screenshot: an object with type:"counter:increment" and value:1, just as we coded it; see the Defining Actions section in the previous chapter to check.

If you select the <Provider> component, you can inspect the current state of the application. First you'll have to select it (so $r points to it) and then, in the Console tab, you'll need to enter $r.store.getState() to get results as in the next screenshot:

In fact, you can even fire actions if you want; by entering something like $r.store.dispatch({type:"counter:increment", value:11}) , you have full control over the application state.