Programmatically set default state of graph, logs, & updates on render

[jennifer-shehane]

I would like a way to automatically set the state of the dev tools on render. Something like:

<DevTools noPanel graphEnabled={true} logEnabled={true} updatesEnabled={true}/>

I basically always want the logs to be on when I'm in my dev environment. This wouldn't normally be a big problem (you just click the button and be done with it), but my app is rendering inside of an iframe inside another application which makes a page refresh clear the active state of the mobx-react-devtools on every refresh.

I know that I could just build my own custom panel design and hook into the active state of each button, but that's a lot more work than I'm hoping to do to just turn one on/off statically.

[jennifer-shehane]

This is the workaround I've written for now to have the logs and updates always enabled.

if (window.env === 'development') {
  window.localStorage.setItem('mobx-react-devtool__updatesEnabled', 'YES')
  window.localStorage.setItem('mobx-react-devtool__logEnabled', 'YES')

  return <DevTools />
}

[andykog]

@jennifer-mann, you can now do it like this:

import { setLogEnabled, setUpdatesEnabled, setGraphEnabled } from 'mobx-react-devtools';

setLogEnabled(true);
setUpdatesEnabled(false);
setGraphEnabled(false);

Published as [email protected]

[andykog]

Something like:

<DevTools noPanel graphEnabled={true} logEnabled={true} updatesEnabled={true}/>

I'm planning to get rid of necessity to include <DevTools noPanel /> and just render modals and highlighted components into document.body

[jennifer-shehane]

thanks 👍

[alexilyaev]

@andykog I don't see graphEnabled documented in README, can you add a short line about it?

There's setGraphEnabled(), but it's not clear from that what it does.

[andykog]

@alexilyaev, enables the second button on the panel, kind of useless.