크롬 개발자 도구

평소에 잘 쓰지 않아 생소한 요소 위주로 정리했다.

 

요소

스타일

• 사용자 에이전트 스타일 시트 : 웹 브라우저에서 기본으로 제공하는 css

 계산됨

• 선택된 태그에 최종적으로 적용된 css만 표시된다.
• 해당 css가 어디에서 작성된 것인지 확인할 수 있다. (ex. body 태그에서 적용되었으며 xxx.css 파일에서 작성)

텍스트 명도 대비 확인

• 텍스트 컨텐츠가 있는 마지막 노드에서 스타일 color 누르면 자동으로 계산된 대비율을 확인할 수 있다.

가상 클래스 확인

• 어떤 요소가 특정 상태를 만족할 때 (ex. 마우스 클릭할 때 등) 적용되는 css를 확인할 수 있다.
• 특정 요소 클릭한 후 '스타일' 태그의 요소 상태 전환 버튼(:hov)을 클릭해주면 요소 상태를 강제로 적용할 수 있다.

자바스크립트 비활성화

• command + shift + P (mac) / control + shift + P (window) 를 통해 명령어 실행기를 열고, '자바스크립트 사용 중지'를 검색하여 클릭한다. 혹은 환경설정 - 디버거 - 자바스크립트 사용 중지에 체크한다.
• 페이지 상단과 소스 탭에 경고 아이콘이 생겨 비활성화 되었음을 알려준다.

 

콘솔

• 파일에 저장하지 않고도 코드를 바로 실행할 수 있다.
• 기존 소스에 console.log를 통해 내용을 입력하면 개발자도구 콘솔 탭에서 확인 가능하다.
• clear() 를 사용하면 콘솔에 적힌 내용을 지우는데, 기존에 작성한 변수 등은 남아있는 상태로 텍스트만 지운다.

 여러가지 메시지 종류가 있고, 메시지별로 아이콘 및 폰트 색상이 다르게 표시된다.

• console.log() : 일반 메시지
• console.info() : 정보 메시지
• console.debug() : 디버그 메시지
• console.warn() : 경고 메시지
• console.error() : 오류 메시지

표 형태로 데이터를 출력할 수 있다.

• console.table(data)
• console.table(data, columns)

코드가 실행되는데 걸린 시간을 타이머로 측정할 수 있다.

• console.time() : 타이머 실행
• console.timeEnd() : 타이머 중지, 소요시간 출력

변수 선언시 주의사항

• 자바스크립트에서 변수를 선언하기 위해 var, let, const 세가지 키워드를 사용하는데, let, const의 경우 동일한 이름으로 재선언하면 구문 에러가 발생한다.
• 크롬 개발자 도구에서는 사용자와의 원활한 상호작용과 편리한 테스트를 위해 표준 문법에서 벗어난 기능을 제공한다. let, const를 재선언하더라도 구문 에러가 발생하지 않고, 마지막에 선언한 값으로 사용하게 된다.
  • 각각 다른 블럭에 작성한 경우에만 해당되며, 같은 블럭안에 같이 선언하면 동일하게 에러가 발생한다.
• 다른 키워드로 변수를 재선언하는 것은 예외처리되지 않고 구문 에러 발생한다.

 

로컬스토리지

로컬스토리지란?

웹 브라우저는 사용자 컴퓨터에 웹사이트 사용 정보를 저장하고, 필요할 때마다 그 정보를 불러올 수 있다. 사용자 개인화가 가능하고, 이전 활동을 저장해 속도 및 사용자 경험을 개선시켜준다. 특정 페이지를 접속할 때마다 바로 자동 로그인이 되는 것이 그 예이다.

 

로컬 스토리지는 클라이언트 사이드 스토리지 방식으로 말그대로 사용자 컴퓨터에 데이터를 저장하는 방식이다. 따라서 로컬 스토리지는 내 컴퓨터, 브라우저에 한정적으로 적용된다.

 

