크롬 개발자 콘솔 기능들

[펌] https://www.vobour.com/book/view/M44A6i977adRR54g2

크롬에는 내장 개발자 툴이 있다. 여기에는 요소(Elements), 네트워크(Network), 와 보안( Security)과 같은 다양한 특징들을 가지고 있다. 오늘은, 자바스크립트(JavaScript) 콘솔만 얘기해보도록 하자.

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

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

DOM 엘리먼트 선택

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

하지만 제이쿼리가 없더라도, 개발자 콘솔을 통해서 이와 같은 작업을 할 수 있다. 

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

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

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

브라우저를 에디터로 활용

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

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

document.body.contentEditable=true 

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

DOM의 요소와 관련된 이벤트 찾기

디버깅 할 때, DOM 엘리먼트의 이벤트를 찾는데 관심이 있을 것이다. 개발자 콘솔은 이것을 찾는데 매우 쉽다. 

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

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

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)은 변수와 그 모든 프로퍼티를 테이블 형식으로 보여준다. 아래처럼 말이다: 

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을 번역한 글입니다. 이 글의 원문은 아래에서 확인 하실 수 있습니다. 전문 번역가가 아니라서 번역이 어색 할 수 있습니다. 지적해주시면 수정 하도록 하겠습니다.