소스에서 변수 조사하기

Chrome DevTools를 사용하면 애플리케이션 전체에서 여러 변수를 쉽게 볼 수 있습니다. 소스 내에서 변수를 관찰하면 콘솔을 사용하지 않고 코드 개선에 집중할 수 있습니다.

소스 패널은 애플리케이션 내에서 변수를 확인하는 기능을 제공합니다. 디버거 사이드바의 보기 섹션에 있습니다. 이 기능을 활용하면 객체를 콘솔에 반복적으로 로깅할 필요가 없습니다.

변수 추가

보기 목록에 변수를 추가하려면 섹션 제목 오른쪽에 있는 추가 아이콘을 사용합니다. 그러면 감시할 변수 이름을 제공하는 인라인 입력란이 열립니다. 입력이 완료되면 Enter 키를 눌러 목록에 추가합니다.

추가된 변수의 현재 값이 워처에 표시됩니다. 변수가 설정되지 않았거나 찾을 수 없는 경우 값이 표시됩니다.

변수 업데이트

변수 값은 애플리케이션이 계속 작동하면서 변경될 수 있습니다. 실행을 단계별로 진행하지 않는 한 보기 목록은 변수의 실시간 뷰가 아닙니다. breakpoints을 사용하여 실행을 단계별로 진행하면 감시 값이 자동으로 업데이트됩니다. 목록의 변수를 수동으로 다시 확인하려면 섹션 제목 오른쪽에 있는 새로고침 버튼을 누릅니다.

새로고침이 요청되면 현재 애플리케이션 상태가 다시 확인됩니다. 감시하는 모든 항목이 현재 값으로 업데이트됩니다.

변수 삭제

더 빠르게 작업할 수 있도록 확인하는 항목을 최소화하려면 보기 목록에서 변수를 삭제해야 할 수 있습니다. 변수 위로 마우스를 가져간 다음 오른쪽에 표시되는 삭제 아이콘을 클릭하면 됩니다.