개발자 도구 뜯어먹기 : Console

개발자 도구에서 내 기준 가장 많이 사용하는 탭이 Console이다.

개발하고 있는 내용에서 데이터를 내가 원하는 대로 잘 받아오는지 확인하거나,

여러 가지 디버깅을 할 때 코드 상에서는 알 수 없는 것들을, 브라우저에서 확인할 때 사용하곤 한다.

Console은 디버깅 외에도 다양한 역할을 가지고 있는데 어떤 것들이 있는지 알아보자

 

---

Console은?

Console의 의미는 제어장치를 의미한다.

우리가 평소 console이라고 하면, 게임기 콘솔을 대부분 떠올리게 되는데,

그것도 게임을 제어하고 조작하는 기기기 때문에 얼추 맞는 의미가 되겠다.

단어의 뜻과 개발자 도구에서의 역할을 조합하면 console 탭이 이런 역할을 한다고 생각할 수 있다.

 

웹 페이지를 제어할 수 있는 탭

 

그렇다면 console 탭을 이용해서 웹 페이지를 어떻게 제어할 수 있을지 알아보자.

 

How to use it

console 탭에서 가장 기본적으로 할 수 있는 기능은 자바스크립트 코드를 작성하는 것이다.

변수를 선언하거나, 함수를 선언하거나 등의 자바스크립트로 작성할 수 있는 코드를 사용할 수 있다.

물론 여기에 작성한 것이 실제 코드에 반영되는 것은 아니지만,

elements 탭에서 HTML 코드를 변경하고, CSS를 변경한 것이 화면에 반영됐었던 것처럼

console 탭에서 작성한 코드가 화면에서 반영되기도 한다.

 

단순, 변수나 함수를 작성할 수도 있지만 이벤트 코드를 작성해서

해당 페이지에 관련된 여러 이벤트 함수도 이곳에서 테스트해 볼 수 있다. 

 

728x90

실 개발 사용 예시

// app.js

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json));

 

위에서는 console 탭에서 이루어지는 내용을 봤다면 이번에는 실제 코드에서 사용하는 예시를 보자.

 

우선 내 자바스크립트 파일에 데이터 통신을 하는 로직이 있고,

그 통신을 통해 받아온 데이터를 확인하고 싶다고 가정했을 때,

해당 데이터를 브라우저에 console 탭에 노출하는 메서드가  console.log  다.

 

위의 예시 코드처럼 데이터를 서버에 요청하고,

그에 대한 결과를 클라이언트에서 사용할 수 있는 형식으로 변환한 다음

해당 데이터를 console 탭에 노출시키는 흐름으로 코드가 작성되어 있다.

 

그렇게 작성한 코드의 결과는 console 탭에서 확인할 수 있다.

이 결과를 확인하고 서버에서는 어떻게 데이터를 전달해 주는지 확인할 수 있고,

실제 코드에서 전달받은 데이터를 적절한 위치에 사용할 수 있게 된다.

 

class101 메인 페이지

아무래도 console 탭은 개발자들이 주로 사용하는 부분이다 보니

여러 웹사이트에서 개발자를 타깃 한 메시지도 담아 놓은 것을 볼 수 있었는데

대표적으로 class 101 메인 페이지에서 개발자 도구의 console 탭을 열어보니

개발자 채용 공고 링크를 삽입해 둔 것을 볼 수 있었다.

 

이를 통해 console 탭은 매우 활용도가 높은 탭이라는 것을 알 수 있다.