크롬 브라우저 개발자 도구(F12) 여는 법과 간단한 사용법

크롬 개발자 도구가 무엇이고 어디에 쓰는지 알아보기

인터넷을 사용하다 보면 평소에는 잘 보이지 않던 웹페이지의 내부 구조가 궁금해질 때가 있습니다. 예쁜 디자인의 폰트 이름을 알고 싶거나 웹사이트가 왜 느리게 열리는지 답답할 때가 바로 그렇습니다.

이럴 때 사용할 수 있는 도구가 구글 크롬 브라우저에 기본으로 들어 있는 개발자 도구입니다. 웹 개발자들이 쓰는 전문적인 도구처럼 보이지만, 폰트 이름을 확인하거나 로딩이 느린 원인을 찾는 정도는 초보자도 따라 할 수 있습니다.

웹사이트를 만들거나 수정하는 사람뿐 아니라 블로그를 운영하는 사람에게도 도움이 됩니다. 웹페이지의 글자나 이미지가 어떤 코드로 만들어졌는지 확인하고, 화면을 임시로 바꿔 보거나, 오류가 난 원인을 찾아볼 수 있습니다.

특별한 프로그램을 따로 설치할 필요 없이 크롬 브라우저만 있다면 누구나 무료로 바로 실행할 수 있다는 점도 큰 장점입니다.

가장 쉽고 빠르게 개발자 도구 창 띄우는 방법

크롬 개발자 도구를 여는 방법은 생각보다 간단하며 키보드 단축키 하나면 충분합니다. 윈도우 운영체제를 사용 중이라면 키보드의 F12 키를 누르는 것이 가장 빠른 방법입니다. Ctrl + Shift + I 키를 동시에 눌러도 열립니다.

맥을 사용하고 있다면 Option + Command + I 키를 동시에 누르면 됩니다. 이 단축키 외에도 마우스 우클릭을 활용하는 방법이 있습니다.

웹페이지의 빈 공간이나 관심 있는 글자 위에 마우스 커서를 올리고 우클릭을 한 뒤 검사라는 메뉴를 선택하면 됩니다. 이 방식을 사용하면 우클릭을 한 바로 그 위치의 HTML 소스 코드가 개발자 도구 창에 곧바로 나타나기 때문에 원하는 요소를 찾기가 훨씬 수월합니다. 다만 일부 사이트는 우클릭을 막아 두기도 하는데, 그럴 때는 위에서 소개한 단축키를 쓰면 됩니다.

만약 단축키나 우클릭이 번거롭다면 크롬 브라우저 우측 상단의 점 세 개 아이콘을 누르고 도구 더보기 메뉴에서 개발자 도구를 찾아 클릭해도 됩니다. 처음에는 화면 하단이나 우측에 생소한 창이 나타나 당황할 수 있지만 몇 번만 열어보면 금방 익숙해집니다.

화면을 내 마음대로 요리조리 바꾸는 요소 탭 활용법

개발자 도구를 처음 열면 가장 먼저 눈에 띄는 것이 바로 엘리먼츠 즉 요소 탭입니다. 이 탭은 웹페이지를 구성하는 뼈대인 HTML과 옷을 입히는 역할인 CSS 코드를 보여주는 공간입니다.

개발자 도구 왼쪽 위에 있는, 네모 안에 화살표가 그려진 아이콘을 클릭한 뒤 웹페이지의 이미지나 글자 위에 마우스를 올려 보세요. 화면에 파란색 상자가 나타나고, 옆 설명창에 그 부분이 어떤 요소인지 이름이 표시됩니다. 그 자리를 클릭하면 아래 코드 창에서 해당하는 코드 줄이 선택됩니다.

이곳에서는 단순히 코드를 구경하는 것뿐만 아니라 실시간으로 내용을 수정하는 일도 할 수 있습니다. 예를 들어 블로그 글의 제목이나 문장을 바꿔 보면서 글자 길이에 따라 화면이 어떻게 보이는지 미리 확인할 수 있습니다.

물론 이것은 내 컴퓨터 화면에서만 임시로 바뀌는 것이며, 새로고침을 하면 원래대로 돌아오기 때문에 웹사이트가 망가질까 걱정할 필요는 없습니다. 웹페이지 디자인을 테스트해 볼 때 유용하게 쓰입니다.

웹사이트의 속도를 진단하고 문제를 해결하는 콘솔과 네트워크 탭

웹페이지가 갑자기 멈추거나 버튼을 눌러도 반응이 없을 때 우리는 개발자 도구의 도움을 받을 수 있습니다. 콘솔 탭은 웹페이지가 작동하면서 발생한 각종 오류나 경고 메시지를 보여주는 일종의 진료실 같은 곳입니다.

자바스크립트 오류가 발생했을 때 빨간색 글씨로 원인이 무엇인지 친절하게 알려주기 때문에 개발자들에게는 필수적인 공간입니다.

네트워크 탭은 웹페이지가 열릴 때 컴퓨터와 서버 사이에 어떤 파일들이 오고 가는지 시간순으로 보여줍니다. 이미지가 너무 커서 로딩이 느린지, 어떤 폰트 파일을 불러오는 데 시간이 오래 걸리는지 한눈에 파악할 수 있습니다.

