Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Devtools extension does not show elements from local files #16952

Closed
nickserv opened this issue Sep 29, 2019 · 3 comments
Closed

Devtools extension does not show elements from local files #16952

nickserv opened this issue Sep 29, 2019 · 3 comments
Assignees
@bvaughn
Labels
Component: Developer Tools Type: Bug

Comments

@nickserv
Copy link

nickserv commented Sep 29, 2019 •
edited
Loading

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:

  1. Put this in index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16.10.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.10.1/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>
  1. Install React devtools extension and allow access to local file URLS
  2. Open index.html
  3. Open devtools
  4. 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
@bvaughn
Copy link
Contributor

bvaughn commented Sep 29, 2019

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

@linshunghuang
Copy link
Contributor

linshunghuang commented Sep 29, 2019 •
edited
Loading

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?

@linshunghuang linshunghuang mentioned this issue Sep 29, 2019
Merged
@bvaughn bvaughn self-assigned this Sep 29, 2019
@bvaughn
Copy link
Contributor

bvaughn commented Sep 30, 2019

This has been fixed via #16953 and I will release an update today (4.1.3) with the fix!

@bvaughn bvaughn closed this as completed Sep 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bvaughn bvaughn

Labels
Component: Developer Tools Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@bvaughn @nickserv @linshunghuang