React: A extensão Devtools não mostra elementos de arquivos locais

Criado em 29 set. 2019 · 3Comentários · Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?

Erro

Qual é o comportamento atual?
Quando um arquivo local é carregado, a extensão devtools exibe um painel em devtools, mas todos os elementos estão ausentes. Não há avisos ou erros do console. Todos os elementos são exibidos corretamente ao usar um servidor, mas a documentação diz que um servidor não é necessário neste caso.

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema. Cole o link para o seu exemplo JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) abaixo:

Coloque isso em 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 a extensão React devtools e permita o acesso ao arquivo local URLS
Abra index.html
Abrir devtools
Abra o painel de componentes

Qual é o comportamento esperado?
O elemento Hello é exibido com as configurações padrão e tanto Hello quanto h1 são exibidos quando o tipo de host não está oculto nas configurações.

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

React / ReactDOM 16.10.1 UMD de Unpkg CDN
React Developer Tools (extensão do Chrome) 4.1.2
Chrome 77.0.3865.90
macOS 10.14.6

Developer Tools Bug

Fonte

nickmccurdy

Comentários muito úteis

chrome.devtools.inspectedWindow.eval está jogando:

DOMException: Falha ao executar 'postMessage' em 'Window': Origem de destino inválida 'null' em uma chamada para 'postMessage'.

Parece uma regressão causada por # 16900. Reverter esse commit corrige o DevTools.

cc @linshunghuang

bvaughn em 29 set. 2019

👍2

Todos 3 comentários

chrome.devtools.inspectedWindow.eval está jogando:

DOMException: Falha ao executar 'postMessage' em 'Window': Origem de destino inválida 'null' em uma chamada para 'postMessage'.

Parece uma regressão causada por # 16900. Reverter esse commit corrige o DevTools.

cc @linshunghuang

bvaughn em 29 set. 2019

👍2

Sim, definitivamente causado por essa mudança. Meu palpite é que precisaremos alterar o destino postMessage de window.origin para '*' porque origin é nulo para arquivos locais?