React: Devtools扩展不显示本地文件中的元素

创建于 2019-09-29 · 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
打开devtools
打开组件面板

预期的行为是什么？
将使用默认设置显示Hello元素，并且在设置中未隐藏主机类型时将同时显示Hello和h1。

哪个版本的React，以及哪个浏览器/操作系统受此问题影响？

Unpkg CDN的React / ReactDOM 16.10.1 UMD
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”：在对“ postMessage”的调用中无效的目标源“ null”。

看起来像是由＃16900引起的回归。恢复该提交可修复DevTools。

cc @linshunghuang

bvaughn 于 2019-09-29

👍2

所有3条评论

chrome.devtools.inspectedWindow.eval抛出：

DOMException：无法在“窗口”上执行“ postMessage”：在对“ postMessage”的调用中无效的目标源“ null”。

看起来像是由＃16900引起的回归。恢复该提交可修复DevTools。

cc @linshunghuang

bvaughn 于 2019-09-29

👍2

是的，肯定是这种变化造成的。我的猜测是我们需要将postMessage目标从window.origin更改为“ *”，因为本地文件的origin为null？

linshunghuang 于 2019-09-29

此问题已通过＃16953修复，我将在今天（4.1.3）中发布包含此修复程序的更新！

bvaughn 于 2019-09-30

🎉1

此页面是否有帮助？

0 / 5 - 0 等级

React: Devtools扩展不显示本地文件中的元素

最有用的评论

所有3条评论

相关问题