How to use react-devtools-core - 3 common examples

To help you get started, we’ve selected a few react-devtools-core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github shirakaba / react-nativescript / sample / app / app.ts View on Github external
// };
// mySocket.onerror = function(ev: Event){
//     console.error("[SOCKET] Socket had an error", ev);
// };

/* https://github.com/facebook/react-devtools/issues/601#issuecomment-290611996
 * https://github.com/sidorares/react-x11/blob/master/src/DevToolsIntegration.js */
(global as any).__DEV__ = true;

// import * as React from "react";
// Object.defineProperty(window, 'React', {
//     value: React
// });

const {connectToDevTools} = require('react-devtools-core');
const wsInstance = connectToDevTools({
    host: 'localhost',
    port: 8097,
    /* This does NOT work */
    // websocket: (global as any).WebSocket,
    resolveRNStyle: null,
    isAppActive: () => true,
});

console.log(`[app.ts] Got wsInstance:`, wsInstance);
console.log(`[app.ts] wsInstance's onopen was:`, wsInstance.onopen);

(window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', (agent: any) => {
    console.log(`Got 'react-devtools' callback!`);
    // let highlightedNodes: any[] = [];
    // agent.on('highlight', data => {
    //     highlight(data.node, data.name);
github facebook / flipper / src / plugins / reactdevtools / index.tsx View on Github external
async initializeDevTools(devToolsNode: HTMLElement) {
    const port = await getPort({port: 8097}); // default port for dev tools
    ReactDevToolsStandalone.setContentDOMNode(devToolsNode).startServer(port);
    const device = await this.getDevice();
    if (device) {
      const host =
        device.deviceType === 'physical'
          ? address.ip()
          : device instanceof AndroidDevice
          ? '10.0.2.2' // Host IP for Android emulator host system
          : 'localhost';
      this.client.call('config', {port, host});

      if (['quest', 'go', 'pacific'].includes(device.title.toLowerCase())) {
        const device = await this.getDevice();
        (device as AndroidDevice).reverse([port, port]);
      }
    }
  }
github facebook / react / packages / react-devtools / app.html View on Github external
require('electron').shell.openExternal(link.href);
      });

      const $localhost = $("#localhost");
      $localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
      $localhost.addEventListener('click', selectAll);
      $localhost.addEventListener('focus', selectAll);

      const $byIp = $("#byip");
      $byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
      $byIp.addEventListener('click', selectAll);
      $byIp.addEventListener('focus', selectAll);

      let devtools;
      try {
        devtools = require("react-devtools-core/standalone").default;
      } catch (err) {
        alert(
          err.toString() +
            "\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?"
        );
      }
      window.devtools = devtools;
      window.server = devtools
        .setContentDOMNode(document.getElementById("container"))
        .setStatusListener(function(status) {
          const element = document.getElementById("loading-status");
          if (element) {
            element.innerText = status;
          }
        })
        .startServer(port);

react-devtools-core

Use react-devtools outside of the browser

MIT
Latest version published 1 month ago

Package Health Score

95 / 100
Full package analysis

Similar packages