React: Die Devtools-Erweiterung zeigt keine Elemente aus lokalen Dateien an
Möchten Sie eine Funktion anfordern oder einen Fehler melden?
Fehler
Wie ist das aktuelle Verhalten?
Wenn eine lokale Datei geladen wird, zeigt die Erweiterung devtools ein Fenster in devtools an, aber alle Elemente fehlen. Es gibt keine Konsolenwarnungen oder -fehler. Bei Verwendung eines Servers werden alle Elemente ordnungsgemäß angezeigt. In der Dokumentation wird jedoch angegeben, dass in diesem Fall kein Server erforderlich ist.
Wenn das aktuelle Verhalten ein Fehler ist, geben Sie bitte die Schritte zur Reproduktion und wenn möglich eine minimale Demo des Problems an. Fügen Sie den Link zu Ihrem JSFiddle- (https://jsfiddle.net/Luktwrdm/) oder CodeSandbox- (https://codesandbox.io/s/new) Beispiel unten ein:
- Geben Sie dies in
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>
- Installieren Sie die React devtools-Erweiterung und ermöglichen Sie den Zugriff auf lokale Datei-URLs
- Öffnen Sie
index.html - Öffnen DevTools
- Öffnen Sie das Komponentenfenster
Was ist das erwartete Verhalten?
Das Hello-Element wird mit den Standardeinstellungen angezeigt, und sowohl Hello als auch h1 werden angezeigt, wenn der Hosttyp in den Einstellungen nicht ausgeblendet ist.
Welche Versionen von React und welcher Browser / welches Betriebssystem sind von diesem Problem betroffen?
- React / ReactDOM 16.10.1 UMD von Unpkg CDN
- React Developer Tools (Chrome-Erweiterung) 4.1.2
- Chrome 77.0.3865.90
- macOS 10.14.6
nickmccurdy
Alle 3 Kommentare
chrome.devtools.inspectedWindow.eval wirft:
DOMException: Fehler beim Ausführen von 'postMessage' in 'Window': Ungültiger Zielursprung 'null' bei einem Aufruf von 'postMessage'.
Sieht aus wie eine Regression, die durch # 16900 verursacht wird. Durch das Zurücksetzen dieses Commits werden DevTools behoben.
cc @linshunghuang
bvaughn
am 29. Sept. 2019
Ja, definitiv durch diese Änderung verursacht. Ich vermute, wir müssen das postMessage-Ziel von window.origin in '*' ändern, da der Ursprung für lokale Dateien null ist.
linshunghuang
am 29. Sept. 2019
Dies wurde über # 16953 behoben und ich werde heute (4.1.3) ein Update mit dem Fix veröffentlichen!
bvaughn
am 30. Sept. 2019
Verwandte Themen
bloodyowl
·
3Kommentare
tleunen
·
3Kommentare
UnbearableBear
·
3Kommentare
h1orz
·
3Kommentare
jvorcak
·
3Kommentare
Hilfreichster Kommentar
chrome.devtools.inspectedWindow.evalwirft:Sieht aus wie eine Regression, die durch # 16900 verursacht wird. Durch das Zurücksetzen dieses Commits werden DevTools behoben.
cc @linshunghuang