console.log(); 외 다양한 디버그 방법

※ 일본의 한 블로그 글을 번역한 포스트입니다. 의역 및 직역, 오역이 있일 수 있으며 내용 오류시 지적해주시면 감사하겠습니다. 

 

javascript로 디버그를 할 때, console.log(); 만을 사용하던 과거의 나를 위해 쓰는 포스트입니다.

 

console.log({변수명});

---

 갑자기 console.log(); 소개하다니라고 생각할 수 있겠지만, 이 방법을 알게 됐을 때 '왜 진작 몰랐을까...' 라고 생각할 정도로 편리했기 때문에 첫 번째로 언급하도록 하겠다.

 다음과 같은 HTML이 있다고 가정하자.

<form>
  <input type="text" value="김철수" id="name">
  <input type="text" value="80살" id="age">
  <input type="text" value="농구" id="sport">
</form>

 각각의 input의 요소와 값을 얻어보자.

let nameForm = document.getElementById('name');
let ageForm = document.getElementById('age');
let sportForm = document.getElementById('sport');

let name = nameForm.value;
let age = ageForm.value;
let sport = sportForm.value;

 위에서 취득된 input 요소의 값을 확인하고자 했을 때, 어떤 input 요소의 값인지를 알 수 있도록 console.log(변수명: ${변수}); 로, 변수 전개를 작성하면 매우 귀찮다.

console.log(`name: ${name}`);
console.log(`age: ${age}`);
console.log(`sport: ${sport}`);

 이렇게 구분해서 적을 필요없이 console.log({변수명}); 으로도 동일한 출력 결과를 낼 수 있다.

console.log({name});
console.log({age});
console.log({sport});

 

 

console.time();

---

 처리에 걸리는 시간을 알고 싶을 경우, 해당 처리가 이뤄지는 곳에 console.time();과 console.timeEnd();로 감싸주면 된다. 타이머 시작부터 흐른 경과시간을 밀리초 단위로 출력해 준다.

console.time();
let input = document.getElementsByClassName('input');
console.log(input)
console.timeEnd();

 

 

console.assert();

---

 첫 번째 인수에 전달된 조건식이 false인 경우, 에러 형식으로 두 번째 인수 내용을 로그에 출력해준다. true인 경우 아무런 동작을 하지 않는다.

const isEven = num => num % 2 === 0

console.assert(isEven(5), '홀수입니다.');
console.assert(isEven(10), '이것은 출력이 안 됩니다.');

 

 

console.table();

---

배열, 오브젝트 내용을 표 형식으로 출력해준다. 대량의 input 요소가 있는 상황에서 1개씩 요소를 확인하고 싶은 경우, 예를 들면 다음과 같은 경우.

<form>
  <input type="text" value="1" class="input">
  <input type="text" value="2" class="input">
  <input type="text" value="3" class="input">
  <input type="text" value="4" class="input">
  <input type="text" value="5" class="input">
  <input type="text" value="6" class="input">
  <input type="text" value="7" class="input">
  <input type="text" value="8" class="input">
  <input type="text" value="9" class="input">
  <input type="text" value="10" class="input">
  <input type="text" value="11" class="input">
  <input type="text" value="12" class="input">
  <input type="text" value="13" class="input">
  <input type="text" value="14" class="input">
  <input type="text" value="15" class="input">
  <input type="text" value="16" class="input">
  <input type="text" value="17" class="input">
  <input type="text" value="18" class="input">
  <input type="text" value="19" class="input">
  <input type="text" value="20" class="input">
</form>

 단순히 아래와 같이 작성하면 보기 힘들게 출력된다.

let input = document.getElementsByClassName('input');
console.log(input)

 보다 보기 좋게 표 형식으로 출력하고 싶은 경우, console.table()을 사용하자.

let input = document.getElementsByClassName('input');
console.table(input)

 모든 내용을 표로 표시하는 것이 아닌, 필요한 요소만을 표 형식으로 보고 싶다면 두 번째 인수에 배열로 지정하면 된다.

let input = document.getElementsByClassName('input');
console.table(input, ["value"])

---

참고자료

https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b