React: L'extension Devtools n'affiche pas les éléments des fichiers locaux

Créé le 29 sept. 2019 · 3Commentaires · Source: facebook/react

Voulez-vous demander une fonctionnalité ou signaler un bogue ?

Punaise

Quel est le comportement actuel?
Lorsqu'un fichier local est chargé, l'extension devtools affiche un panneau dans devtools, mais tous les éléments sont manquants. Il n'y a pas d'avertissements ni d'erreurs sur la console. Tous les éléments s'affichent correctement lors de l'utilisation d'un serveur, mais la documentation indique qu'un serveur n'est pas nécessaire dans ce cas.

Si le comportement actuel est un bogue, veuillez fournir les étapes pour reproduire et si possible une démo minimale du problème. Collez le lien vers votre exemple JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) ci-dessous:

Mettez ceci dans 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>

Installez l'extension React devtools et autorisez l'accès aux URL de fichiers locaux
Ouvrir index.html
Ouvrir les outils de développement
Ouvrir le panneau des composants

Quel est le comportement attendu?
L'élément Hello est affiché avec les paramètres par défaut, et Hello et h1 sont affichés lorsque le type d'hôte n'est pas masqué dans les paramètres.

Quelles versions de React et quel navigateur / système d'exploitation sont concernés par ce problème?

React / ReactDOM 16.10.1 UMD à partir du CDN Unpkg
React Developer Tools (extension Chrome) 4.1.2
Chrome 77.0.3865.90
macOS 10.14.6

Developer Tools Bug

Source

nickmccurdy

Commentaire le plus utile

chrome.devtools.inspectedWindow.eval lance:

DOMException: échec de l'exécution de 'postMessage' sur 'Window': origine cible non valide 'null' dans un appel à 'postMessage'.

On dirait une régression causée par # 16900. Le retour de ce commit corrige DevTools.

cc @linshunghuang

bvaughn le 29 sept. 2019

👍2

Tous les 3 commentaires

chrome.devtools.inspectedWindow.eval lance:

DOMException: échec de l'exécution de 'postMessage' sur 'Window': origine cible non valide 'null' dans un appel à 'postMessage'.

On dirait une régression causée par # 16900. Le retour de ce commit corrige DevTools.

cc @linshunghuang

bvaughn le 29 sept. 2019

👍2

Oui certainement causé par ce changement. Je suppose que nous devrons changer la cible postMessage de window.origin en '*' parce que l'origine est nulle pour les fichiers locaux?