크로스 브라우저 웹 애플리케이션을 개발하는 일은 결코 쉽지 않습니다. 브라우저마다 제공하는 디버깅 도구가 부족하고, 그 기능조차 서로 다르게 구현되어 있기 때문입니다. 다행히 요즘 대부분의 브라우저는 최신 웹 표준을 지원하며 개발자를 위한 유용한 기능들을 갖추고 있습니다.
Chrome, Firefox, Edge 같은 주요 브라우저는 개발자 도구를 꾸준히 업데이트하고 있으며, 업데이트가 이루어질 때마다 웹 개발자에게 새로운 기능이 추가됩니다. 직관적인 UI, 더욱 강력해진 디버깅, 향상된 성능 분석 도구 등을 통해 사용 편의성이 지속적으로 개선되고 있습니다.
이러한 변화를 꾸준히 파악하면 브라우저 DevTools의 잠재력을 최대한 끌어내어 작업 흐름을 간소화하고 웹 애플리케이션 배포 속도까지 높일 수 있습니다.
목차
DevTools에서 Scroll Into View 사용하기
DevTools 콘솔 단축키 활용하기
DevTools에서 리소스 요청 차단으로 웹사이트 테스트하기
DevTools에서 네트워크 요청 편집 후 재전송하기
DevTools에서 사용되지 않는 소스 코드 찾기
DevTools에서 접근성 트리 활성화하기
마무리
이 글에서는 크로스 브라우저 환경에서 활용할 수 있는 유용한 DevTools 기능들을 살펴보고, 각각의 사용 방법을 자세히 알아보겠습니다.
그럼 시작해 보겠습니다!
1. DevTools에서 Scroll Into View 사용하기
디버깅을 하다 보면 문제의 원인을 찾기 위해 수많은 HTML 노드를 훑어야 하는 경우가 많습니다. 대부분 원하는 노드를 찾았더라도, 페이지에서 해당 위치로 스크롤을 내려야만 화면에 나타나죠.
Scroll Into View 기능을 사용하면 DOM 노드를 클릭 한 번으로 화면 영역(viewport) 안으로 불러올 수 있습니다. Chrome, Firefox, Edge 모두에서 해당 노드를 마우스 오른쪽 버튼으로 클릭한 뒤 'Scroll Into view'를 선택하면 됩니다.
이 기능은 CSS 문제를 디버깅하거나 페이지 내 요소의 올바른 배치를 확인할 때 많은 시간을 절약해 줍니다. 여러 줄의 코드를 일일이 스크롤하지 않고도 HTML 노드를 통해 페이지의 요소를 빠르게 찾아낼 수 있습니다.
아래 이미지에서는 여러 겹의 요소 안에 중첩된 h2 요소를 찾는 상황을 볼 수 있습니다.
위 이미지처럼 페이지 전체를 스크롤하며 h2 요소를 일일이 찾는 대신, 오른쪽 클릭 후 Scroll Into View 기능을 사용하면 해당 요소를 즉시 화면에 띄울 수 있습니다. 스크롤로 이동한 후에는 스타일 패널에서 CSS 속성을 실시간으로 조정하거나, 레이아웃 문제를 찾아 수정하는 등 추가 작업도 이어서 할 수 있습니다.
2. DevTools 콘솔 단축키 활용하기
콘솔(Console)에는 개발자가 더 빠르게 디버깅할 수 있도록 돕는 다양한 단축키가 있습니다. 그중 하나가 $_ 단축키입니다. 이 단축키는 콘솔에서 가장 최근에 평가된 표현식의 값을 반환합니다. 예를 들어 곱셈 함수가 있다고 가정해 보겠습니다.
아래 이미지에서 $_ 단축키가 브라우저 콘솔에서 특수 변수로 동작하며 가장 최근에 평가된 표현식을 저장하는 모습을 확인할 수 있습니다.
$_ 단축키 없이는 전체 함수 호출을 다시 입력하거나, 결과를 변수에 저장해야 합니다.
let result = multiply(5)
result(4) // returns 20
위 코드에서는 multiply(5) 함수가 함수를 반환하고, 그 함수를 result에 할당한 뒤 4를 인자로 호출(result(4))해야 합니다.
이미 눈치채셨겠지만, 이런 방식은 불필요한 반복과 추가 단계를 만들어내며, 더 복잡한 연산이나 여러 단계의 계산을 다룰 때 번거로워집니다. 바로 이럴 때 $_ 단축키가 빛을 발합니다. 콘솔에서 multiply(5) 코드를 실행하면 반환된 함수가 $_ 변수에 저장되고, $_ 단축키로 언제든 접근할 수 있습니다.
또 하나 유용한 단축키는 $0입니다. $0을 사용하면 콘솔에서 현재 선택된 DOM 노드에 바로 접근할 수 있습니다. DevTools로 웹페이지를 검사할 때는 Elements 패널에서 관심 있는 요소를 찾기 위해 DOM 트리를 탐색하는 경우가 많습니다. 이 패널에서 요소를 클릭하면 DevTools가 내부적으로 해당 요소를 추적하여 현재 선택된 요소로 만듭니다.
$0은 콘솔에서 현재 선택된 요소를 참조하는 단축키이므로, 다시 쿼리를 작성해 요소를 선택하지 않고도 콘솔에서 직접 조작할 수 있습니다.
아래 스크린샷은 콘솔에서 $0을 사용해 DOM 트리에서 선택한 노드에 접근하고, 배경색을 원하는 색으로 변경하는 과정을 보여줍니다.
위 이미지에서는 먼저 Elements 패널에서 원하는 요소를 검사했습니다. 이후 document.querySelector('#element')로 요소를 다시 조회하는 대신, $0을 사용해 다음과 같이 바로 조작할 수 있습니다.
$0.style.backgroundColor = 'lightblue';
이 코드는 선택된 <div>의 배경색을 부드러운 연한 파란색으로 변경합니다. $0이 진짜 유용한 이유는 DOM에서 직접 선택한 정확한 요소를 참조한다는 점입니다. 덕분에 요소가 동적으로 생성되었거나 깊게 중첩된 경우에도 올바른 요소를 대상으로 작업하고 있다는 것을 확신할 수 있습니다.
3. DevTools에서 리소스 요청 차단으로 웹사이트 테스트하기
Block Resource Request(리소스 요청 차단) 기능은 특정 리소스를 로드할 수 없는 상황에서 웹사이트가 어떻게 동작하는지 테스트할 수 있게 해주는 웹 개발자에게 중요한 기능입니다.
이 기능을 사용하면 이미지, JavaScript, CSS 또는 도메인 전체에 접근할 수 없는 상황을 시뮬레이션하고, 그럴 때 웹페이지가 어떻게 반응하는지 확인할 수 있습니다.
브라우저가 요청한 리소스가 항상 다운로드된다는 보장은 없으며, 이로 인해 웹사이트 사용자에게 예기치 못한 경험이 발생할 수 있습니다. Chrome, Firefox, Edge에서 리소스 요청을 차단하고 사이트의 동작을 미리 테스트해 보세요.
Chrome 및 Edge에서:
Network 패널에서 차단하려는 리소스를 오른쪽 클릭한 뒤 'Block request URL'을 선택합니다.
웹사이트를 새로 고침하면 차단된 리소스는 다운로드되지 않으며 웹페이지에 영향을 주지 않습니다.
아래 이미지에서는 Network 탭의 'Block request URL' 옵션을 사용해 CSS 요청을 차단하고, 선택한 CSS 파일이 로드되지 않을 경우 웹페이지가 어떻게 보이는지 확인하는 모습입니다.
위 이미지에서 웹페이지가 발생시킨 모든 네트워크 요청, 즉 이미지, CSS 파일, JavaScript 파일 등의 요청 목록을 볼 수 있습니다. 필터를 적용해 CSS 파일만 표시하도록 설정한 상태입니다.
여기서 Network 패널의 CSS 파일을 오른쪽 클릭하고 'Block request URL'을 선택하면, 다음 페이지 새로 고침 시 브라우저가 해당 CSS 파일을 로드하지 않습니다.
요청을 차단함으로써 예상치 못한 동작을 미리 파악하고, 차단된 리소스가 없을 경우 페이지 로드 시간과 성능에 어떤 영향을 미치는지 측정할 수 있습니다.
Firefox에서:
Network 패널에서 차단하려는 리소스를 오른쪽 클릭한 뒤 'Block URL'을 선택합니다.
페이지를 새로 고칩니다.
실제로 저도 특정 JavaScript 파일을 로드하지 않을 때 사이트가 어떻게 동작하는지 테스트하는 데 이 기능을 활용했습니다. 사용자가 JavaScript를 비활성화했을 때 발생할 수 있는 문제를 디버깅하는 데도 큰 도움이 됩니다.
4. DevTools에서 네트워크 요청 편집 후 재전송하기
DevTools의 가장 멋진 기능 중 하나는 브라우저 안에서 네트워크 요청을 직접 편집하고 재전송할 수 있다는 점입니다. 이 기능은 네트워크 요청 문제를 디버깅할 때 특히 유용합니다. 예를 들어, 프론트엔드 코드를 수정하거나 요청 프로세스 전체를 다시 실행하지 않고도 요청 파라미터, 헤더, 바디의 변경이 서버 응답에 어떤 영향을 미치는지 확인하고 싶은 경우가 그렇습니다.
네트워크 요청 시 백엔드 서비스로 보낸 요청이 실패하거나 의도한 데이터를 응답하지 않을 수 있습니다. 요청을 재시도하려고 페이지 전체를 다시 로드해야 한다면 매우 번거롭겠죠. 바로 이럴 때 Edit and Resend(편집 후 재전송) 기능이 유용합니다.
Edge와 Firefox 브라우저에서는 편집하거나 재전송하려는 요청을 오른쪽 클릭한 뒤 'Edit and Resend'를 선택하면 됩니다. 아래 이미지와 같습니다.
위 이미지는 웹사이트에 로그인을 시도하는 상황입니다. 사용자가 자격 증명을 제출하면 폼은 사용자 이름과 비밀번호를 담아 API 엔드포인트인 /auth/login으로 POST 요청을 보냅니다.
간혹 서버가 400 Bad Request 오류를 반환할 수 있는데, 이 오류를 디버깅하고 원인을 파악하려면 요청을 다시 시도해야 합니다. 폼을 계속 반복해서 작성하고 싶지 않다면, 아래와 같이 Edit and Resend 기능을 활용하면 됩니다.
위 이미지는 'Edit and Resend'를 클릭했을 때 열리는 네트워크 콘솔 또는 사이드바로, 요청의 세부 정보를 보여줍니다. 여기서 다음 항목들을 편집할 수 있습니다.
URL: 필요하다면 URL을 수정하거나 쿼리 파라미터를 추가할 수 있습니다.
Headers: Content-Type 헤더가 누락되었거나 잘못된 경우 여기서 수정할 수 있습니다.
Body: 사용자 이름이나 비밀번호 필드를 수정하는 등 페이로드를 조정할 수 있습니다.
Chrome 브라우저에서는 편집 후 재전송 기능이 XHR 요청에만 동작하며, 요청을 오른쪽 클릭한 뒤 'Replay'를 선택하여 사용할 수 있습니다.
5. DevTools에서 사용되지 않는 소스 코드 찾기
DevTools의 Coverage(커버리지) 도구를 사용하면 웹페이지의 로딩 및 인터랙션 단계에서 사용되지 않는 JavaScript와 CSS 코드 영역을 파악할 수 있습니다. 파일 크기를 줄이고 불필요한 코드를 제거하여 페이지 로드 속도를 높이고 사용자 경험을 개선하는 웹 성능 최적화에 필수적인 기능입니다.
사용되지 않는 JS와 CSS 코드를 제거하는 것은 사용자의 대역폭을 아끼는 훌륭한 방법입니다. Coverage 도구를 활용하면 소스 코드에서 사용되지 않는 부분을 찾아내어 삭제하거나, 해당 코드가 실제로 필요해질 때까지 로딩을 지연시킬 수 있습니다.
Chrome 및 Edge에서:
DevTools에서
Ctrl/cmd+Shift+P를 누르고, coverage를 입력한 뒤 'Start instrumenting coverage'를 선택하고 페이지를 새로 고친 후 Enter를 누릅니다.JS와 CSS 파일 목록과 함께 사용되지 않은 바이트(Unused Bytes) 열이 포함된 테이블이 표시됩니다.
파일을 클릭해 열면, 옆의 라인 표시에서 사용되지 않는 코드 섹션이 빨간색으로 나타납니다.
아래 이미지에서는 사용되지 않는 CSS 코드를 식별하여 해당 코드를 제거하거나 로딩을 지연시키는 과정을 보여줍니다.
위 이미지처럼 기록이 완료되면 Coverage 도구는 페이지가 로드한 CSS 및 JavaScript 파일 목록과 함께 다음과 같은 상세 지표를 표시합니다.
Total Bytes: 파일의 전체 크기입니다.
Unused Bytes: 파일에서 사용되지 않은 바이트 수입니다.
Usage Visualization: 사용된 코드와 사용되지 않은 코드의 비율을 나타내는 시각적 막대입니다.
Safari에서: Sources 패널에서 왼쪽 탐색 사이드바를 열고 아무 JS 파일이나 클릭합니다. 툴바 오른쪽 상단에서 커버리지 아이콘 c를 클릭하고 페이지를 새로 고치면, 실행되지 않은 코드 섹션이 회색으로 표시되는 것을 확인할 수 있습니다.
6. DevTools에서 접근성 트리 활성화하기
접근성 트리(accessibility tree)는 요소 DOM 트리와 유사하며, 스크린 리더와 같은 보조 기술이 웹 콘텐츠를 읽을 때 사용됩니다. 개발자는 이 기능을 활용해 웹사이트의 접근성 문제를 디버깅할 수 있습니다. Chromium 기반 브라우저는 Chrome의 접근성 API를 사용해 이를 구현하며, Firefox는 자체 접근성 도구를 제공합니다.
Chrome 및 Edge에서:
설정 페이지에서 Experiments 탭을 선택합니다.
Elements 패널의 'Enable full accessibility tree view' 옵션 체크박스를 선택합니다.
DevTools를 새로 고친 뒤 Elements 도구로 이동합니다.
요소 뷰의 오른쪽 상단에서 'Switch to DOM Tree view'를 클릭합니다.
예를 들어 아래 이미지에서는 웹사이트의 링크와 버튼이 올바르게 인식되는지, 스크린 리더를 사용하는 사용자에게 접근 가능한지 확인하는 과정을 보여줍니다.
접근성 트리를 활성화하면 접근성과 관련된 요소에 초점을 맞춘 간소화된 버전의 DOM 트리를 볼 수 있습니다. 접근성 트리에서 요소를 선택해 속성을 확인하면, 해당 요소의 role(role), name(이름), 그리고 aria-label 같은 중요한 속성들이 있다면 함께 표시됩니다.
또한 해당 요소가 포커스 가능한지(focusable), 계산된 접근성 속성(computed accessibility properties)이 무엇인지도 확인할 수 있습니다.
이 기능이 큰 도움이 되는 이유는, 요소가 접근성 트리에 올바르게 나타나지 않거나 필수 속성이 누락된 경우 HTML이나 ARIA 속성을 조정하여 접근성을 개선해야 한다는 것을 바로 알 수 있기 때문입니다.
Firefox에서:
Firefox DevTools에서 Accessibility 탭을 클릭하고 document 노드를 확장합니다.
여러 노드를 클릭하며 각 노드의 속성을 확인할 수 있습니다.
노드의 접근성 문제는 Checks 탭에 표시됩니다.
마무리
한마디로, 최신 크로스 브라우저 DevTools 기능을 꾸준히 학습하고 활용하면 웹 개발자로서 많은 시간을 절약할 수 있습니다. 이 글에서는 요소 검사 팁, 디버깅 과정을 더 쉽게 만들어주는 콘솔 단축키, 그리고 네트워크 모니터링에 유용한 팁들을 살펴보았습니다.
여러분도 다양한 DevTools 기능을 계속 탐색하고 활용하여 개발 경험을 한층 더 발전시켜 나가시길 바랍니다.