React: Ekstensi Devtools tidak menampilkan elemen dari file lokal

Dibuat pada 29 Sep 2019 · 3Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?

Bug

Bagaimana perilaku saat ini?
Saat file lokal dimuat, ekstensi devtools menampilkan panel di devtools, tetapi semua elemen hilang. Tidak ada peringatan atau kesalahan konsol. Semua elemen ditampilkan dengan benar saat menggunakan server, tetapi dokumentasi mengatakan server tidak diperlukan dalam kasus ini.

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal dari masalah tersebut. Tempel tautan ke contoh JSFiddle (https://jsfiddle.net/Luktwrdm/) atau CodeSandbox (https://codesandbox.io/s/new) Anda di bawah ini:

Taruh ini di 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>

Instal ekstensi React devtools dan izinkan akses ke URL file lokal
Buka index.html
Buka devtools
Buka panel komponen

Apa perilaku yang diharapkan?
Elemen Hello ditampilkan dengan pengaturan default, dan Hello dan h1 ditampilkan ketika jenis host tidak disembunyikan dalam pengaturan.

Versi React mana, dan browser / OS mana yang terpengaruh oleh masalah ini?

React / ReactDOM 16.10.1 UMD dari Unpkg CDN
React Developer Tools (ekstensi Chrome) 4.1.2
Chrome 77.0.3865.90
macOS 10.14.6

Developer Tools Bug

Sumber

nickmccurdy

Komentar yang paling membantu

chrome.devtools.inspectedWindow.eval melempar:

DOMException: Gagal mengeksekusi 'postMessage' di 'Window': 'null' asal target tidak valid dalam panggilan ke 'postMessage'.

Sepertinya regresi yang disebabkan oleh # 16900. Mengembalikan komit itu akan memperbaiki DevTools.

bvaughn pada 29 Sep 2019

👍2

Semua 3 komentar

chrome.devtools.inspectedWindow.eval melempar:

DOMException: Gagal mengeksekusi 'postMessage' di 'Window': 'null' asal target tidak valid dalam panggilan ke 'postMessage'.

Sepertinya regresi yang disebabkan oleh # 16900. Mengembalikan komit itu akan memperbaiki DevTools.

bvaughn pada 29 Sep 2019

👍2

Ya pasti disebabkan oleh perubahan itu. Dugaan saya adalah kita perlu mengubah target postMessage dari window.origin menjadi '*' karena origin adalah null untuk file lokal?