React: La extensión Devtools no muestra elementos de archivos locales

Creado en 29 sept. 2019 · 3Comentarios · Fuente: facebook/react

¿Quieres solicitar una función o informar de un error ?

Bicho

¿Cuál es el comportamiento actual?
Cuando se carga un archivo local, la extensión devtools muestra un panel en devtools, pero faltan todos los elementos. No hay advertencias ni errores en la consola. Todos los elementos se muestran correctamente cuando se usa un servidor, pero la documentación dice que un servidor no es necesario en este caso.

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema. Pegue el enlace a su JSFiddle (https://jsfiddle.net/Luktwrdm/) o CodeSandbox (https://codesandbox.io/s/new) ejemplo a continuación:

Pon esto en index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function HelloWorld() {
        return React.createElement("h1", null, "Hello, world!");
      }
      ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById("root")
      );
    </script>
  </body>
</html>

Instale la extensión React devtools y permita el acceso a las URL de archivos locales
Abrir index.html
Herramientas de desarrollo abiertas
Panel de componentes abierto

¿Cuál es el comportamiento esperado?
El elemento Hello se muestra con la configuración predeterminada, y tanto Hello como h1 se muestran cuando el tipo de host no está oculto en la configuración.

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?

React / ReactDOM 16.10.1 UMD de Unpkg CDN
React Developer Tools (extensión de Chrome) 4.1.2
Cromo 77.0.3865.90
macOS 10.14.6

Developer Tools Bug

Fuente

nickmccurdy

Comentario más útil

chrome.devtools.inspectedWindow.eval está lanzando:

DOMException: no se pudo ejecutar 'postMessage' en 'Window': origen de destino no válido 'null' en una llamada a 'postMessage'.

Parece una regresión causada por # 16900. Revertir ese compromiso corrige DevTools.

cc @linshunghuang

bvaughn en 29 sept. 2019

👍2

Todos 3 comentarios

chrome.devtools.inspectedWindow.eval está lanzando:

DOMException: no se pudo ejecutar 'postMessage' en 'Window': origen de destino no válido 'null' en una llamada a 'postMessage'.

Parece una regresión causada por # 16900. Revertir ese compromiso corrige DevTools.

cc @linshunghuang

bvaughn en 29 sept. 2019

👍2

Sí, definitivamente causado por ese cambio. Supongo que tendremos que cambiar el destino de postMessage de window.origin a '*' porque el origen es nulo para los archivos locales.