개발자 도구 실행은

• F12
• Ctrl + Shift + i

로 실행할 수 있고 아래 사진처럼 [도구 더보기 > 개발자 도구] 를 클릭해서 실행할 수도 있습니다.

[Fig.1] Opening DevTools from Chrome`s main menu (https://developers.google.com/web/tools/chrome-devtools/open)

개발자 도구를 실행하게 되면 여러 가지 패널이 보일 텐데 각 패널의 간략한 특징은 아래와 같습니다.

[Fig.2] DevTools screen

• Elements : html/CSS 상태 확인
• Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
• Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
• Network : 브라우저에서 발생하는 통신 상태
• Performance(예전 Timeline패널) : 성능 측정
• Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
• Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
• Audits : 페이지를 분석하고 최적화를 위한 팁 나열
• Security : Mixed content 이슈, 인증서 문제 등을 디버깅

[Fig.3] Console log

Console 패널에서 호출 결과를 확인하기 위해 위의 그림처럼 출력하는 경우가 많이 있습니다. 이때 결과로 나온 Object를 복사하고 싶다면 어떻게 할까요? 보통 그냥 drag 해서 선택한 다음 Ctrl + c, Ctrl + v 로 복사하는데 이러면 나중에 다시 정리해야 하고 결과값이 많은 Object의 경우 하나하나 펼쳐주지 않으면 [...]이 복사 될 수 있습니다. 이런 불편함을 없애주는 copy이라는 메소드가 있는데 이 메소드를 사용하면 객체가 클립보드에 저장됩니다. 하지만 변수에 담기지 않은 상태, 즉 이미 로깅된 객체는 copy에 바로 담을 수 없고 변수로 지정을 해줘야 합니다.

예시

 [Fig.4] Select 'Store as global variable'

2. 선택하면 global 영역에 임시 변수로 저장됨

[Fig.5] Save variable

3. 생성된 임시변수를 사용해서 copy메소드 실행

[Fig.6] Copy method

그러면 객체가 복사됩니다.

프론트앤드에서 데이터를 얻기 위해 백앤드로 XHR 요청을 보냅니다. 이때 내가 원하는 XHR을 한 번 더 요청하고 싶다면 새로고침을 하는 방법도 있겠지만, 더 쉬운 방법을 알려드리겠습니다.

[Fig.7] Example replay XHR

• 스크롤 아래 보이지 않는 부분을 포함하여 웹 페이지에 있는 모든 것의 스크린 샷
• DOM 요소의 내용을 정확하게 캡처

이런 작업들은 운영체제에 제공되는 스크린 샷 도구로 해결할 수 없지만 개발자 도구에선 해결할 수 있습니다.

시작하기 전에 Command 메뉴를 소개하겠습니다. 리눅스에 셸(Shell)이 있듯이 크롬에는 Command 메뉴가 있습니다. Command 메뉴를 사용하면 명령어를 입력해 Chrome을 조작할 수 있습니다.

Command 메뉴는 개발자 도구를 연 후

• Ctrl + Shift + p

를 통해 열 수 있고, 아래 버튼을 클릭하여 열 수도 있습니다.

제가 Command 메뉴를 설명해 드린 이유는 Command 명령어를 통해 스크린 샷을 할 수 있기 때문입니다.
이제 다시 본론으로 돌아와 스크린 샷에 대해 말해보겠습니다.

1. 스크린 샷 하고자 하는 웹 페이지를 엽니다. 그리고 개발자 도구를 열고 Command 메뉴를 실행합니다.

2. 그런 다음 명령어 screenshot을 입력합니다. 그러면 screenshot에 관련된 여러 명령이 아래에 나오게 됩니다.

[Fig.10] screenshot step 2

3. Capture full size screenshot을 선택하게 되면 현재 페이지의 전체 스크린 샷을 얻을 수 있습니다.

[Fig.11] screenshot 결과물

마찬가지로 DOM 요소의 스크린 샷을 만들려면 스크린 샷 도구를 사용할 수 있지만, 요소를 정확하게 캡처하는 게 쉽지 않습니다. 이때는 Capture node screenshot 명령어를 실행하면 원하는 요소만 선택하여 캡처할 수 있습니다.

1. Elements 패널에서 원하는 요소를 선택합니다.

[Fig.12] Node screenshot step 1

2. 선택한 후 Command 탭을 열어 screenshot 명령어를 입력합니다. 그중 Capture node screenshot 을 선택하면 요소가 저장됩니다.

[Fig.13] Node screenshot 결과물

크롬 확장프로그램인 Awesome Screenshot도 전체 스크린 샷을 지원합니다. Awesome Screenshot은 녹화, 공유, 스크린 샷 등의 기능을 제공하는 데 스크린 샷에 텍스트, 주석, 라인, 화살표 및 모양을 캡처한 이미지에 직접 추가할 수 있는 기능이 있습니다.
Awesome Screenshot을 사용하기 위해서는 우선 확장 프로그램을 추가해야 합니다. Awesone Screenshot은 https://www.awesomescreenshot.com/ 에서 무료로 추가할 수 있습니다. 추가한 뒤에는 오른쪽 위에 확장 프로그램을 선택하면 아래 메뉴가 나옵니다.

[Fig.14] awesome screenshot 메뉴

• Visible Part : 현재 보이는 전체화면을 캡처
• Full Page : 스크롤 아래 보이지 않는 부분을 포함한 전체화면 캡처
• Selected Area : 선택한 영역을 캡처
• Visible Part after Delay : 옵션에 따라 3초, 5초 후 캡처

• Entire Screen & App Window : 화면 공유

• Annotate Local & Clipboard Image : 내 컴퓨터의 이미지를 편집기로 불러옴

캡처한 뒤에는 바로 여러 도구를 추가할 수 있는 화면으로 넘어가게 됩니다. 무료로 제공되는 부분은 화살표, 도구, 텍스트 등 빨간색 상자 부분이고 등급을 업그레이드하면 노란색 상자 부분의 도구들을 사용할 수 있습니다.

[Fig.15] awesome screenshot 도구

확장 프로그램을 추가하고 싶지 않으신 분, 요소 캡처를 원하시는 분께는 개발자 도구를 이용하는 걸 추천해 드리고 시간 지연 옵션을 원하시는 분, 캡처 후 여러 가지 모양을 직접 추가하시고 싶으신 분들에게는 Awesome Screenshot을 추천해 드립니다.

크롬 개발자 도구에서 디버깅을 하다 보면 특정 위치로 이동하기 위해 원하는 위치에 breakpoint를 설정하고 next로 넘어가는 경우가 많이 있습니다. 긴 함수에서도 여러 값을 보기 위해 이러한 방법을 사용하는데 이런 경우 나중에 원치 않아도 걸리게 되어 시간이 지체되고 다시 해체해야 하는 번거로움이 있습니다. 이때 사용하는 기능이 Continue to here입니다. 디버깅 중 원하는 코드 위에 마우스 오른쪽 버튼을 클릭하면 Continue to here 이 있는데 이 기능을 사용하면 breakpoint를 설정하지 않아도 원하는 위치로 이동할 수 있어서 나중에 breakpoint에 걸리지 않고 다시 해체할 필요도 없습니다. 다만 breakpoint가 걸린 함수 내에서만 이동할 수 있습니다.

[Fig.16] Continue to here

만약 특정 이벤트가 발생하는 시점에 호출되는 함수를 알 수 있다면?? 아마 좀 더 디버깅을 쉽게 할 수 있을 것입니다. 개발자 도구에서는 이렇게 이벤트가 발생하는 시점에 break point를 걸 수 있는 기능을 제공하는데 이게 바로 Source 패널에 있는 Event Listener Breakpoints입니다.

[Fig.17] Event Listener Breakpoints

크롬 개발자 도구의 흰 바탕색이 소스 보기 부담스럽고 눈이 쉽게 피로해지는 분들 있으실 겁니다. 이를 위해 크롬에서는 색상 반전 기능을 제공하고 있습니다.

1. 개발자 도구를 열어 설정을 실행합니다.

[Fig.23] 개발자도구 설정메뉴

2. Performances 메뉴를 선택 후 Appearance 아래에 Theme을 Dark로 변경합니다.

[Fig.24] Theme 변경

3. 다음과 같이 Dark Theme로 변경됩니다.

[Fig.25] Dark Theme

또 Dock의 위치를 원하는 곳으로 변경할 수 있는데 분리, 왼쪽, 아래쪽, 오른쪽 순으로 변경할 수 있습니다. 저는 듀얼모니터를 쓸 때 개발자 모드를 분리해서 사용하곤 하는데 여러분들은 개발하는 화면에 맞게, 취향이나 편의에 따라 원하는 Dock 위치를 바꿔가며 사용하시면 좋을 것 같습니다.

[Fig.26] Dock 위치 변경

지금까지 알아두면 편리한 잘 알려지지 않은 기능에 대해 살펴보았습니다. 제가 설명한 기능 외에도 크롬 개발자 도구에서는 다양한 기능을 제공하고 있고 Google에서 제공하는 개발자 도구 공식 매뉴얼(https://developers.google.com/web/tools/chrome-devtools)에 설명이 잘 되어 있으니 이번 기회에 다른 기능들에 관해서 관심 두고 공부하셔서 개발의 질을 높이는 데 도움이 되었으면 좋겠습니다. 감사합니다.

• https://opentutorials.org/course/580
• https://brunch.co.kr/@myoungjun/22
• https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674
• https://developers.google.com/web/tools/chrome-devtools#%EA%B8%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C
• https://blog.mixed.kr/265