Debugging in Chrome using Hooks

[scottybollinger]

We've been using Kea for well over a year and recently upgraded to 1.0 and LOVE the changes. However, we've found it challenging to debug with the React Dev Tools and wondered if anyone has any suggestions on how to see values from the useValues hook in the inspector.

I have created a POC with the old and new syntax here (forked from a training resource our team uses source) that you can use to see the issues we're having.

When inspecting the legacy component, you can clearly see the props Kea exposes.

However there isn't a clear way to be able to see the data from the hooks.

Does anyone have any tips on being able to effectively debug the new Hooks?

[mariusandra]

Hey, I looked into this briefly and found a few things.

First,

it is possible to find the values, but not in a very scannable form:

That's because useValues uses a trick to create getter functions that call react-redux's useSelector. Basically if you read any of the values in the object returned by useValues, is actually calls a function that runs useSelector(). What this hook does internally is outside of kea's control, but eventually in one useRef hook it stores the latest value, which can be seen inside the devtools.

It's not the most elegant place to read it (compared to how you see the value of useState for example), but it's there...

Second,

It's currently not possible to log the name of the variable (userName, computedValue, etc) into devtools. There is an issue about this in the react repository, but without a clear answer as of this moment.

Perhaps, somehow, it could be possible to overwrite the .toString function of some function (either the getter... if that's even possible... or useSelector), but that would introduce extra overhead and I'm not sure what side-effects it might have, except for a slight slowdown.

Third,

For a while I've been thinking of creating of kea's own devtools that could provide all this information and much more... although then probably not via an integration into react-devtools... but through it's own extension.

This project also hasn't gotten too far. So far what I have is this: https://gist.github.com/mariusandra/0b3e63e70b68f86e5dc5ad714341bed9

If you import it and add the <KeaDevTool /> component anywhere, you'll see something that shows all the currently mounted logic, like this:

Eventually this could be extended into something that shows a nice diagram between all the react components that use (or are wrapped by) any logic, including what values are connected/used... but it's far from there.

Any help making this into a real useful tool is of course appreciated, but not expected.

...

Sorry I couldn't give a better answer to your question though. Once the issue with react-devtools gets a resolution, it should be easier to find some solution.

Actually, thinking about it, a hack could be to replace this code:

      Object.defineProperty(response, key, {
        get: () => useSelector(logic.selectors[key])
      })

with:

      Object.defineProperty(response, key, {
        get: () => {
           if (getContext().options.debug) {
             useState(`Getting value: ${key}`)
           }
           return useSelector(logic.selectors[key])
           // and maybe use and update another ref if the returned value changes...
        }
      })

... but that seems way too hacky to me :)

[scottybollinger]

Thanks for the quick response! The dev tools extension would be great. Will grab it and play around with it.

[mariusandra]

Cool and thank you! :)

Be aware that you might need to dive into kea's internals to make any sense of it... and there might be data that's hard to see right now, for example the same useValues hook might need to be instrumented with something like:

{
  get: () => {
    if (window.__KEA_DEVTOOLS__) {
      // log that we are using this value somehow
      // to make it visible in the devtools
    }
    return useSelector(...)
  }
}

I'm not sure at this point what is needed to bring the dev tools to the same quality that the react and redux devtools have... In any case, thanks for trying it out!