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와 어떤 브라우저 / OS가이 문제의 영향을 받습니까?

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

네, 확실히 그 변화 때문입니다. 내 생각 엔 origin이 로컬 파일에 대해 null이기 때문에 postMessage 대상을 window.origin에서 '*'로 변경해야할까요?

linshunghuang 에 2019년 09월 29일

이 문제는 # 16953을 통해 수정되었으며 오늘 (4.1.3) 수정 된 업데이트를 릴리스 할 것입니다!

bvaughn 에 2019년 09월 30일

🎉1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: Devtools 확장은 로컬 파일의 요소를 표시하지 않습니다.

가장 유용한 댓글

모든 3 댓글

관련 문제