React: Расширение Devtools не показывает элементы из локальных файлов

Созданный на 29 сент. 2019 · 3Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?

Ошибка

Каково текущее поведение?
Когда локальный файл загружен, расширение devtools отображает панель в devtools, но все элементы отсутствуют. Предупреждений или ошибок консоли нет. Все элементы отображаются правильно при использовании сервера, но в документации говорится, что сервер в этом случае не нужен.

Если текущее поведение является ошибкой, пожалуйста, предоставьте шаги для воспроизведения и, если возможно, минимальную демонстрацию проблемы. Вставьте ссылку в свой пример JSFiddle (https://jsfiddle.net/Luktwrdm/) или CodeSandbox (https://codesandbox.io/s/new) ниже:

Поместите это в 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>

Установите расширение React devtools и разрешите доступ к URL-адресам локальных файлов
Открыть index.html
Открыть инструменты разработчика
Открыть панель компонентов

Какое поведение ожидается?
Элемент Hello отображается с настройками по умолчанию, и отображаются как Hello, так и h1, если тип хоста не скрыт в настройках.

Какие версии React и какой браузер / ОС подвержены этой проблеме?

React / ReactDOM 16.10.1 UMD из Unpkg CDN
React Developer Tools (расширение Chrome) 4.1.2
Хром 77.0.3865.90
macOS 10.14.6

Developer Tools Bug

Источник

nickmccurdy

Самый полезный комментарий

chrome.devtools.inspectedWindow.eval бросает:

DOMException: не удалось выполнить «postMessage» в «Window»: недопустимый целевой источник «null» при вызове «postMessage».

Похоже на регресс, вызванный # 16900. Отмена этой фиксации исправляет DevTools.

cc @linshunghuang

bvaughn 29 сент. 2019

👍2

Все 3 Комментарий

chrome.devtools.inspectedWindow.eval бросает:

DOMException: не удалось выполнить «postMessage» в «Window»: недопустимый целевой источник «null» при вызове «postMessage».

Похоже на регресс, вызванный # 16900. Отмена этой фиксации исправляет DevTools.

cc @linshunghuang

bvaughn 29 сент. 2019

👍2

Да, определенно вызвано этим изменением. Я предполагаю, что нам нужно изменить цель postMessage с window.origin на '*', потому что origin имеет значение null для локальных файлов?