기타

그 외 콘솔에서 유용한 기능들에 대해 살펴보겠습니다.

REPL (Read-Eval-Print Loop)

콘솔은 REPL(Read-Eval-Print Loop) 환경을 제공합니다. REPL은 사용자가 입력한 코드를 읽고, 평가하고, 출력하며, 반복하는 환경을 말합니다. 이를 통해 사용자는 코드를 입력하고 즉시 결과를 확인할 수 있습니다.

단축키로 콘솔 포커스하기

개발자도구의 여러 기능을 쓰다 콘솔에 코드를 입력하고 싶을 때가 있습니다. 그럴 때 ctrl + ` 를 눌러보세요. 바로 콘솔이 포커스가 됩니다. 🥳

화살표 위아래로 이전 실행 코드 불러오기

우리가 터미널을 사용할 때 화살표 위아래를 눌러 이전에 실행한 명령어를 불러오는 것을 기억하시나요? 콘솔에서도 이전에 실행한 코드를 불러올 수 있습니다. 화살표 위아래를 눌러보세요. 이전에 실행한 코드가 순서대로 불러집니다.

다중 라인 입력하기

콘솔에서 다중 라인 코드를 입력하고 싶을 때가 있습니다. 이때는 shift + enter를 누르면 됩니다.

콘솔 내용 지우기

콘솔에 출력된 내용을 지우고 싶을 때는 ctrl + l을 누르면 됩니다.

async 함수를 선언하지 않고 await 바로 사용하기

콘솔은 async 함수를 선언하지 않고 await를 사용할 수 있는 Top-level await을 지원합니다. 이를 통해 비동기 코드를 더 쉽게 실행할 수 있습니다.

// async 함수를 선언하고 await를 사용하는 예시
async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  console.log(data);
}
fetchData();

// async 함수를 선언하지 않고 await를 사용하는 예시
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);

유틸리티 API

크롬 개발자도구에는 개발에 유용한 유틸리티 API가 있습니다.

오늘은 제가 자주 사용하는 일부 유틸리티들만 알아보겠습니다. 전체 유틸리티 API 목록은 여기에서 확인할 수 있습니다.

요소 패널 > DOM 트리에서 선택했던 요소들을 `$0`~`$4`로 참조하기

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

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

요소에 발생하는 이벤트를 `monitorEvents`로 파악하기

monitorEvents를 사용해 요소에 이벤트가 발생할 때마다 콘솔에 이벤트 객체를 출력시킬 수 있습니다. addEventListener와 달리 별도의 이벤트리스너를 등록하지 않으며, 하나의 이벤트 뿐만 아니라 모든 이벤트를 모니터링할 수 있습니다.

// 모든 이벤트를 모니터링
monitorEvents(window);
// 하나의 이벤트를 모니터링
monitorEvents(window, 'click');
// 여러개의 이벤트를 모니터링
monitorEvents(window, ['click', 'scroll']);

또는 아래에 있는 미리 정의된 이벤트 그룹명을 통해 연관된 이벤트들을 모니터링할 수 있습니다.

mouse: mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel
key: keydown, keyup, keypress, textInput
touch: touchstart, touchmove, touchend, touchcancel
control: resize, scroll, zoom, focus, blur, select, change, submit, reset

모니터링을 중지하려면 unmonitorEvents를 사용합니다. 사용법은 monitorEvents와 동일합니다.

// 모든 이벤트를 모니터링
unmonitorEvents(window);
// 하나의 이벤트를 모니터링
unmonitorEvents(window, 'click');
// 여러개의 이벤트를 모니터링
unmonitorEvents(window, ['click', 'scroll']);

특정 표현식의 결과를 실시간으로 볼 수 있는 Live Expression

Live Expression은 특정 표현식의 결과를 실시간으로 확인할 수 있는 기능입니다.

Live Expression 아이콘을 클릭하면 표현식을 입력할 수 있는 입력창이 나타납니다. 여기에 표현식을 입력하면 해당 표현식을 평가하고 결과를 실시간으로 확인할 수 있습니다. 여러개의 표현식을 등록할 수 있습니다.

설정

콘솔은 우측 상단에 있는 설정 아이콘을 통해 여러 가지 설정을 변경할 수 있습니다. 아래 화면은 콘솔의 기본 설정 값으로 여기서 몇가지 추가로 설정하면 좋은 것들을 소개합니다.

Preserve log: 페이지 이동이나 새로고침 시 콘솔에 출력된 내용들을 지우지 않고 유지합니다. 페이지 이동이나 새로고침 전후의 메시지들을 함께 보고 싶을 때 유용합니다.
Log XMLHttpRequests: XHR이나 fetch 내역을 출력합니다. 네트워크 요청과 다른 메시지들의 순서와 관계를 파악할 때 유용합니다.

기타