크롬 개발자 도구 사용법 및 소개, 쉽게 핵심만 알아보자

안녕하세요! 오늘도 열심히 개발중에 있습니다. 웹개발을 하면서 가장 많이 사용하는 브라우저는 크롬일 것입니다. 크롬에서는 개발자에게 유용한 기능들이 많은데 그 중 필수적으로 사용하는 것이 크롬 개발자 도구입니다. 이곳에서 소스코드 및 여러가지 테스트를 할 수 있고 네트워크 정보 등 유용한 정보를 분석할 수 있습니다.

 

크롬 개발자 도구 열기

크롬 개발자 도구는 윈도우에서는 f12 맥에서는 cmd+option+i로 열 수 있습니다. 왼쪽 탭에는 해당 페이지의 소스코드(html)이 보이고 오른쪽에는 선택한 요소의 css 속성을 알 수 있습니다.

 

위쪽에 동그라미 친 녀석들이 많이 사용하는 기능들인데요. 왼쪽 마우스 표시 아이콘은 실제 view 화면의 요소를 클릭하여 해당 요소의 소스코드를 바로 볼 수 있는 기능입니다. (정말 많이 사용합니다.) 단축키로는 맥에서는 cmd + shift + c 입니다.

 

오른쪽에 사각형 두개 모양은 반응형 디자인을 테스트 할 때 사용하는 기능으로 해당 아이콘을 클릭 시 화면 비율, 크기 별로 페이지 모습을 확인할 수 있습니다.

 

 

 

크롬 개발자 도구 다양한 기능들

그 다음으로 많이 사용하는 창은 콘솔창인데요. 여기서 js로 찍는 log들을 모두 확인할 수 있습니다. 가장 좋은 점은 꼭 페이지단에서 js를 작성해야 로그나 나오는 것이 아니라 해당 콘솔창에서 직접 코드를 입력하여 log를 확인할 수 있습니다.

 

예를 들어 element1이 페이지에 있는지 확인하고 싶다면 콘솔창에서 바로

> console.log(document.getElementById("#element1"))

이런식으로 찍어서 확인할 수 있는데 이는 다시 개발 화면으로 돌아갈 필요가 없다는 것입니다.

 

 

console의 로그 종류는 일반, 경고, 오류 등 다양한 레벨로 구성되어 있는데 이들도 왼쪽 사이드 탭에서 클릭하여 레벨별로 로그를 확인할 수 있다.

 

 

로그 옆에는 해당 log가 찍힌 코드 위치가 표시되어 있는데 클릭하면 실제 코드를 보여주어 오류 및 수정해야 할 부분을 쉽게 찾을 수 있습니다.

 

 

네트워크에서는 주로 정적 파일들을 잘 가져왔냐 확인하는 공간인데요. 웹은 다른 프로그램과 다르게 페이지를 구성하는 요소를 못가져오더라도 정상적으로 로드 됩니다. 따라서 정적 파일을 못가져오는지 확인하려면 개발자 도구 네트워크 창에서 404 에러가 나오는 곳을 찾으면 됩니다.

 

또한 정적파일마다 가져오는 속도를 파악하여 웹 로드시 어떤 정적파일이 영향을 많이 끼치는지 확인하고 이를 최적화 할 수 있도록 도와줍니다.

 

애플리케이션 창에서는 주로 서버와 통신하는데 이용/저장되는 세션/쿠키/데이터 등을 확인할 수 있습니다. 개인적으로 개발하면서 많이 들어가보지는 않고 가끔 캐시나, 세션이 잘 저장 되었는지 등을 확인할 때만 들어갔었던 것 같네요.