# Chrome 개발자도구 (Command Line API & Console API )

# Chrome 개발자도구 (Command Line API & Console API )

by jihoon kim

HTML

<h1>Chrome 개발자도구 (Command Line API  & Console API )
</h1>

<pre>
Console API 참조                : https://developers.google.com/web/tools/chrome-devtools/console/console-reference?hl=ko
크롬 브라우저의 console 사용법  : https://thinkingcookie.wordpress.com/2012/08/31/%ED%81%AC%EB%A1%AC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-console-%EC%82%AC%EC%9A%A9%EB%B2%95/
MDN Console                     : https://developer.mozilla.org/en-US/docs/Web/API/Console
Daylogs/Javascript 크롬 개발자 도구 활용 팁(Tips for chrome developer tools) : http://ohgyun.com/334

# Command Line API 및 Console API
    1. Command Line API 및 Console API 란?
    2. 개발자도구 실행방법
    3. Command Line API 
    4. Console API
    5. 예제


# 크롬 브라우저에서 제공하는 개발자 디버깅 도구중 
     - Command Line API : $_ , $0~$4, $(selector) , $$(selector) , $x(path) …..

     - Console API : console.info(), console.assert(), 

# 개발자도구 실행방법
    - F12 Or Ctrl+Shif+I
    - Ctrl + Shift + C
    - 파일메뉴- 도구 더보기- 개발자 도구
    - Chrome Developer Tools Command Palette : CTRL + SHIFT + P

# 단축키
    - 개발자 도구 내 탭 전환 : Ctrl + [ or ]
    - 개발자 도구에서 콘솔 열고 닫기 : esc

# Dom탐색
  - Ctrl + Shift + C
  - 개발자도구 좌측최상단 마우스 포인터 클릭(Select an element in the page to inspect it ).

# Command Line API
    1. $_                           : 가장 최근에 평가된 식의 값을 반환합니다.
        ex)
            > 2+2
            < 4
            > $_
            < 4
        ex)
            > ["john", "paul", "george", "ringo"]
            > $_.length
            < 4

    2. $0~$4                        : Elements 패널에서 검사한 마지막 다섯 DOM 요소
                                      또는 Profiles 패널에서 선택한 마지막 다섯 자바스크립트 힙 객체에 대한 기록 참조로 작동합니다.
                                      $0이 가장 최근에 선택한 Element

     ex)
        - Elements탭에서 body선택.
        > $0
        > <body marginwidth="0" marginheight="0">...</body>

    3. $(selector)                  :   document.querySelector()      : return element
                                        $를 사용하는 jQuery와 같은 라이브러리를 사용하는 경우 이 기능을 덮어씁니다.
        ex)
           >...