Chrome DevTools를 사용하면 애플리케이션 전체에 걸쳐 여러 변수를 쉽게 확인할 수 있습니다. 소스 내에서 변수를 살펴보면 콘솔에서 벗어나 코드를 개선하는 데 집중할 수 있습니다.
Sources 패널은 애플리케이션 내의 변수를 감시하는 기능을 제공합니다. 디버거 사이드바의 보기 섹션에 있습니다. 이 기능을 활용하면 콘솔에 객체를 반복적으로 로깅할 필요가 없습니다.
변수 추가
조사 목록에 변수를 추가하려면 섹션 제목 오른쪽에 있는 추가 아이콘을 사용합니다. 그러면 관찰할 변수 이름을 제공하는 인라인 입력이 열립니다. 작성이 완료되면 Enter 키를 눌러 목록에 추가합니다.
변수가 추가되면 감시자는 변수의 현재 값을 표시합니다. 변수가 설정되지 않았거나 변수를 찾을 수 없으면 값에
변수 업데이트
변수 값은 애플리케이션이 계속 작동함에 따라 변경될 수 있습니다. 실행을 단계별로 실행하지 않는 한 감시 목록은 변수의 실시간 뷰가 아닙니다. 중단점을 사용하여 실행을 단계별로 진행하는 경우 감시 값이 자동으로 업데이트됩니다. 목록에서 변수를 수동으로 다시 확인하려면 섹션 제목 오른쪽에 있는 새로고침 버튼을 누르세요.
새로고침이 요청되면 현재 애플리케이션 상태가 다시 확인됩니다. 모든 감시 항목은 현재 값으로 업데이트됩니다.
변수 삭제
더 빠른 작업을 위해 보고 있는 항목을 최소한으로 유지하려면 감시 목록에서 변수를 삭제해야 할 수 있습니다. 변수에 마우스를 가져간 후 오른쪽에 표시되는 삭제 아이콘을 클릭하면 됩니다.
