React.Chrome의 검증 도구로 js에 설치된 프로그램을 확인합니다. (묘기)

오늘 선배 엔지니어한테 리액트를 받았어요.js에서 크롬 검증 도구를 사용하는 검증 방법을 가르쳐줬기 때문에 필기를 하는 김에 Qita에 투고했다.신지현: 감동이야...!!✨)

표시에 필요한 데이터를 가져왔는지 확인하려면 인터럽트를 사용하십시오

이 본가의 사이트는 상당히 이해하기 쉽다!
인터럽트에서 코드 일시 중지
이번에는 제가 돌파점을 사용했어요.
"이 구성 요소에 전달된 posts 데이터에는 무엇이 있습니까?console.log(Posts) 해 봤는데 어느 시기에 얻을 수 있을지 모르겠어요.API 호출이 너무 많은지, 아니면 Reducter로 응답의 배열을 읽는지...👀」
이런 경우.
따라서 Posts가 표시된 Posts를 한 눈에 볼 수 있습니다.js의 maptateToops 부분에서

console.log(Posts)

인터럽트로서 읽어들이기 버튼과 렌더링 전 로드를 클릭하면 로드 후 확인Posts 내용이 로드됩니다.
위의 공식 홈페이지에 기재된 프로그램은 여전히 이렇다
1. [sources] 탭을 클릭
2. 중단점을 배치할 코드 행이 포함된 파일을 엽니다.
3. 대상 코드 행으로 이동
4. 코드 행 왼쪽에는 행 번호 열이 있습니다.열을 클릭합니다.행 번호 열에 파란색 아이콘이 표시됩니다.
응용 프로그램을 표시할 수 없기 때문에😅
프레젠테이션용 프로그램으로 보기로 했습니다.

스크린

잡다.

회색 영역에 Open File이 있는 경우 명령+P에서 파일을 선택합니다.

책갈피

확인하고 싶은 줄을 클릭하면 파란색 표시가 표시됩니다.

확인 1

(애니메이션이 작아졌는데...)
이 상태에서 입력하면 "추가"를 누르면 하위 구성 요소의 프로포즈가 변경되었음을 알 수 있습니다.

팝스 포스트에 아레이가 있는지 확인할 수 있어요.
(참고로 이 배열의 길이는 이미 얻었고, 원래의 배열에 새로 얻은 배열까지😅)
이번에 맵테이트 투 프로포즈에 썼는데 다른 데도 괜찮아요!
다른 건'이벤트 청취자 돌파점','DOM 변경 돌파점'!편하다~!😭✨)

겸사겸사 말씀드리겠습니다.

input 영역 책갈피에서 입력할 때마다pause입니다.

이것은 매우 번거로울 때 오른쪽 상단에 있는'책갈피를 통한 활동'을 설정할 수 있기 때문에 그림과 같은 표시를 클릭하면 파란색 아이콘으로 변할 수 있다.

책갈피를 삭제하려면 Delete 를 마우스 오른쪽 버튼으로 클릭합니다.

업데이트된 k 어셈블리는 React의 DevTools에서 시각적으로 표시됩니다.

React의 Developer Tool에서 오른쪽 위에 있는 기어 플래그를 클릭하면 어떤 상자가 나타납니다.Highlight Updates를 클릭한 상태에서 예를 들어 가져온 후 발언을 누르면 변경된 구성 요소의 테두리만 표시되며 다른 구성 요소에 대한 영향을 시각적으로 볼 수 있습니다.

이번에 제작된 가상 프로그램은 테두리의 색깔을 분별하기 어려워 이 기사를 볼 수 있다.
Qiita: React Developer Tools에서 React가 만든 페이지를 디버깅합니다.

감상

선배가 가르쳐줬을 때 크롬의 편의성에 너무 고마웠어요
이번에는 비망록입니다.