chrome console 기능

1

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

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

2

브라우저 edit

document.body.contentEditable=true

3

이벤트 찾기

var obj = getEventListeners($('selector'))

4

이벤트 모니터링

monitorEvents($(‘selector’))

unmonitorEvents($(‘selector’))

5

타이머

console.time('myTime'); // 타이머(myTime)를 시작한다.

console.timeEnd('myTime'); // 타이머(myTime)을 종료한다.

// 결과: myTime:123.00 ms

6

테이블 형식으로 표현

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}]

console.table(myArray)

7

검사

inspect($(‘selector’))

8

엘리먼트 속성

dir($(‘selector’))

9

이전 실행 결과

_$

출처: https://www.vobour.com/%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EB%AA%A8%EB%A5%BC-%EC%88%98%EB%8F%84-%EC%9E%88%EB%8A%94-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%BD%98%EC%86%94-%EA%B8%B0%EB%8A%A5%EB%93%A4-things-you-p