이 페이지는 Cloud Translation API를 통해 번역되었습니다.

콘솔에서 자바스크립트 실행

케이스 바스크

Twitter GitHub 글리치

이 대화형 튜토리얼에서는 Chrome DevTools 콘솔에서 자바스크립트를 실행하는 방법을 보여줍니다. 콘솔에 메시지를 로깅하는 방법은 메시지 로깅 시작하기를 참조하세요. 자바스크립트 코드를 일시중지하고 한 번에 한 줄씩 단계별로 실행하는 방법은 자바스크립트 디버깅 시작하기를 참고하세요.

그림 1. 콘솔.

개요

콘솔은 REPL로서 읽기, 평가, 인쇄, 루프를 의미합니다. 그리고 입력되는 자바스크립트를 읽고 코드를 평가하고 표현식의 결과를 출력한 다음 첫 번째 단계로 루프백합니다.

DevTools 설정

이 튜토리얼은 데모를 열고 모든 워크플로를 직접 시도해 볼 수 있도록 설계되었습니다. 실제로 따라해 보면 나중에 워크플로를 기억할 가능성이 더 큽니다.

Command+Option+J (Mac) 또는 Control+Shift+J (Windows, Linux, ChromeOS)를 눌러 이 페이지에서 바로 콘솔을 엽니다.

그림 2. 이 튜토리얼은 왼쪽이고, 오른쪽은 DevTools입니다.

페이지의 자바스크립트 또는 DOM 보기 및 변경

페이지를 빌드하거나 디버깅할 때 페이지의 모양이나 실행 방식을 변경하기 위해 Console에서 문을 실행하는 것이 유용할 때가 많습니다.

아래 버튼의 텍스트를 확인하세요.
Console에 document.getElementById('hello').textContent = 'Hello, Console!'를 입력한 다음 Enter 키를 눌러 표현식을 평가합니다. 버튼 안의 텍스트가 어떻게 바뀌는지 확인하세요.

그림 3. 위 표현식을 평가한 후 Console이 어떻게 표시되는지 보여줍니다.

평가한 코드 아래에 "Hello, Console!"가 표시됩니다. REPL의 4단계인 읽기, 평가, 인쇄, 루프를 떠올려 보세요. REPL은 코드를 평가한 후 표현식 결과를 출력합니다. 따라서 "Hello, Console!"는 document.getElementById('hello').textContent = 'Hello, Console!'를 평가한 결과여야 합니다.

페이지와 관련이 없는 임의의 자바스크립트 실행

때로는 코드를 테스트하거나 익숙하지 않은 새로운 자바스크립트 기능을 시험해 볼 수 있는 코드 플레이그라운드가 필요할 때가 있습니다. 콘솔은 이러한 종류의 실험을 하기에 안성맞춤인 공간입니다.

콘솔에 5 + 15를 입력합니다. 표현식을 평가하는 데 시간이 너무 오래 걸리지 않는 한 표현식 아래에 결과 20이 표시됩니다.
Enter 키를 눌러 표현식을 평가합니다. Console은 코드 아래에 표현식 결과를 출력합니다. 아래 그림 4는 이 표현식을 평가한 후 콘솔이 어떻게 표시되는지 보여줍니다.
Console에 다음 코드를 입력합니다. 복사하여 붙여넣는 대신 문자 단위로 입력해 보세요.
```
function add(a, b=20) {
  return a + b;
}
```
b=20 문법에 익숙하지 않은 경우 함수 인수의 기본값 정의를 참조하세요.
이제 방금 정의한 함수를 호출합니다.
```
add(25);
```
그림 4. 위 표현식을 평가한 후 Console이 어떻게 표시되는지 보여줍니다.

add(25)는 45로 평가됩니다. add 함수가 두 번째 인수 없이 호출되면 b의 기본값이 20이기 때문입니다.

함수가 반환될 때까지 이 콘솔 세션에서 코드를 실행할 수 없습니다. 시간이 너무 오래 걸리면 작업 관리자를 사용하여 시간이 많이 걸리는 계산을 취소할 수 있습니다. 하지만 이 경우에도 현재 페이지가 실패하고 입력한 모든 데이터가 손실됩니다.

다음 단계

콘솔에서 자바스크립트 실행과 관련된 추가 기능을 살펴보려면 자바스크립트 실행을 참고하세요.

DevTools를 사용하면 실행 도중에 스크립트를 일시중지할 수 있습니다. 일시중지된 상태에서 콘솔을 사용하여 해당 시점에 페이지의 window 또는 DOM를 보고 변경할 수 있습니다. 이렇게 하면 강력한 디버깅 워크플로가 만들어집니다. 대화형 가이드는 자바스크립트 디버깅 시작하기를 참조하세요.

콘솔은 형식 지정자 모음도 지원합니다. 콘솔 메시지의 서식을 지정하고 스타일을 지정하는 모든 방법을 살펴보려면 Console에서 메시지 서식 및 스타일 지정을 참고하세요.

이 외에도 콘솔에는 페이지와 더 쉽게 상호작용할 수 있는 일련의 편의 기능도 있습니다. 예를 들면 다음과 같습니다.

document.querySelector()를 입력하여 요소를 선택하는 대신 $()를 입력할 수 있습니다. 이 구문은 jQuery에서 영감을 얻었지만 실제로 jQuery는 아닙니다. 이는 document.querySelector()의 별칭일 뿐입니다.
debug(function)는 함수의 첫 번째 줄에 중단점을 효과적으로 설정합니다.
keys(object)는 지정된 객체의 키가 포함된 배열을 반환합니다.

모든 편의 함수를 살펴보려면 Console Utilities API 참조를 확인하세요.