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

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

Kayce Basques

이 대화형 튜토리얼에서는 Chrome DevTools 콘솔에서 JavaScript를 실행하는 방법을 보여줍니다. 자세한 내용은 메시지 로깅 시작하기에서 콘솔에 메시지를 로깅하는 방법을 알아보세요. 시작하기 JavaScript 디버깅을 통해 JavaScript 코드를 일시 중지하고 한 줄씩 단계별로 실행하는 방법을 알아보세요. 할 수 있습니다.

그림 1. 콘솔.

개요

콘솔은 REPL(읽기, 평가, 인쇄, 루프)의 약자입니다. 이 함수는 코드를 평가하고, 코드의 결과를 출력하는 expression을 사용하여 첫 번째 단계로 다시 루프백합니다.

DevTools 설정

이 튜토리얼은 데모를 열고 모든 워크플로를 직접 사용해 볼 수 있도록 제작되었습니다. 날짜 나중에 워크플로를 기억할 가능성이 더 높아집니다.

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

그림 2. 왼쪽에는 이 튜토리얼, 오른쪽에는 DevTools가 있습니다.

페이지의 JavaScript 또는 DOM 보기 및 변경

페이지를 빌드하거나 디버깅할 때 콘솔에서 문을 실행하여 페이지가 표시되는 방식을 변경할 수 있습니다.

아래 버튼의 텍스트를 확인하세요.
콘솔에 document.getElementById('hello').textContent = 'Hello, Console!'을 입력하고 Enter 키를 눌러 표현식을 평가합니다. 버튼 내부의 텍스트가 어떻게 변경되는지 확인합니다.

그림 3. 위의 표현식을 평가한 후 콘솔의 모습

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

페이지와 관련이 없는 임의의 JavaScript 실행

어떤 경우에는 코드를 테스트하거나 새로운 JavaScript를 사용해 볼 수 있는 코드 플레이그라운드만 원할 때가 있습니다. 기능을 사용할 수 있습니다. 콘솔은 이러한 실험을 하기에 완벽한 공간입니다.

콘솔에 5 + 15를 입력합니다. 결과 20이 표현식 아래에 표시됩니다. (표현식을 평가하는 데 시간이 너무 오래 걸리는 경우 제외).
표현식을 평가하려면 Enter 키를 누릅니다. 콘솔에서 인쇄 코드 아래 표현식의 결과와 일치해야 합니다. 아래 그림 4는 Console이 살펴 보겠습니다.
콘솔에 다음 코드를 입력합니다. 그보다는 한 글자씩 입력해 보세요. 복사해서 붙여넣는 것보다 더 쉽습니다.
```
function add(a, b=20) {
  return a + b;
}
```
b=20에 익숙하지 않은 경우 함수 인수의 기본값 정의를 참고하세요. 구문을 사용합니다
이제 방금 정의한 함수를 호출합니다.
```
add(25);
```
그림 4. 위의 표현식을 평가한 후 Console이 표시되는 방식

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

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

다음 단계

Console에서 JavaScript를 실행하는 것과 관련된 더 많은 기능을 알아보려면 JavaScript 실행을 참고하세요.

DevTools를 사용하면 실행 중에 스크립트를 일시 중지할 수 있습니다. 일시중지된 동안에도 콘솔을 사용하여 해당 시점에 페이지의 window 또는 DOM를 확인하고 변경합니다. 이렇게 하면 를 사용하는 것이 좋습니다. 자세한 내용은 JavaScript 디버깅 시작하기를 참고하세요. 튜토리얼을 확인하세요.

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

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

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

편의 기능을 모두 살펴보려면 콘솔 유틸리티 API 참조를 확인하세요.