크롬 개발자 툴을 알아보자

https://developers.google.com/web/tools/chrome-devtools/

 

개발자도구는 마우스 우클릭 > 검사, 단축키 Ctrl+Shift+I 통해 열 수 있습니다.

---

Device Mode

클릭 시 모바일 크기에 따른 화면 확인 가능

 

 

사용자 설정도 추가 가능합니다.

edit > add custom device...

막대바 마우스 우측 클릭 시 미디어 쿼리 소스 확인 가능합니다.

 

 

Elements

 

hide element - visibility:hidden과 같습니다.

scroll into view - 해당 태그로 스크롤 합니다.

 

DOM Breakpoints - break on한 태그들을 확인 가능합니다.

Break on을 설정해두면 자바스크립트 코드가 해당 dom 요소 변화를 줄 때 break가 됩니다.

subtree modifications = 해당 노드, 하위 트리에 변화(추가,삭제 등)가 생기면 break

attribute modifications = 해당 노드의 속성의 변경이 생기면 break

node removal = 해당 노드가 제거되면 break

 

Event Listeners에서 handler 마우스 우측, show function definition 클릭하면 정의된 함수로 이동합니다.

Event Listeners에서 선택된 태그에 바인딩 된 이벤트들을 확인할 수 있습니다.

Ancestors All 체크를 하제하면 해당하는 태그에 대해서만 확인됩니다.

 

style

아이디나 클래스 해당하는 탭 클릭 시 적용된 스타일 확인 가능합니다.

+ 클릭 시 새로운 스타일 룰을 추가해볼 수 있습니다.

+를 길게 누르면 스타일 시트를 선택하여 룰을 추가해 볼 수 있습니다.

 

color에 shift+click시 현재 색을 16진법, RGBA, HSL 형식으로 변경 표현할 수 있습니다.

color의 네모아이콘을 클릭하면 컬러피커로 색상 선택도 가능합니다.

 

색상표 = 페이지 일련의 색 + 머터리얼 디자인 색 + 사용자설정 색

 

sources

test(https://googlechrome.github.io/devtools-samples/debug-js/get-started)

sources > watch에서 console 대신 변수 값 확인 가능합니다.

+를 누른 후에 inputs 추가해보았습니다.

 

breakpoints toolbar

 

1.pause/contine,f8 

평소엔 pause 버튼 상태이나 break point가 잡혀있으면 continue 버튼을 누릅니다.

다음 break point가 잘힐때까지 코드 진행합니다.

 

2.step over,f10

코드 라인 한 스텝씩 진행합니다.

실행라인 내부에서 실행 시에는 함수 안에서 움직이지만, 함수 밖에서 실행 시 함수 내부로 들어가지 않습니다.

 

3.step into,f11

실행 라인이 함수 내부, 외부 상관없이 한 줄씩 실행합니다.

 

4.step out, shift+f11

step into로 들어온 함수를 끝까지 실행하고 밖으로 나와 해당 함수를 실행한 함수로 돌아갑니다.

 

5.toggle breakpoints 

breakpoints 옵션을 끄거나 켤 수 있습니다.

 

6.pause on exception

자바스크립트 예외가 발생하면 해당 위치에 break point를 잡아줍니다.

 

Blackboxing

디버거로 에러 스택 추적 중 불 필요한 라이브러리 코드를 건너뛸 수 있습니다.

제이쿼리를 사용한 자바스크립트 코드 디버깅 시에 app.js만 사용자가 작성하였음에도 Call Stack에 프레임워크 정보가 뜨는 것을 확인할 수 있습니다.

settings>blackboxing>add pattern... 또는 sources에서 해당 프레임워크 검색 후 마우스 오른쪽 버튼 > blackbox script 클릭합니다. 그러면 settings에서 추가된 것이 확인됩니다. 

 

---

Blackboxing 예시

움직이는 객체에 대한 변화를 감지하는 스크립트를 찾아내보겠습니다.

객체에 마우스 우 클릭 Break on > attribute modifications합니다.

태그 옆에 동그라미가 생겼다면 정상적으로 break on이 된 것입니다.

이제 속성이 변하면 break가 됩니다.

 

break가 되면 화면이 정지 되면서 sources 창이 열리게 됩니다.

sources 옆에 생긴 창에서 어떠한 변화가 생겼는지 확인 할 수 있습니다.

자세히보면

DOM Breakpoints에서 내가 break한 태그가 확인가능합니다.

물론 해제도 가능합니다.

해제를 하게되면 태그 옆에 동그라미가 사라집니다.

 

Call Stack

어떤 js가 순서대로 호출되었는지가 확인됩니다.

스크립트를 추적하기 좋습니다.

해당하는 부분들을 눌러보게되면 soures안에 해당 스크립트가 나옵니다.

아래에서 위로 호출해오는 순서입니다.

 

 

debugger; 

 

내가 멈춰서 확인하고 싶은 곳에 debugger; 작성합니다.

저는 클릭할 때 넣었습니다.

 

클릭이벤트가 발생하면 debugger;에 의해서 화면이 멈추게되면서 소스가 확인됩니다.

 

debugger; 가 있는 위치에서 멈춘것이 확인됩니다. 

그러면 옆의 툴을 이용해서 디버깅을 시작하겠습니다.

 

위에 설명한 것을 참고하여 디버깅해봅니다. 

 

밑으로 된 화살표를 누르면서 지나가다 보면 이렇게 옆 쪽에 텍스트가 확인됩니다.

이것은 실제로 진행될 때의 변수 값입니다.

 

근데 이렇게 디버깅하다보면 jquery 파일로 넘어가지는 경우가 종종 있습니다.

jquery를 사용하기 때문입니다.

$(this.left) 이렇게 쓰면 $자체가 jquery이기 때문에 jquery도 디버깅에 포함되게 됩니다.

그래서 디버깅할때는 jquery를 포함시키지 않는 것이 좋습니다.

 

이렇게 마우스 우클릭 > blackbox script 하고 새로고침합니다.

만약 했는데도 계속 나오면 버전이 다른 jquery일 수도 있기 때문에 확인이 필요합니다.

이렇게 blackbox script에서 stop blackboxing으로 바뀌었는데도 계속나오면 설정가서 확인하고 추가합니다.

메뉴 네비에서 메뉴 아이콘을 누른 후에 세팅으로 들어갑니다.

 

 

Blackboxing 탭으로 가서 Add Pattern 버튼 클릭하고 pattern에 jquery를 작성해줍니다.

 

 

추가된 것이 확인됩니다.

새로고침 후 다시 확인해보면 디버깅 시에 jquery 소스가 안뜨는 것을 확인할 수 있습니다.