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.

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

Devtools extension does not show elements from local files #16952

nickmccurdy opened this issue Sep 29, 2019 · 3 comments

Devtools extension does not show elements from local files #16952

nickmccurdy opened this issue Sep 29, 2019 · 3 comments


Copy link

@nickmccurdy nickmccurdy commented Sep 29, 2019

Do you want to request a feature or report a 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 ( or CodeSandbox ( example below:

  1. Put this in index.html
<!DOCTYPE html>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src=""></script>
    <script src=""></script>
    <div id="root"></div>
    <script type="text/babel">
      function HelloWorld() {
        return React.createElement("h1", null, "Hello, world!");
        React.createElement(HelloWorld, null),
  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
Copy link

@bvaughn 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

Copy link

@linshunghuang linshunghuang commented Sep 29, 2019

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?

Copy link

@bvaughn 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 Sep 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants