How it works…

This version of the developer tools lets you interact with the application and see components and props, but you'll be restricted as to interacting with them through the console, as we'll see.

First, start by checking that if you click on the buttons in the Opera window, you'll automatically see the changes in the RDT, as before see the next screenshot for the results after some Add 1 clicks:

 Whatever you do in the React application will be shown in the Developer Tools. In this example, I clicked six times on Add 1, and the updated component tree shows the new values

Most functions work the same way as in Chrome. You can search for a component by name, and if you right-click on a component, you get several options, including showing all the occurrences of the component's name (as with the search) or copying its props; see the following screenshot:

The RDT let you get full information about any component

However, note that you won't get complete values. For instance, in the preceding example, the copied props were as in the following code snippet; instead of a function, I got a string description:

{
"count": 6,
"dispatch": "[function dispatch]"
}

Another restriction is that you won't be able to use $r to directly access an object; this is beyond the tools' capabilities. However, if you are out of solutions for debugging, at least you'll be able to see the internal workings of your app, nothing to be dismissed out of hand!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset