useCodeusecode logo

당신이 모를 수도 있는 크롬 개발자 콘솔 기능들

November 05, 2016

원문: Things you probably didn’t know you could do with Chrome’s Developer Console

presentation

크롬 브라우저에는 기본적으로 개발자 툴이 있다. 이 툴은 요소(Elements), 네트워크(Network), 보안(Security)과 같은 다양한 기능들이 있다. 오늘은, 자바스크립트(JavaScript) 콘솔만 얘기해보도록 하자.

처음 코딩을 시작했을 때, 나는 자바스크립트 콘솔을 단순히 서버에서 오는 응답(response) 값이나 변수 같은 것들의 로그를 보는 용도 정도로만 사용했다. 하지만, 여러 튜토리얼의 도움으로, 크롬 개발자 콘솔에서 내가 상상했던 것 이상으로 많은 것을 할 수 있다는 것을 알게 됐다.

앞으로 얘기할 것들은 실제 유용하게 활용 할 수 있는 것들이다. 만약, 지금 이 글을 데스크톱 크롬이나 다른 브라우저에서 읽고 있다면, 아래 기능들을 바로 실행해서 확인해 볼 수 있다.

DOM 엘리먼트 선택

jQuery에 익숙 하다면 $('.class')$('#id') 셀렉터가 얼마나 중요한지 알 것이다. 이건 DOM에서 class나 ID 속성이 매치되는 엘리먼트를 선택한다.

하지만 jQuery가 없더라도, 개발자 콘솔을 통해서 비슷하게 사용 할 수 있다.

$('tagName'), $('.class'), $('#id')$('.class #id')document.querySelector(' ')와 같다. 이것을 실행하면 매치되는 DOM에서 첫 번째 엘리먼트를 리턴한다.

$$('tagName') 또는 $$('.class') 를 사용 할 수도 있는데, 이것은 셀렉터에서 매치되는 모든 DOM 엘리먼트들을 선택한다. 달러 싸인이 두 개인 것을 눈여겨보자. 이렇게 선택된 배열에서 특정 포지션에 있는 엘리먼트를 선택 할 수도 있다.

예를 들어, $$('.className')은 DOM에서 “className”이 들어간 모든 엘리먼트를 선택한다. $$('.className')[0]$$('.className')[1]은 순서대로 첫 번째와 두 번째 엘리먼트를 선택한다.

Chrome Developer Console

브라우저를 에디터로 활용

브라우저에서 소스를 수정 할 수 있다고 생각해본 적이 있나? 대답은 “할 수 있다”이다. 브라우저를 텍스트 에디터처럼 사용 할 수 있다. DOM 어디에서나 텍스트를 넣거나 뺄 수 있다.

더는 엘리먼트를 찾아서 HTML을 수정할 필요가 없다. 대신에, 개발자 콘솔에서 아래를 입력해보자.

document.body.contentEditable = true;

이렇게 하면 HTML 콘텐츠를 수정 할 수 있는 상태로 만든다. 이제 DOM에서 거의 모든 것을 수정 할 수 있게 됐다.

DOM 엘리먼트 이벤트 찾기

디버깅할 때, DOM 엘리먼트의 이벤트를 찾고 싶을 때가 있을 것이다. 개발자 콘솔에서 쉽게 확인 할 수 있다.

getEventListeners($('selector'))는 그 엘리먼트에 모든 이벤트를 포함한 객체 배열(array of objects)을 리턴한다. 객체에 어떤 이벤트가 있는지 확인 하고 싶다면 그 객체를 확장해서 볼 수 있다.

getEventListeners on console

특정 이벤트 리스너를 찾고 싶다면, 이렇게 하면 된다.

getEventListeners($('selector')).eventName[0].listener;

이렇게 하면 특정 이벤트와 관련된 리스너를 보여준다. eventName[0]은 특정 모든 이벤트가 담겨 있는 배열이다. 예를 들어,

getEventListeners($('firstName')).click[0].listener;

이것은 ID가 ‘firstName’인 엘리먼트의 클릭 이벤트 리스너를 보여 줄 것이다.

이벤트 모니터링

DOM에서 이벤트 실행 중 특정 엘리먼트의 이벤트를 모니터링하고 싶다면 이것 역시 콘솔에서 확인 할 수 있다. 특정 이벤트 또는 모든 이벤트를 모니터링할 수 있는 여러 가지 명령어들이 있다.

  • monitorEvents($('selector'))는 셀렉터와 관련된 모든 이벤트를 모니터링 한 후, 이벤트가 실행되면 콘솔에 로그를 보여준다. 예를 들어, monitorEvents($('#firstName'))를 실행하면 ID가 'firstName'인 엘리먼트의 모든 이벤트 로그를 보여준다.
  • monitorEvents($('selector'),'eventName')은 엘리먼트의 특정 이벤트 로그를 보여준다. 이벤트 이름을 파라미터로 넘기면 된다. 이렇게 하면 특정 엘리먼트의 특정 이벤트만의 로그를 보여준다. 예를 들어, monitorEvents($('#firstName'),'click')는 ID가 'firstName'인 엘리먼트의 클릭 이벤트 로그만을 보여준다.
  • monitorEvents($('selector'),['eventName1','eventName3',....])는 여러 개의 이벤트 로그를 확인 할 수 있다. 한 개의 이벤트 이름을 파라미터로 넘기는 것 대신, 이벤트 이름으로 구성된 배열을 넘기면 된다. 예를 들어, monitorEvents($('#firstName'),['click','focus'])는 ID가 ‘firstName’인 엘리먼트의 클릭과 포커스(foccus)이벤트 로그를 보여준다.
  • unmonitorEvents(\$('selector')): 이렇게하면 콘솔에서 모니터링을 멈춘다.

