티스토리 뷰

javascript30

09 - Dev Tools Domination

주먹불끈 2019. 3. 11. 19:05

개요

 

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() 깔끔한 테이블 형태로 보여준다.


 

 

 

 

 

 

 

 

 

 

 

 

 


반응형

'javascript30' 카테고리의 다른 글

11 - Custom Video Player  (0) 2019.03.14
10 - Hold Shift and Check Checkboxes  (0) 2019.03.12
08 - Fun with HTML5 Canvas  (0) 2019.03.11
07 - Array Cardio Day 2  (0) 2019.03.09
06 - Type Ahead  (0) 2019.03.08
반응형
잡학툰 뱃지
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함