평소에 인터넷이 느리다고 느껴질 때 이 탭을 켜 둔 상태로 Command + R(윈도우는 Ctrl + R)을 눌러 페이지를 새로고침해 보세요. 아래 사진처럼 파일 목록이 쭉 나타나고, 맨 아래 줄에는 요청 개수와 전송된 데이터 크기, 페이지가 열리는 데 걸린 시간이 표시됩니다. 이 블로그 첫 화면을 열었을 때는 요청이 31건, 로드 시간이 약 1.5초로 나왔습니다. 측정할 때마다 수치는 조금씩 달라질 수 있습니다.

개발자 도구와 관련된 흔한 오해와 진실

많은 사람들이 크롬 개발자 도구를 사용하면 웹사이트의 보안을 뚫거나 해킹을 할 수 있을 것이라고 오해하곤 합니다. 하지만 개발자 도구는 기본적으로 내 브라우저에 이미 내려받은 화면 정보를 보여 주고, 내 화면에서만 임시로 바꿔 볼 수 있게 해 주는 도구입니다. 화면에서 바꾼 내용은 서버에 저장되지 않기 때문에 새로고침을 하면 원래대로 돌아옵니다.

또 다른 오해 중 하나는 이 도구가 프로그래밍 전공자나 현직 개발자들만 쓸 수 있는 복잡한 도구라는 생각입니다. 모든 기능을 이해하려면 오랜 학습이 필요하지만, 이 글에서 소개한 정도의 기능은 초보자도 따라 할 수 있습니다. 하나씩 눌러 보면서 익숙해지면 됩니다.

스마트한 일상을 위한 실생활 활용 팁

개발자 도구로 웹페이지에 쓰인 글꼴 이름도 확인할 수 있습니다. 앞에서 설명한 화살표 아이콘으로 글자를 선택하고, 오른쪽의 계산됨 탭을 연 다음 아래로 내려가 보면 렌더링된 글꼴이라는 항목이 있습니다.

이 항목에는 화면에 실제로 적용된 글꼴 이름이 나옵니다. 마음에 드는 글꼴을 발견했을 때 이름을 찾아보는 용도로 쓸 수 있습니다.

모바일 화면에서 웹사이트가 어떻게 보일지 궁금하다면 개발자 도구 왼쪽 위의, 폰과 태블릿이 겹쳐진 모양의 아이콘을 눌러 보세요.

아이폰이나 갤럭시 등 다양한 기기 화면 비율로 웹페이지를 미리 볼 수 있어 반응형 웹 디자인을 확인하거나 모바일 환경을 테스트할 때 매우 유용합니다.

화면에 다 들어오지 않는 긴 웹페이지를 이미지 파일로 저장하는 기능도 있습니다. 개발자 도구를 연 상태에서 Command + Shift + P(윈도우는 Ctrl + Shift + P)를 눌러 명령 메뉴를 열고 screenshot이라고 입력하면 전체 크기 스크린샷 항목이 나타납니다. 이 항목을 고르면 페이지 전체가 이미지 파일로 저장됩니다.

자주 묻는 질문과 명쾌한 답변

• 질문: 개발자 도구를 쓰다가 실수로 창을 엉망으로 만들었는데 원래대로 돌리려면 어떻게 해야 하나요?

• 답변: 가장 간단한 방법은 해당 탭을 새로고침하는 것입니다. 개발자 도구에서 바꾼 내용은 내 화면에만 임시로 적용된 것이어서, 새로고침하거나 탭을 닫았다가 다시 열면 원래 화면으로 돌아옵니다.
• 질문: 개발자 도구 창이 하단에 나오는데 오른쪽이나 아예 별도의 창으로 분리해서 볼 수 있나요?
• 답변: 네, 가능합니다. 개발자 도구 오른쪽 위의 점 세 개 메뉴를 누르면 맨 위에 도크 측이라는 줄이 있고 아이콘 네 개가 나란히 있습니다. 왼쪽부터 별도 창, 왼쪽에 고정, 아래에 고정, 오른쪽에 고정입니다. 원하는 아이콘을 누르면 위치가 바뀝니다.
• 질문: 스마트폰 크롬 브라우저에서도 이 개발자 도구를 사용할 수 있나요?
• 답변: 모바일 크롬 앱 자체에는 PC 버전과 같은 개발자 도구가 들어 있지 않습니다. 다만 안드로이드 기기는 USB로 PC와 연결해서 PC 크롬에서 원격으로 확인하는 기능(원격 디버깅)을 사용할 수 있습니다.
• 질문: 개발자 도구를 열기만 해도 컴퓨터에 바이러스가 걸리거나 문제가 생기나요?
• 답변: 개발자 도구를 여는 것만으로 바이러스에 걸리지는 않습니다. 크롬에 기본으로 들어 있는 공식 기능이기 때문입니다. 다만 콘솔 탭에는 주의할 점이 있습니다. 출처를 모르는 코드를 복사해서 콘솔에 붙여 넣으면 내 계정 정보가 위험해질 수 있어서, 크롬은 붙여 넣기를 시도하면 allow pasting이라고 직접 입력하라는 경고를 보여 줍니다. 이해하지 못하는 코드는 붙여 넣지 마세요.