이 페이지에서는 Chrome DevTools 콘솔을 사용하여 웹페이지를 더 쉽게 개발하는 방법을 설명합니다. 콘솔의 두 가지 주요 용도는 로깅된 메시지 보기와 자바스크립트 실행입니다.
기록된 메시지 보기
웹 개발자는 종종 콘솔에 메시지를 기록하여 자바스크립트가 예상대로 작동하는지 확인합니다. 메시지를 로깅하려면 console.log('Hello, Console!')와 같은 표현식을 JavaScript에 삽입합니다. 브라우저가 자바스크립트를 실행하고 이와 같은 표현식을 확인하면 메시지를 콘솔에 로깅해야 한다는 것을 알게 됩니다. 예를 들어 페이지의 HTML 및 자바스크립트를 작성하는 중이라고 가정해 보겠습니다.
<!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. 콘솔 패널
웹 개발자가 메시지를 로그하는 일반적인 이유 2가지는 다음과 같습니다.
- 코드가 올바른 순서로 실행되는지 확인
- 특정 시점의 변수 값 검사
메시지 로깅 시작하기를 참고하여 직접 로깅해 보세요. console 메서드의 전체 목록을 둘러보려면 Console API 참조를 확인하세요. 두 메서드의 주요 차이점은 로깅하는 데이터를 표시하는 방법입니다.
자바스크립트 실행
Console은 REPL이기도 합니다. 콘솔에서 자바스크립트를 실행하여 검사 중인 페이지와 상호작용할 수 있습니다. 예를 들어 그림 2는 DevTools 홈페이지 옆에 있는 콘솔을 보여주고 그림 3은 Console을 사용하여 페이지 제목을 변경한 후의 동일한 페이지를 보여줍니다.
그림 2. DevTools 홈페이지 옆의 Console 패널
그림 3. 콘솔을 사용하여 페이지 제목을 변경합니다.
Console에 페이지의 window에 대한 전체 액세스 권한이 있으므로 Console에서 페이지를 수정할 수 있습니다. DevTools에는 페이지를 더 쉽게 검사할 수 있는 몇 가지 편의 함수가 있습니다. 예를 들어 자바스크립트에 hideModal라는 함수가 포함되어 있다고 가정해 보겠습니다. debug(hideModal)를 실행하면 다음에 호출될 때 hideModal의 첫 번째 줄에서 코드가 일시중지됩니다.
유틸리티 함수의 전체 목록을 보려면 콘솔 유틸리티 API 참조를 확인하세요.
자바스크립트를 실행하면 페이지와 상호작용할 필요가 없습니다. Console을 사용하여 페이지와 관련이 없는 새 코드를 사용해 볼 수 있습니다. 예를 들어 기본 제공 자바스크립트 배열 메서드 map()에 관해 방금 학습하고 이를 실험해 보고자 한다고 가정해 보겠습니다. Console에서 함수를 사용해 볼 수 있습니다.
콘솔에서 자바스크립트를 실행하는 방법을 실습하려면 자바스크립트 실행 시작하기를 참고하세요.