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