오늘 Chrome, Firefox 및 (Chromium) Edge에서 제공되는 React Developer Tools의 새로운 릴리스를 발표하게 되어 기쁩니다!

https://reactjs.org/blog/2019/08/15/new-react-devtools.html 

무엇이 바뀌었습니까? 

버전 4에서는 많은 부분이 변경되었습니다! 높은 수준에서 이 새로운 버전은 상당한 성능 향상과 향상된 탐색 환경을 제공해야 합니다. 또한 중첩 된 객체 검사를 포함하여 React Hooks를 완벽하게 지원합니다.

대화식 자습서를 방문하여 새 버전을 시험하거나 데모 비디오 및 자세한 내용에 대한 변경 로그를 확인하십시오.

어떤 버전의 React가 지원됩니까? 

react-dom

• 0-14.x : 지원되지 않음
• 15.x : 지원 (새 구성 요소 필터 기능 제외)
• 16.x : 지원

react-native

• 0-0.61 : 지원되지 않습니다
• 0.62 : 지원됩니다 (0.62가 출시 될 때)

새로운 DevTools는 어떻게 구합니까? 

React DevTools는 Chrome 및 Firefox 용 확장으로 제공됩니다. 이미 확장을 설치 한 경우 다음 몇 시간 내에 자동으로 업데이트 됩니다.

독립형 셸 (예 : React Native 또는 Safari)을 사용하는 경우 NPM에서 새 버전을 설치할 수 있습니다.

npm install -g react-devtools@^4

모든 DOM 요소는 어디로 갔습니까? 

새로운 DevTools는 트리에서 컴포넌트를 필터링하여 깊게 중첩 된 계층 구조를 보다 쉽게 ​​탐색 할 수 있는 방법을 제공합니다. 호스트 노드 (예 : HTML <div>, React Native <View>)는 기본적으로 숨겨져 있지만 이 필터는 비활성화 할 수 있습니다.

이전 버전을 다시 가져 오려면 어떻게 합니까? 

React Native 버전 60 이상을 사용 중인 경우 NPM에서 이전 릴리스의 DevTools를 설치할 수 있습니다.

npm install --dev react-devtools@^3

이전 버전의 React DOM (v0.14 이하)의 경우 소스에서 확장을 빌드해야 합니다.

# Checkout the extension source
git clone https://github.com/facebook/react-devtools

cd react-devtools

# Checkout the previous release branch
git checkout v3

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation