Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application
// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
// reload in case it's reusing the same window with the old content
win.location.reload();
// wait a little bit for it to reload, then render
setTimeout(function() {
React.render(
<DebugPanel top right bottom left >
<DevTools store={store} monitor={LogMonitor} />
</DebugPanel>
, win.document.body);
}, 10);
@collardeau

This comment has been minimized.

Copy link

commented Aug 21, 2015

I just set up the devtools yesterday and was getting frustrated with the obstruction. Thanks for this, I just implemented it, works great.

@abrkn

This comment has been minimized.

Copy link

commented Aug 26, 2015

// createDevToolsWindow.js
import React from 'react';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';

export default function createDevToolsWindow(store) {
  // give it a name so it reuses the same window
  const win = window.open(null, 'redux-devtools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');

  // reload in case it's reusing the same window with the old content
  win.location.reload();

  // wait a little bit for it to reload, then render
  setTimeout(() => {
    React.render(
      (
        <DebugPanel top right bottom left >
          <DevTools store={store} monitor={LogMonitor} />
        </DebugPanel>
      ), win.document.body);
  }, 10);
}
@chentsulin

This comment has been minimized.

Copy link

commented Sep 13, 2015

To avoid warning

Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

I use something like this:

import React from 'react';
import ReactDom from 'react-dom';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';


export default function createDevToolsWindow(store) {
  // give it a name so it reuses the same window
  const win = window.open(null, 'redux-devtools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');

  // reload in case it's reusing the same window with the old content
  win.location.reload();

  win.document.write('<div id="react-devtools-root"></div>');

  // wait a little bit for it to reload, then render
  setTimeout(() => {
    ReactDom.render(
      (
        <DebugPanel top right bottom left key="debugPanel">
          <DevTools store={store} monitor={LogMonitor} />
        </DebugPanel>
      ), win.document.getElementById('react-devtools-root'));
  }, 10);
}
@ptim

This comment has been minimized.

Copy link

commented Oct 2, 2015

@chentsulin: works a treat, thanks!

I found I needed to adapt this a little further.. I was seeing an error: "Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element." on every second page refresh:

import React from 'react';
import ReactDom from 'react-dom';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';


export default function createDevToolsWindow(store) {
  // give it a name so it reuses the same window
  const win = window.open(null, 'redux-devtools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');

  // reload in case it's reusing the same window with the old content
  win.location.reload();

  // wait a little bit for it to reload, then render
  setTimeout(() => {
    // Wait for the reload to prevent:
    // "Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element."
    win.document.write('<div id="react-devtools-root"></div>');

    ReactDom.render(
      (
        <DebugPanel top right bottom left key="debugPanel">
          <DevTools store={store} monitor={LogMonitor} />
        </DebugPanel>
      ), win.document.getElementById('react-devtools-root'));
  }, 10);
}
@iamdustan

This comment has been minimized.

Copy link

commented Oct 22, 2015

npm install --save-dev redux-devtools-ui includes some built-in UI controls to toggle the redux devtools to be in on-page panel or in a popout, similar to what browser devtools do.

@NeXTs

This comment has been minimized.

Copy link

commented Nov 1, 2015

In case you want to close separate dev-tools window by closing working tab

// Close separate window by closing working tab
window.onunload = function() {
  win.close();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.