Become a Javascript Console Power User

Chrome, Firefox 에서 Javascript 개발을 하더라도 console 창에서 log(), dir() 만 사용했었다.
위 동영상을 보고 console에서 또 다른 기능 들에 대해서 알게되어 활용 할 수 있다면 javascript 개발을 좀더 손쉽게 할 수 있지 않을까 하는 생각이 들었다.
그래서 정리를 하고 확실히 알아 두기 위해서 Posting을 해볼까 한다.

위 동영상에서 소개 되고 있는 기능들은 목록은 다음과 같다.

  • XHR
  • console.time / timeEnd
  • console.dir() / dir()
  • $o / inspect()
  • $$
  • monitorEvents()
  • keys() / values()
  • copy()
  • super-cool Opera and Firebug
  • more devtools

위 동영상에서 사용되고 있는 소스는 다음과 같다.

HTMLjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href='http://fonts.googleapis.com/css?family=Merriweather|Droid+Sans+Mono&v1' rel='stylesheet' type='text/css'>

<h1>be a console power-user</h1>

<ul>
  <li>XHR
  <li>console.time() / timeEnd()
  <li>console.dir() / dir()
  <li>$0 / inspect()
  <li>$$
  <li>monitorEvents()
  <li>keys()/values()
  <li>copy()
  <li>super-cool Opera and Firebug features
  <li><a href="//code.google.com/chrome/devtools" rel="prerender">more devtools</a>
</ul>
CSSjsFiddle
1
2
3
4
5
6
7
8
9
10
body {
  font-family: Merriweather;
  font-size: 18px
}

textarea {
  width: 100%;
  height: 80px;
  font-family: Droid Sans Mono;
}
JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){


    var xhr = new XMLHttpRequest();
    xhr.open("get", "/?" + Math.random(), true);
    xhr.onload = function(evt){
        txt = document.createElement('textarea');
        document.body.appendChild(txt);
        txt.value = evt.target.response;

    };
    xhr.send(null);

}

addEventListener('click', ajax, false);

XHR

"XHR"

console 창에서 위와 같이 메뉴창을 열어서 Log XMLHttpRequests 를 선택해 두면 XMLHttpRequests가 발생할때 마다 콘솔에 XHLHttpRequest 로그를 표시해준다.

Ajax를 이용해서 개발을 할때 기존에는 Network탭에서 확인하였지만 이렇게 직접 Console에서 바로바로 Ajax 호출을 확인할 수 있어서 개발할때 좋을꺼 같다.

또 다른 사이트 분석을 할때도 어느 시점에 Ajax를 사용하는지 쉽게 볼 수 있다.

console.time() / console.timeEnd()

JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){

    console.time('ajax'); //시작 지점
    var xhr = new XMLHttpRequest();
    xhr.open("get", "/?" + Math.random(), true);
    xhr.onload = function(evt){
        txt = document.createElement('textarea');
        document.body.appendChild(txt);
        txt.value = evt.target.response;
        console.timeEnd('ajax'); // 끝나는 지
    };
    xhr.send(null);

}

addEventListener('click', ajax, false);

Javascript 소스만 위와 같이 변경을 한다.

실행을 해보면 다음과 같은 결과를 console에서 확인 할 수 있다.

"time, timeEnd"

console.time console.timeEnd 는 결과와 같이 시작된 지점을 time() Method 와 끝나는 지점에 timeEnd() method를 써주고 인자 값으로 검사하고자 하는 함수 이름을 넘겨주면 소스코드가 실행된 시간을 화면에 출력해 준다.

최근에 프로젝트를 진행하면서 for 문으로 하는것이 빠를지 jQuery 의 $.each 문으로 하는것이 빠른지 궁금했던적이 있다. 이런 경우 직접 눈으로 확인 할 수 있는 좋은 방법이라고 생각 한다.

console.dir() / dir()

JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){

    var xhr = new XMLHttpRequest();
    xhr.open("get", "/?" + Math.random(), true);
    xhr.onload = function(evt){
        txt = document.createElement('textarea');
        document.body.appendChild(txt);
        txt.value = evt.target.response;
        console.log(txt); //log
        console.dir(txt); //dir
    };
    xhr.send(null);

}

