We create many `useDebugValue` helpers, loggers and so one now, so we can feel less pain.

What matter (**Updated**)
- previewing complex values brifely like chrome devtools does it for arrays, sets, maps, objects,,,

I [wrote related twit](https://twitter.com/mxtnr/status/1178271362890240001) recently with one of my DebugValue helpers. screenshot out here:
<img width="556" alt="Screenshot 2019-09-29 at 14 01 53" src="https://user-images.githubusercontent.com/6201068/66700775-5648bf80-ecfd-11e9-93fe-089d451bcffa.png">
_my named hooks currently require a `label` option unless react babel cannot transform name of variable automatically_
});
  const Contexts = ({
    children,
    defaultSelectedElementID = null,
    defaultSelectedElementIndex = null,
  }) => (
    <BridgeContext.Provider value={bridge}>
      <StoreContext.Provider value={store}>
        <TreeContextController
          defaultSelectedElementID={defaultSelectedElementID}
          defaultSelectedElementIndex={defaultSelectedElementIndex}>
          <InspectedElementContextController>
            {children}
          </InspectedElementContextController>
        </TreeContextController>
      </StoreContext.Provider>
    </BridgeContext.Provider>
  );
  it('should inspect the currently selected element', async done => {
    const Example = () => {
      const [count] = React.useState(1);
      return count;
    };
    const container = document.createElement('div');
    await utils.actAsync(() =>
      ReactDOM.render(<Example a={1} b="abc" />, container),
    );
    const id = ((store.getElementIDAtIndex(0): any): number);
    let didFinish = false;
    function Suspender({target}) {