크롬 개발자 콘솔 기능

Chrome's developer console | 크롬 개발자 콘솔 기능

1.DOM 엘리먼트 선택

제이쿼리가 없어도 개발자 콘솔을 통해서 DOM에서 classs나 ID 속성이 매치되는 엘리먼트를 선택할 수 있습니다. $(‘tagName’) $(‘.class’) $(‘#id’)와 $(‘.class #id’)는 document.querySelector(‘ ‘)와 같다.
이것을 실행하면 매치되는 DOM에서 첫번째 엘리먼트를 리턴한다.

$$(‘tagName’) 또는 $$(‘.class’) 를 사용 할 수도 있는데, 이것은 셀렉터에서 매치되는 모든 DOM 엘리먼트들을 선택한다.
예를들어, $$(‘.className’)은 DOM에서 "className"이 들어간 모든 엘리먼트를 선택한다.
$$(‘.className’)[0]와 $$(‘.className’)[1]은 순서대로 첫번째와 두번째 엘리먼트를 선택한다.

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

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

getEventListeners($(‘selector’)).eventName[0].listener : 특정 이벤트 리스너를 찾을 수 있습니다

3. 이벤트 모니터링

monitorEvents($(‘selector’)) : 셀렉터와 관련된 모든 이벤트를 모니터링 한 후, 이벤트가 실행 되면 콘솔에 로그를 보여줍니다.
monitorEvents($(‘selector’),’eventName’) : 엘리먼트의 특정 이벤트 로그를 보여줍니다. 이벤트 이름을 파라미터로 넘기면 된다.
monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….]) : 여러개의 이벤트 로그를 확인 할 수 있다.
한 개의 이벤트 이름을 파라미터로 넘기는 것 대신, 이벤트 이름으로 구성된 배열을 넘기면 된다.
unmonitorEvents($(‘selector’)) : 콘솔에서 모니터링을 멈추게 된다.

4. 코드 블록 실행 시간 확인

console.time('labelName') : 라벨 이름을 파라미터로 받으면, 타이머가 시작 됩니다
console.timeEnd('labelName') : 라벨 이름을 받아서 특정 라벨과 관련된 타이머를 종료한다.

5. 변수 값을 테이블 형식으로 확인

console.table(variableName) : 변수와 그 모든 프로퍼티를 테이블 형식으로 보여준다

6. DOM 요소 검사

inspect($(‘selector’)) : 셀렉터에 매치되는 엘리먼트를 찾는다. 그리고 크롬 개발자 도구의 엘리먼트(Elements) 탭으로 이동 한다
$0-4: console에서는 마지막으로 불러왔던 요소 5개를 저장해둔다.
$0은 가장 마지막으로 검사한 DOM 엘리먼트를 찾고, $1은 마지막에서 두 번째로 검사한 엘리먼트를 찾는다.

7. 엘리먼트 속성 목록

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

8. 마지막 결과 값 찾기

$_ : 메모리에서 이전 계산의 결과를 리턴한다

9. 함수에 전달된 인수확인

monitor(function) : 지정된 함수가 실행 되었을 때 함수 이름과 인수를 출력해준다.

10. CSS로 출력스타일 변경하기

%c와 css style을 이용하면 출력되는 색이나 글자 크기를 바꿀 수 있다.

THE END

출처 : https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329