機能をリクエストしバグを報告しますか？
バグ
現在の動作は何ですか？
ローカルファイルがロードされると、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のどのバージョン、およびどのブラウザ/ OSがこの問題の影響を受けますか？
- UnpkgCDNのReact / ReactDOM 16.10.1 UMD
- React Developer Tools（Chrome拡張機能）4.1.2
- Chrome 77.0.3865.90
- macOS 10.14.6
nickmccurdy
全てのコメント3件
chrome.devtools.inspectedWindow.evalがスローされています：
DOMException：「ウィンドウ」で「postMessage」の実行に失敗しました：「postMessage」の呼び出しでターゲットオリジン「null」が無効です。
＃16900によって引き起こされたリグレッションのように見えます。 そのコミットを元に戻すと、DevToolsが修正されます。
cc @linshunghuang
bvaughn
2019年09月29日
はい、間違いなくその変化によって引き起こされました。 ローカルファイルのoriginがnullであるため、postMessageターゲットをwindow.originから '*'に変更する必要があると思いますか？
linshunghuang
2019年09月29日
これは＃16953で修正されており、本日（4.1.3）この修正を含むアップデートをリリースします。
bvaughn
2019年09月30日
関連する問題
framerate
·
3コメント
zpao
·
3コメント
Prinzhorn
·
3コメント
zpao
·
3コメント
UnbearableBear
·
3コメント
最も参考になるコメント
chrome.devtools.inspectedWindow.evalがスローされています：＃16900によって引き起こされたリグレッションのように見えます。 そのコミットを元に戻すと、DevToolsが修正されます。
cc @linshunghuang