addEventListener('click', ajax, false);

Javascript 소스만 위와 같이 변경을 한다.

실행을 해보면 다음과 같은 결과를 console에서 확인 할 수 있다.

"dir"

위와 같이 log 는 단순하게 인자값으로 넘겨준것을 console 에 반환해서 찍어주고 dir은 인자값으로 넘겨준 값을 자세하게 그 안에 어떤것들이 들어있는지 method, property등 을 보여준다.

HTMLTextAreaElement 앞에 화살표를 눌러보면 아래로 펼쳐 지면서 목록을 쭉 볼수 있다. 나같은 경우는 dir을 지정한 객체가 method를 가지고 있는지 혹은 prototype을 공부할때 prototype 을 만들어서 상속했을때 어떻게 상속이 되는지 이런것을 확인 할때 주로 사용 했었다.

동영상 예제에서 보면 dir()을 사용하는데 이건 소스에 그대로 사용해서 쓰면 오류가 발생한다. 다음과 같은 오류가 발생한다.

Uncaught ReferenceError: txt is not defined

$0 / inspect()

먼저 inspect() method는 console 창에서 inspect() Method를 호출하면 인자값으로 넘겨주 Element를 Elements탭에서 선택된 상태로 표시해준다. 페이지 에서 마우스 오른쪽 버튼을 누르고 “요소 검사” 검사를 통해서 선택하는거와 같은 기능이다.

$0는 inspect() 를 통해서 선택된 기준으로 $0 는 현재 선택된 Element를 나타내고 숫자가 증가하면 이전에 선택했던 Element를 기억하고 있다가 차례대로 반환한다.

$$

동영상에 보면 bling bling function 이라고 부른다. 달러 표시를 그쪽에서는 그렇게 부르는듯 하다. console 창에서 $$ 를 입력해보면 다음과 같은 function 몸체를 볼수 있다. 대략 봤을때 인자 값을 받아서 querySelectorAll Method를 통해서 Element 를 반환해주는 함수 인거 같다. "$$"

예제로 확인해 보자. $$ 함수에 textarea 를 찾아보면 다음과 같이 textarea를 반환해 주는것을 확인 할 수 있다.

"$$"

document 상에 있는 textarea를 배열로 반환해 준다. 현재 페이지에 textarea가 하나밖에 없어서 하나만 나온것이고 li element를 확인해보면 배열로 여러개의 li element를 반환해 주는것을 볼 수 있다.

monitorEvents()

monitorEvents 함수는 인자값으로 받은 Element 에서 발행하는 Event를 모니터링 해주는 함수이다.

예제를 확인해 보자.

"monitorEvents"

위와 같이 monitorEvents() 함수에 인자값으로 $$ 함수를 사용해서 textarea를 넘겨주면 textarea 위에서 발생하는 마우스 이벤트, 키보드 이벤트를 확인 할 수있다. console에 나와 있는 화살표를 눌러서 자세하게 확인 할 수도 있다.

keys() / values()

keys() , values() 함수는 다음 예제와 같이 인자값으로 넘겨준 값이 가지고 있는 모든 key 값과, value값을 console창에 반환해서 보여주는 함수이다.

"keys"

"values"

copy()

동영상에서 보면 알겠지만 copy() 함수는 console에 보여질 내용을 보기 힘들때 반환값을 copy 해서 다른 에디터라던지 등등 옴겨서 볼때 사용하는 함수이다.

예제를 확인해 보면 copy함수를 통해서 keys 값을 복사 하는 것을 확인 할 수있다.

"copy"

super-cool Opera and Firebug

Opera의 Dragonfly

FireFox의 Firebug

이 두가지는 따로 얘기 하지 않고 링크만 걸어두겠다.

more devtools

more devtools 는 Chrome Developer Tools: Console 에서 console에 대한 자세한 내용을 볼 수 있다는 설명입니다.

설명에 보면 Console은 Firebug 의 Command Line API 를 지원한다고 써 있습니다. 이곳에 가면 console에서 사용 할 수있는 API 를 자세하게 확인 할 수 있습니다.

Comments