코드 블록 실행 시간 확인

자바스크립트 콘솔은 console.time('labelName')이라는 필수 기능이 있다. 라벨 이름을 파라미터로 받으면, 타이머가 시작된다. console.timeEnd('labelName')이라는 또다른 필수 기능이 있는데, 라벨 이름을 받아서 특정 라벨과 관련된 타이머를 종료한다.

예를 들어,

console.time('myTime'); //Starts the timer with label - myTime
console.time('myTime'); // 타이머(myTime)를 시작한다.
console.timeEnd('myTime'); // 타이머(myTime)을 종료한다.
// 결과: myTime:123.00 ms

위의 두 줄의 코드는 타이머의 시작과 종료 시간을 알려 준다.

우리는 이것을 코드 블록을 실행하는 데 걸리는 시간을 계산하는 것으로 사용 할 수 있다.

예를 들어, 반복문이 실행되는 시간을 체크하고 싶다고 해보자. 아래처럼 사용 할 수 있다.

console.time('myTime'); //Starts the timer with label - myTime
for(var i=0; i < 100000; i++){
  2+4+5;
}
console.timeEnd('mytime'); //Ends the timer with Label - myTime
//Output - myTime:12345.00 ms

변수를 테이블 형식으로 확인

아래와 같은 배열이 있다고 생각해보자:

var myArray = [
  { a: 1, b: 2, c: 3 },
  { a: 1, b: 2, c: 3, d: 4 },
  { k: 11, f: 22 },
  { a: 1, b: 2, c: 3 },
];

콘솔에 변수 이름(myArray)을 입력하면, 변수 값을 확인 할 수 있다. 이것은 매우 유용한데, 배열 안에 객체 값을 확장하여 볼 수 있기 때문이다.

하지만 프로퍼티 수가 증가하면 이해하기 어려워진다. 그래서, 변수를 더 명확히 확인하기 위해서 이것을 테이블 형식으로 표시할 수 있다.

console.table(variableName)은 변수와 그 모든 프로퍼티를 테이블 형식으로 보여준다. 아래처럼 말이다.

console.table

DOM 엘리먼트 검사

콘솔에서 엘리먼트를 직접 검사(inspect) 할 수 있다:

  • inspect($('selector'))는 셀렉터에 매치되는 엘리먼트를 찾는다. 그리고 크롬 개발자 도구의 엘리먼트(Elements) 탭으로 이동한다. 예를 들어, inspect($('#firstName'))는 DOM에서 ID가 ‘firstName’인 엘리먼트를 찾고, inspect($('a')[3])는 4번째 앵커(anchor) 엘리먼트를 찾는다.
  • $0, $1, $2, 등은 최근 검사한 엘리먼트를 찾는다. 예를 들어, $0은 가장 마지막으로 검사한 DOM 엘리먼트를 찾고, $1은 마지막에서 두 번째로 검사한 엘리먼트를 찾는다.

엘리먼트 속성 목록

엘리먼트의 모든 프로퍼티 목록을 확인하는 것도 콘솔에서 바로 할 수 있다.

dir($('selector'))은 DOM과 관련된 모든 프로퍼티를 포함된 객체를 리턴한다.

마지막 결과 값 찾기

콘솔을 계산기로도 사용 할 수 있다. 다음은 이전 계산 결과를 검색하는 방법이다.

$_

다음의 예제를 확인해보자.

2 + 3 + 4;
9; //- 갑은 9가 된다.
$_;
9; // 이전 결과를 보여준다.
$_ * $_;
81; // 이전 값이 9이기 때문에 81이 된다.
Math.sqrt($_);
9; // 이전 값이 81이기 때문에 9가 된다.
$_;
9; // 이전 값인 9가 된다.

콘솔과 메모리 클리어

콘솔과 메모리를 클리어하고 싶다면, 다음을 입력하기만 하면 된다.

clear()

지금까지 보여준 예제는 크롬의 콘솔로 할 수 있는 몇 가지 예제에 불과하다. 이런 팁이 도움이 되었으면 좋겠다.

이 글은 Swagat Kumar Swain의 Things you probably didn’t know you could do with Chrome’s Developer Console을 번역한 글입니다. 전문 번역가가 아니라서 번역이 어색 할 수 있습니다. 지적해주시면 수정하도록 하겠습니다.