세션 스토리지에 저장된 데이터는 페이지를 닫을 때 사라지지만, 로컬 스토리지의 경우에는 새로고침하거나 브라우저를 종료하더라도 내 컴퓨터의 동일 브라우저 내에서는 데이터가 영구적으로 유지된다. 물론 인터넷 사용 기록을 삭제하면 스토리지에 데이터를 삭제할 수 있다.

 

로컬 스토리지는 key-value형태로 데이터가 저장되고 key, value는 문자열로 저장된다.

 

'애플리케이션' 탭의 '로컬스토리지' > '해당 페이지'를 클릭하면 저장된 로컬 스토리지 데이터를 볼 수 있다.

사용법

• localStorage.setItem() : 저장하기
• localStorage.getItem() : 불러오기
• localStorage.removeItem() : 삭제하기
• localStorage.clear() : 현재 페이지에 저장된 로컬 스토리지 데이터를 모두 삭제하기
• localStorage.length : 키/값 쌍의 갯수

 

네트워크

 네트워크탭은 페이지에 리소스가 예상대로 다운로드 또는 업로드 되었는지 확인하기 위해 사용한다. http 헤더, 콘텐츠, 사이즈등과 같은 개별 리소스 속성도 확인할 수 있다.

네트워크 상태 조작

브라우저 캐시를 비활성화 하여 첫 방문자의 사용 경험을 더 자세하게 에뮬레이션할 수 있다. 네트워크 속도를 설정하거나 맞춤 프로필을 생성하여 속도가 느린 모바일 환경이나 해외 사용자 등 다양한 사용자 환경을 테스트할 수 있다.

 

Lighthouse

라이트하우스란?

라이트하우스는 웹페이지의 품질을 개선하기 위한 자동화 도구이다. 개발자가 성능, 접근성, 프로그레시브 웹앱, 검색 엔진 최적화 등에 대한 검사를 실행하여 사이트의 품질을 개선할 수 있는 길을 밝혀준다는 의미로 lighthouse(등대)라는 이름으로 지어졌다. 라이트하우스는 웹사이트의 성능을 측정하고, 어떻게 최적화할 것인지 개선 방향을 제시해준다. 제시해주는 개선 가이드를 잘 살펴보고 성능 최적화 방향을 생각해볼 수 있다. 라이트하우스는 크롬이 분석에 참고한 문서, 문제가 발생한 화며에 대한 상세 설명, 그에 따른 개선 방법을 알려주기 때문에 구체적인 문제점을 빠르게 파악할 수 있다.

모드

• 탐색 : 기본값으로 단일 페이지 로드를 분석한다. 초기 페이지 로딩시 발생하는 성능 문제를 분석해준다.
• 기간 : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석한다. 일반적으로 사용자 상호작용을 포함한다.
• 스냅샷 : 특정 현재 상태의 성능 문제를 분석한다. 특정 상태 페이지, 특히 사용자 상호작용 후 페이지를 분석한다.

기기

• 모바일 : 모바일 뷰포트로 시뮬레이션하게 된다.
• 데스크톱 : 대부분의 모바일 변경사항을 비활성화한 후 검사한다.

카테고리

• 성능 : 웹페이지 로딩과정에서 발생하는 전반적인 성능 문제를 분석한다.
• 접근성 : 서비스의 사용자 접근성 문제를 분석한다.
• 권장사항 : 웹사이트의 보안 측면과 웹개발의 최신 표준에 중점을 두고 분석한다.
• 검색엔진 최적화 : 검색엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석한다.
• 프로그레시브 웹 앱 : 웹과 앱 모두에게 향상된 기능과 안정성을 제공하며 동작하는지 확인하게 된다.

   * 프로그레시브 웹앱 : 웹앱과 네이티브 웹앱의 장점을 모두 제공하는 특정 기술과 표준 패턴을 사용하여 개발된 보다 발전된 형태의 웹앱

 

Performance(성능)

