Skip to content

Instantly share code, notes, and snippets.

@tlrobinson
Last active August 20, 2019 23:54
Show Gist options
  • Star 52 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save tlrobinson/1e63d15d3e5f33410ef7 to your computer and use it in GitHub Desktop.
Save tlrobinson/1e63d15d3e5f33410ef7 to your computer and use it in GitHub Desktop.
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);
@ptim
Copy link

ptim 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
Copy link

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
Copy link

NeXTs 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