실전 팁

앞에서 다룬 내용 외 실무에서 유용한 팁들을 소개합니다.

요소 관련

DOM 트리에서 선택한 요소들은 전역변수 $0~$4로 참조할 수 있습니다.

가장 최신으로 선택한 요소가 $0이 되고 새 요소가 선택될 때마다 1씩 증가합니다.

DOM 트리에서 요소를 우클릭 후 Store as global variable을 선택하면 해당 요소를 전역변수로 저장할 수 있습니다.

(DOM 트리 뿐만 아니라 콘솔, 디버깅 중에도 요소를 전역변수로 저장할 수 있습니다.)

DOM 트리에서 요소를 우클릭 후 Scroll into view를 선택하면 해당 요소가 뷰포트에 보이도록 스크롤됩니다.

(DOM 트리나 콘솔, 디버깅 중에도 요소에 마우스 우클릭을 해 이용할 수 있습니다.)

콘솔이나 디버깅 중에 요소에 마우스 우클릭을 해 Reveal in Elements panel을 선택하면 해당 요소가 DOM 트리에서 찾아집니다.

콘솔이나 디버깅 중에 요소의 프로퍼티를 보고 싶을 때 console.log를 사용하면 프로퍼티 대신 요소의 문자열이 출력됩니다.

대신 console.dir을 사용하면 요소의 프로퍼티를 볼 수 있습니다.

만약 의도치 않게 요소의 변화가 일어난다면 DOM Breakpoints를 활용해 디버깅할 수 있습니다.

커맨드 메뉴(cmd + shift + p)를 통해 페이지를 전체 또는 부분적으로 캡쳐할 수 있습니다.

커맨드 메뉴를 열고 capture를 입력하면 나오는 4개의 커맨드 중 원하는 기능을 선택합니다.

capture full size screenshot: 페이지 전체를 캡쳐합니다(페이지가 스크롤되어 있을 경우 전체 페이지를 캡쳐합니다).
capture node screenshot: 선택한 요소(노드)를 캡쳐합니다.
capture area screenshot: 선택한 영역을 캡쳐합니다.
capture screenshot: 페이지의 현재 화면을 캡쳐합니다(뷰포트만큼 캡쳐합니다).

사파리의 개발자 도구의 레이어 탭을 통해 페이지 요소들의 z-index를 3d로 확인할 수 있습니다.