09 - Dev Tools Domination

개요

 

console 의 다양한 함수를 써보자.

해보니깐 신기하고 재미나다.

 

Breakpoint 사용해보자

 

1) 만약 버튼을 만들어 두었다면, <F12> Element 탭에서 해당 코드를 우클릭하여

2) Break on >> attribute modification 을 설정해두면

3) 실제로 해당 <p> 를 클릭하였더니 breakpoint 가 먹힌다.

 

 

 

console.log 사용법

 

 

 

1) console.clear() 를 사용하면 그 이전의 출력이 다 지워진다. 2) console.log() 는 일반적 출력 3) formatting 을 하는 두 방법, `` 와 ${} 를 사용하는 방법 추천 4) %c 를 이용해 style 을 넣어줄 수 있다. 5) warning, error, info 등을 먹일 수 있다. - 나중에 이걸로 필터링하여 출력 할 수 있다. 6) assert 는 참이어야 하는 조건을 넣어서, 디버깅용도로 쓸 수 있다.

 

 

1) element 를 console.log() 해주면 그 자체가 출력되고 - console.dir() 해주면 property list 를 쭈욱 다 보여준다. (아래 이미지의 삼각형 클릭으로 확장 가능) 2) 구조체를 하나씩 뿌려줄 수 있지만 - grouping 하여 보여줄 수도 있다. - 특히 groupCollapsed() 를 이용하면 삼각형을 클릭해야만 확장되게, 깔끔하게 보여준다. 3) count ()  명령으로  특정 코드가 몇 번이나 호출되었는지 체크하는데 쓸 수 있다. 4) time 명령으로 특정 명령의 실행 소요시간을 확인 할 수도 있다. 5) table() 은 깔끔한 테이블 형태로 보여준다.