이 페이지에서는 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 실행 시작하기를 참고하세요.