크롬 개발자 도구(Chrome DevTools)는 웹 개발자에게 없어서는 안 될 필수 도구입니다. 다른 브라우저들도 나름 유용한 문제 해결 도구를 제공하지만, 크롬 개발자 도구는 다재다능한 인터페이스와 압도적인 사용률 덕분에 특별히 주목할 가치가 있습니다.
크롬은 강력한 디버깅 도구 모음을 갖추고 있어 개발자들이 가장 많이 사용하는 브라우저로 자리 잡았습니다. 크롬 개발자 도구는 사용법이 어렵지 않지만, 제대로 활용하려면 작동 방식을 먼저 이해하는 것이 중요합니다.
크롬 개발자 도구의 작동 원리
크롬 개발자 도구를 사용하면 오류 콘솔과 다양한 디버깅·모니터링 도구를 통해 웹사이트의 문제를 해결할 수 있습니다. 개발자 도구를 활용하면 프런트엔드의 허점을 드러내고, 웹사이트가 모바일 및 태블릿 기기에서 어떻게 표시되는지도 확인할 수 있습니다.
또한 개발자 도구를 사용하면 JavaScript, HTML, CSS 같은 웹사이트 코드를 실시간으로 편집하고 변경 결과를 즉시 확인할 수 있습니다.
여기서 중요한 점은, 개발자 도구에서 수정한 내용은 웹사이트에 영구적으로 반영되지 않는다는 것입니다. 실제 소스 코드에 적용한 것처럼 예상 결과를 임시로 보여줄 뿐입니다. 이를 통해 웹사이트 로딩 속도를 개선하는 방법을 모색하고 버그를 더 쉽게 잡아낼 수 있습니다.
크롬 개발자 도구 실행 방법
크롬 개발자 도구에는 여러 가지 접근 방법이 있습니다. macOS에서 단축키로 열려면 Cmd + Opt + I를, Windows에서는 Ctrl + Shift + I를 누르면 됩니다.
또 다른 방법으로는 화면 오른쪽 상단의 점 세 개 메뉴를 클릭한 후 도구 더보기(More tools) → 개발자 도구(Developer tools)를 선택하거나, 웹 페이지에서 마우스 오른쪽 버튼을 클릭해 검사(Inspect)를 선택하는 방법도 있습니다.
크롬 개발자 도구로 웹사이트 진단하기
크롬 개발자 도구는 웹 페이지를 조정하고 문제를 해결할 수 있는 다양한 기능을 제공합니다. 지금부터 개발자 도구가 어떤 식으로 도움을 주는지 하나씩 살펴보겠습니다.
스마트폰 화면에서 웹사이트 미리보기
크롬 브라우저를 개발자 모드로 전환하면 웹 페이지가 절반 크기로 렌더링됩니다. 하지만 이것만으로는 스마트폰이나 태블릿에서 실제로 어떻게 보일지 정확하게 파악하기 어렵습니다.
다행히 크롬 개발자 도구는 화면 크기 설정 외에도 다양한 모바일 기기 유형과 버전 사이를 자유롭게 전환할 수 있습니다.
이 기능을 사용하려면 먼저 검사(Inspect) 모드를 켠 뒤, 개발자 도구 왼쪽 상단의 Responsive 드롭다운 메뉴를 클릭하고 원하는 모바일 기기를 선택하세요. 그러면 웹 페이지가 선택한 기기 화면 크기에 맞게 렌더링되고 조정됩니다.
웹 페이지 소스 파일 접근하기
크롬 개발자 도구를 통해 웹 페이지를 구성하는 파일에 직접 접근할 수 있습니다. 개발자 도구 메뉴 상단의 Sources 옵션을 클릭하면 웹사이트의 파일 시스템이 노출되며, 파일 편집도 가능합니다.
소스 파일 검색 기능도 매우 유용합니다. 특히 리소스가 많은 웹 페이지를 다룰 때 빛을 발합니다. 소스 파일을 검색하려면 콘솔 바로 위의 Search 옵션을 클릭하세요.
Search 옵션이 보이지 않는다면 키보드 단축키를 사용하는 것이 더 편리합니다. macOS에서는 Cmd + Opt + F, Windows에서는 Ctrl + Shift + F를 누르면 소스 파일 검색창이 열립니다.
웹 페이지 실시간 편집하기
개발자 도구의 핵심 용도 중 하나는 웹 페이지 요소를 즉석에서 수정해 보는 것입니다. 개발자 도구를 연 상태에서 Elements 옵션을 클릭하면 웹사이트의 HTML 콘텐츠를 편집할 수 있습니다. 코드 편집기에서 변경을 적용하고 싶은 부분을 마우스 오른쪽 버튼으로 클릭한 후 Edit as HTML을 선택하세요.
인라인이 아닌 CSS 속성을 편집하려면 Sources를 선택한 뒤 편집하려는 CSS 파일을 고릅니다. 그다음 코드 콘솔에서 원하는 줄에 커서를 놓고 실시간 편집을 진행하면 됩니다. 이렇게 하면 웹 페이지에 적용한 스타일 변경 사항에 대한 피드백을 즉시 받을 수 있습니다.
단, 개발자 도구로 페이지를 편집한 후 브라우저에서 새로고침하면 페이지는 원래 형태로 되돌아가며, 해당 편집은 본인에게만 보인다는 점에 유의하세요. 개발자 도구를 통한 편집은 다른 사용자의 웹사이트 이용이나 정상 작동에 아무런 영향을 주지 않습니다.
개발자 도구 콘솔로 JavaScript 디버깅하기
JavaScript를 디버깅하는 가장 좋은 방법 중 하나가 바로 크롬 개발자 도구를 활용하는 것입니다. 잘못된 스크립트는 물론 버그의 정확한 위치까지 바로 알려주기 때문입니다.
JavaScript로 웹사이트를 개발하는 동안에는 항상 개발자 도구를 열어두는 것이 좋습니다. 예를 들어 일련의 명령어에 JavaScript의 console.log() 명령을 실행하면, 프로그램이 정상적으로 작동할 경우 그 로그 결과가 개발자 도구 콘솔에 표시됩니다.
기본적으로 콘솔은 웹사이트의 JavaScript 관련 문제를 자동으로 보고합니다. 콘솔은 개발자 도구 하단에서 찾을 수 있으며, 크롬 개발자 도구 창 상단의 Console 옵션을 클릭해서도 접근할 수 있습니다.
데이터베이스 리소스 로딩 모니터링하기
콘솔은 JavaScript 디버깅 외에도 웹사이트 데이터베이스에서 제대로 로딩되지 않는 리소스의 세부 정보를 알려줍니다.
백엔드 문제를 디버깅하는 최선의 방법은 아니지만, 해당 요소들에 대한 데이터베이스 쿼리를 실행했을 때 어떤 리소스가 404 오류를 반환하는지 파악하는 데는 충분히 유용합니다.
크롬 개발자 도구 화면 위치 변경하기
크롬 개발자 도구의 위치를 변경하려면 개발자 도구 내부의 점 세 개 메뉴(브라우저의 메인 메뉴가 아님)를 클릭한 후 Dock side 옵션에서 원하는 위치를 선택하세요.
크롬 개발자 도구 확장 프로그램 설치하기
크롬 개발자 도구와 함께 작동하는 언어별 또는 프레임워크별 확장 프로그램을 설치할 수도 있습니다. 이러한 확장 프로그램을 활용하면 웹 페이지를 더욱 효율적으로 디버깅할 수 있습니다.
크롬의 Featured DevTools Extensions 갤러리에서 개발자 도구용 확장 프로그램 목록을 확인할 수 있습니다.
웹사이트 보안 문제 점검하기
크롬 개발자 도구를 사용하면 웹 보안 인증서의 유무, 연결 보안 수준 등 다양한 지표를 기준으로 웹사이트의 보안 상태를 평가할 수 있습니다. 웹사이트가 안전한지 확인하려면 개발자 도구 상단의 Security 옵션을 클릭하세요.
Security 탭에서는 웹사이트 보안 세부 정보의 전체적인 개요를 확인하고 잠재적 위협 여부를 파악할 수 있습니다.
웹사이트 성능 감사하기
크롬 개발자 도구에는 특정 지표를 기준으로 웹사이트의 전반적인 성능을 점검할 수 있는 기능이 마련되어 있습니다.
이 기능을 사용하려면 개발자 도구 창 상단의 Lighthouse 옵션을 선택합니다. 그다음 점검할 지표를 선택하고, Mobile 또는 Desktop 옵션 중 하나를 체크하면 플랫폼별 웹 페이지 성능을 확인할 수 있습니다.
이후 Generate report를 클릭하면 앞서 선택한 지표를 기준으로 웹 페이지 분석이 실행됩니다.
Performance 옵션을 클릭하면 웹사이트의 런타임 또는 로딩 성능도 평가할 수 있습니다. 테스트를 실행하려면 record 버튼 클릭 옵션 옆의 아이콘을 눌러 런타임 분석을 시작하거나, 그 아래의 새로고침 버튼을 클릭해 로딩 시간 성능을 측정할 수 있습니다. 분석을 멈추고 결과를 표시하려면 Stop을 클릭하세요.
크롬 개발자 도구를 적극 활용하자
용도에 따라 크롬 개발자 도구는 단순한 웹사이트 디버깅 그 이상의 작업을 수행할 수 있습니다. 다행히 개발자 도구는 초보자부터 숙련자까지 모든 수준의 개발자가 쉽게 사용할 수 있습니다. 방문하는 웹사이트의 소스 코드를 살펴보는 것만으로도 웹 프런트엔드 개발의 기본기를 익힐 수 있습니다.
이 글에서 다루지 않은 다른 유용한 기능들을 발견할 수도 있습니다. 주저하지 말고 다양한 기능을 직접 만져보세요. 어차피 이런 기능들을 조작한다고 해서 웹사이트가 손상될 걱정은 전혀 없으니까요.