React: Devtools extension does not show elements from local files

Created on 29 Sep 2019 · 3Comments · Source: facebook/react

Do you want to request a feature or report a bug?

Bug

What is the current behavior?
When a local file is loaded, the devtools extension displays a panel in devtools, but all elements are missing. There are no console warnings or errors. All elements display properly when using a server, but the documentation says a server is not necessary in this case.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Put this 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>

Install React devtools extension and allow access to local file URLS
Open index.html
Open devtools
Open components panel

What is the expected behavior?
Hello element is displayed with default settings, and both Hello and h1 are displayed when the host type is not hidden in settings.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

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

Developer Tools Bug

Source

nickmccurdy

Most helpful comment

chrome.devtools.inspectedWindow.eval is throwing:

DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'.

Looks like a regression caused by #16900. Reverting that commit fixes DevTools.

cc @linshunghuang

bvaughn on 29 Sep 2019

👍2

All 3 comments

chrome.devtools.inspectedWindow.eval is throwing:

DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'.

Looks like a regression caused by #16900. Reverting that commit fixes DevTools.

cc @linshunghuang

bvaughn on 29 Sep 2019

👍2

Yes definitely caused by that change. My guess is we'll need to change the postMessage target from window.origin to '*' because origin is null for local files?