웹페이지에 성능과 관련된 정보를 제공한다. 웹페이지가 어떻게 렌더링되는지, 리소스가 어떻게 로드되는지, 어떤 자바스크립트 코드가 실행되는지, 웹페이지가 얼마나 빨리 렌더링되는지 등을 볼 수 있다. CPU, 네트워크 등의 속도를 설정하여 테스트해볼 수 있다.

 

브라우저에 확장 프로그램이 많이 설치되어있는 경우 그 확장 프로그램때문에 성능 측정에 노이즈가 발생할 수 있기 때문에 시크릿 모드에서 측정하는 것이 좋다. 크게 두가지 경우에서 퍼포먼스 측정을 하게 된다.

1. 웹페이지가 처음 로딩되어 사용자에게 보여지는 과정을 확인
2. 사용자와 인터랙션을 통해 발생하는 애니메이션 성능 측정

네트워크

회색선은 초기 연결에 걸린 시간을 의미하며, 막대의 옅은 색은 요청을 보낸 시점부터 응답을 기다리는데 까지 걸린 시이다. 막대의 짙은 색 부분은 콘텐츠 다운로드 시간이다. 마지막 회색선은 해당 요청에 대한 메인 스레드 작업시간이다.

프레임

화면에 변화가 있을 때마다 스크린샷을 찍어 보여준다.

소요시간

렌더링 시간을 측정한다.

기본

브라우저의 메인 스레드에서 시행되는 작업을 보여준다. 어떤 작업이 오래걸리는지 파악할 수 있다.

 

Debugging

실행 단계마다 어떤 일이 일어나는지 코드 단위별로 확인하며 에러를 확인할 수 있다. 성능 측정과 마찬가지로 시크릿 모드에서 열어 확인하는 것이 좋다. 소스 탭은 탐색기 창으로 현재 페이지에서 로드된 모든 리소스를 확인할 수 있고 css, js등 소스를 바로 수정할 수 있으 페이지에 즉시 저장된다.

 

자바스크립트의 오류를 사용하기 위해 console.log()를 많이 사용하는데, 디버깅 툴을 사용하는게 더 빠르고 버그를 찾는데 도움이 된다. console.log()는 전체적인 코드를 확인하고, 수동으로 코드를 열고, 관련 코드를 찾아 명령문을 삽입한 다음, 다시 페이지 로드를 해야되는 번거로움이 있지만 중단점은 전체적인 코드 확인 없이 원하는 코드에서 일시정지하여 코드를 파악할 수 있다.

 

중단점을 만들어 실행하면 코드를 일시정지하고 해당 시점의 모든 값을 검사할 수 있다. 소스의 원하는 위치에 debugger; 라는 명령어를 입력하여 중단점을 만들 수 도 있다.

진행 버튼

• 스크립트 실행 재개 (F8) : 다음 중단점으로 이동하고, 더이상 중단점이 없다면 남은 스크립트를 실행한다.
• 다음 함수 호출 (Step Over/F10) : 함수 내부로의 진입 없이 다음 명령어를 실행한다. 중첩 함수를 실행하긴 하지만 함수 내부로 진입하는 과정은 생략한다.
• 다음 함수 호출 (Step Into/F11) : Step Over와 비슷하게 동작하지만 Step Into는 비동기 동작을 무시하지 않으며, 필요에 따라 비동기 동작이 완료될 때 까지 대기한다.
• 현재 함수에서 벗어나기 (F11) : 함수의 마지막 줄에서 실행을 중지한다. 현재 함수를 빠르게 끝내고 싶을 때 유용하게 사용할 수 있다.
• 단계 (F9) : 문 단위로 다음 코드를 실행한다. 비동기 동작은 무시한다.

감시

• 예를 들어 감시 표현식 추가에 type of sum (sum은 변수명) 입력 -> "string"이라는 결과값을 얻을 수 있다.

---

이 포스팅은 아는 만큼 보이는 크롬 개발자 도구 강의를 수강하며 작성되었습니다.

[지금 무료] 아는 만큼 보이는 크롬 개발자 도구 강의 - 인프런