Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application

redux-devtools-separate-window.js

// 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);

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

// 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);
}

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);
}

@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);
}

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.

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();
}