chrome DevTools 200% 활용하기

개발자라면 가장 많이 사용하는 것 중 하나가 chrome 개발자 도구이다.

 

개인적으로 개발자도구의 활용도에 따라 개발의 효율, 웹 페이지의 성능까지 큰 차이를 보일 것이라고 생각한다. 그래서 이 글을 준비했고, 글을 준비하는 동안 정말 많은 기능이 있다는 것을 알게 되었다. 이제까지 단순 debugger 만 찍고, value 값만 확인하는 용도로만 사용했다는 것에 아쉬움을 표하고 싶다.

 

가장 기본적인 기능에 대해서는 생략하고, 처음 접해본 기능 혹은 중요한 기능이라고 판단하는 것을 기준으로 글을 작성할 것이다. 

( 모든 내용을 다루기엔 내용이 너무 많다고 생각이 든다. )

 

INDEX

1. Element

2. Console

3. Sources

4. Network

5. Performance

6. Memory

7. Security

8. Lighthouse

 

1. Element

Element 탭에서는 html에 대한 값을 확인하고, 변경하고 분석하는 용도로 많이 사용이 된다. 기능에 대해서 하나씩 살펴보자.

모달창에 대해 하나씩 살펴보자.

  1-1 Add Attribute, edit Attribute, edit as HTML

해당 태그를 손쉽게 추가하고 수정하는 데에 이용이된다. editor에서 직접 수정하면 파싱이나 리로딩이 필요한 경우가 있지만, 개발자 도구를 통해 고치면 바로 바로 변경하고 확인 할 수 있어 시간이 절약된다.

 

 1-2 duplicate element, delete element

해당 태그를 복제하거나 삭제하는 데에 이용이 된다. 

여기서 다른 기능도 같이 설명한다면, 

여기서 우측 상단 :hov를 활성화 시키고 h 키보드를 클릭하면 해당 요소가 hide된다.

 

1-3 Copy

copy에서도 여러 copy가 존재한다. 유용할만한 것을 소개해보면, 

이 세가지가 되지 않을가 생각이든다. 선택한 요소에 대한 path, style을 손쉽게 copy해서 가져올 수 있다. 

ex ) 

- Copy selector 

#main-content > app-template-list > ion-content > div:nth-child(1) > div > div

- Copy JS path

document.querySelector("#main-content > app-template-list > ion-content > div:nth-child(1) > div > div")

- Copy styles

text-align: left;
    --side-width: 100%;
    --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-

 

1-4 break on

 break on에서는 html의 요소가 변경될 때 break 가 걸린다.
옵션

 - 하위 태그가 변경될 때

 - 속성이 변경될 때

 - node가 지워질 때

 

이 이외에도 노드 캡처, 노드 temp에 저장 등의 기능은 있지만 이 부분은 생략한다.

 

추가적으로 Element탭에서 가장 좋다고 생각하는 기능은 styles 탭에서

컬러 팔레트, 그림자, 박스 border 처리 등에 대한 ui 제공이다. 

 위의 캡처본과 같이 그림자의 값을 줄 때, 그림자 위치를 코드로 조정하는 것이 아니라 ui를 통해 조절하고 코드에 넣는 방식으로 할 수 있게 제공해준다. 엄청 간편하다.

또한, 컬러에서도 팔레트 제공되는 것 뿐만 아니라, 컬러 픽커가 있어 해당 되는 페이지에서 원하는 색을 손쉽게 추출할 수 있다.

 

2. Console

console은 크롬 브라우저 v8엔진을 통해 손쉽게 스크립트를 사용할 수 있는 공간이다. 

간단하지만, 예시를 보면, 변수를 할당하고, 계산을 할 수 있다. break point와 함께 이를 이용하면 더욱 개발하는 데에 있어 좋을 것이다.

추가적으로 위 캡처에서 보이듯이 $_ 은 마지막 값을 의미한다.

 

3. sources

sources tab에서는 js 파일을 확인하고 값을 분석하는 데에 이용이된다. 

debugger를 통해 break 상태를 만들어 놓았다. 

break 상태에서 이제 값이 어떻게 들어오는지 callstack이 어떻게 쌓이고 있는지 등을 파악할 수 있다.

 

추가적으로 break 상태에서  debugging에 대한 tip을 제공하면,

왼쪽 line 부분을 우클릭 하여 모달을 활성화 시키면 캡처본과 같이 나온다.

이 기능을 활용하면 매우 효과적인 debugging을 실행할 수 있다.

 

유용하게 사용할만한 기능은 

add conditional breakpoint이다

for 문안에서 break를 걸면, 모든 반복에서 break가 걸린다. 이렇게 되면 불필요한 시간을 낭비하게 된다.

이를 해결할 수 있는 것이 add conditional breakpoint이다. 조건에 맞을 때 break가 걸린다.

예를 들어 index === 3 인 조건을 걸면, index === 3일 때만 break가 걸린다. 

 

이러한 모든 break에 관련된 정보는 우측텝에서 확인이 가능하며, 이 뿐만 아니라, Event에 대한 breakpoint, global listeners 등에 대한 break를 설정할 수 있다.

 

 

4. NetWork

network tab에서는 서버와 통신하는 모든 데이터에 대해 기록을 남겨준다. css, js, img 등

 

네트워크 탭에서 record를 키고, 캡처본 우측 상단 톱니바퀴를 활성화하고, capture screenshots을 체크 후 페이지 로딩을 해보자.

 

screenshots의 결과물이 나오고 각각의 screenshot에 대한 정보를 체크할 수 있다. 로딩 시간이 얼마나 걸렸는지, 해당 screenshot에서는 어떤 데이터를 가져왔는지 등을 파악할 수 있다.

 

또한, 좌측에서 여러 기능들을 체크해보자.

어느정도 유용하게 쓸만한 것에 대해 살펴보면,

 

Header Options

Option에 체크 사항에 따라 아래에 보여주는 영역을 확장해준다.

 

Replay XHR

이는 해당 요청을 손쉽게 재요청 할 수 있는 기능이다.

 

IMG DATA

이미지의 경우 이미지에 대한 데이터를 얻을 수 있는 기능도 존재하다.

Preview tab에서 우클릭하게 되면 img url, data url, img save 등의 기능을 제공해준다.