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