이 페이지에서는 Chrome DevTools Console을 사용하여 웹페이지를 더 쉽게 개발하는 방법을 설명합니다. Console은 크게 기록된 메시지 보기와 JavaScript 실행의 두 가지 용도로 사용됩니다.
기록된 메시지 보기
웹 개발자는 종종 콘솔에 메시지를 기록하여 JavaScript가 예상대로 작동하는지 확인합니다. 메시지를 로깅하려면 console.log('Hello, Console!')과 같은 표현식을 JavaScript에 삽입합니다. 브라우저가 JavaScript를 실행하고 이와 같은 표현식을 보면 콘솔에 메시지를 로깅해야 한다고 인식하게 됩니다. 예를 들어 페이지의 HTML과 JavaScript를 작성하는 중이라고 가정해 보겠습니다.
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
그림 1은 페이지를 로드하고 3초 동안 기다린 후 콘솔의 모습을 보여줍니다. 브라우저가 메시지를 기록하도록 한 코드 줄을 찾아보세요.
그림 1. 콘솔 패널
웹 개발자가 메시지를 기록하는 일반적인 이유는 다음 두 가지입니다.
- 코드가 올바른 순서로 실행되는지 확인
- 특정 시점의 변수 값 검사
로깅을 직접 경험해 보려면 메시지 로깅 시작하기를 참고하세요. console 메서드의 전체 목록을 찾아보려면 Console API 참조를 참고하세요. 두 메서드 간의 주요 차이점은 로깅 중인 데이터를 표시하는 방법입니다.
JavaScript 실행
Console은 REPL이기도 합니다. 콘솔에서 JavaScript를 실행하여 검사 중인 페이지와 상호작용할 수 있습니다. 예를 들어 그림 2는 DevTools 홈페이지 옆에 있는 콘솔을 보여주고 그림 3은 Console을 사용하여 페이지 제목을 변경한 후 같은 페이지를 보여줍니다.
그림 2. DevTools 홈페이지 옆의 Console 패널
그림 3. 콘솔을 사용하여 페이지 제목 변경
Console은 페이지의 window에 대한 전체 액세스 권한을 보유하고 있으므로 Console에서 페이지를 수정할 수 있습니다. DevTools에는 페이지를 더 쉽게 검사할 수 있는 몇 가지 편의 함수가 있습니다. 예를 들어 JavaScript에 hideModal라는 함수가 포함되어 있다고 가정해 보겠습니다. debug(hideModal)를 실행하면 다음에 호출될 때 hideModal의 첫 번째 줄에서 코드가 일시중지됩니다.
유틸리티 함수의 전체 목록을 보려면 콘솔 유틸리티 API 참조를 확인하세요.
자바스크립트를 실행하면 페이지와 상호작용할 필요가 없습니다. 콘솔을 사용하여 페이지와 관련 없는 새 코드를 사용해 볼 수 있습니다. 예를 들어 기본 제공 JavaScript 배열 메서드 map()에 대해 방금 알아본 후 이를 실험해 보겠습니다. 콘솔에서는 함수를 시험해 보기에 좋은 장소입니다.
Console에서 JavaScript를 실행하는 방법을 실습해 보려면 JavaScript 실행 시작하기를 참고하세요.