크로스 브라우저 웹 애플리케이션을 구축하는 것은 어려운 작업이 될 수 있습니다. 많은 브라우저가 종종 서로 다른 몇 가지 디버깅 도구를 제공하기 때문입니다. 다행히 오늘날 대부분의 브라우저는 최신 표준을 지원하고 개발자에게 유용한 기능을 제공합니다.
Chrome, Firefox, Edge와 같은 주요 브라우저는 지속적으로 개발자 도구를 업데이트하며 각 업데이트는 잠재적으로 웹 개발자에게 새로운 기능을 제공합니다. 이러한 새로운 기능은 직관적인 UI, 고급 디버깅 및 향상된 성능 분석 도구를 추가하여 사용 편의성을 높입니다.
이러한 변경 사항을 최신 상태로 유지하면 브라우저 DevTools를 최대한 활용하여 작업 흐름을 더 쉽게 만들고 웹 애플리케이션 제공 속도를 높일 수 있습니다.
목차
-
DevTools에서 스크롤하여 보기를 사용하는 방법
-
DevTools에서 콘솔 단축키를 사용하는 방법
-
DevTools에서 웹사이트 테스트를 위한 리소스 요청을 차단하는 방법
-
DevTools에서 네트워크 요청을 편집하고 다시 보내는 방법
-
DevTools에서 사용되지 않는 소스 코드를 감지하는 방법
-
DevTools에서 접근성 트리를 활성화하는 방법
-
요약
이 글에서는 몇 가지 좋은 크로스 브라우저 DevTools 기능을 알아보고 이를 사용하는 방법에 대해 논의하겠습니다.
시작해 보세요!
디버깅할 때 문제가 있는 위치를 찾기 위해 훑어보아야 할 HTML 노드가 많이 있을 수 있습니다. 대부분의 경우 노드를 찾으면 페이지에서 노드가 있는 위치로 스크롤할 때까지 표시되지 않습니다.
보기로 스크롤 기능은 Chrome, Firefox 및 Edge에서 마우스 오른쪽 버튼을 클릭하고 보기로 스크롤을 선택하여 DOM 노드를 뷰포트로 쉽게 가져옵니다.
이 기능을 사용하면 CSS 문제를 디버깅하거나 페이지에서 요소의 올바른 배치를 확인하려는 경우 많은 시간을 절약할 수 있으므로 여러 줄의 콘텐츠를 수동으로 스크롤할 필요 없이 HTML 노드를 통해 페이지에서 요소를 빠르게 찾을 수 있습니다.
아래 이미지에서는 h2을 찾으려고 합니다. 다른 요소의 여러 레이어 안에 중첩된 요소입니다.
위 이미지에서는 h2를 찾기 위해 전체 페이지를 스크롤하는 대신 요소를 마우스 오른쪽 버튼으로 클릭하고 보기로 스크롤 기능을 사용하여 즉시 h2를 가져왔습니다. 요소를 볼 수 있습니다. 이 기능을 확장하여 해당 요소로 스크롤할 때 해당 요소로 다른 작업을 수행할 수 있습니다. 스타일 패널을 통해 CSS 속성을 실시간으로 조정할 수 있으며 레이아웃 문제를 찾아 수정할 수도 있습니다.
개발자로서 더 빠르게 디버깅할 수 있도록 콘솔에서 사용할 수 있는 바로가기가 많이 있습니다. 그 중 하나가 $_입니다. 바로 가기. 이 바로가기는 콘솔에서 평가한 가장 최근 표현식의 값을 반환합니다. 예를 들어 승수 함수가 있다고 가정해 보겠습니다.
아래 이미지에서 $_가 어떻게 나타나는지 확인할 수 있습니다. 바로가기는 가장 최근에 평가된 표현식을 저장하기 위해 브라우저 콘솔에서 특수 변수로 사용됩니다.
$_ 없이 간단히 말해서, 전체 함수 호출을 다시 입력하거나 다음과 같은 변수에 결과를 저장할 수 있습니다:
let result = multiply(5)
result(4) // returns 20
위 코드에서 multiply(5) 함수는 함수를 반환하고 해당 함수를 결과에 할당해야 하며, 그런 다음 4로 호출됩니다. 매개변수 result(4)로 .
더 복잡한 작업을 처리하거나 여러 단계의 계산을 수행할 때 이것이 이미 어떻게 중복성과 추가 단계를 도입했는지 알 수 있을 것입니다. $_가 여기에 있습니다. 바로가기가 빛난다. multiply(5)을 실행하면 코드를 콘솔에 입력하면 함수가 반환되어 $_에 저장됩니다. $_를 사용하여 액세스할 수 있는 콘솔의 변수 바로가기.
또 다른 단축키는 $0를 사용하는 것입니다. 콘솔에서 노드에 액세스합니다. $0 콘솔 내에서 DOM 트리의 현재 선택된 노드에 액세스하는 데 사용할 수 있습니다. DevTools로 웹페이지를 검사할 때 관심 있는 요소를 찾기 위해 Elements 패널의 DOM 트리를 탐색하는 경우가 많습니다. 이 패널에서 요소를 클릭하면 DevTools가 내부적으로 이 요소를 추적하고 해당 요소가 현재 선택된 요소가 됩니다.
$0 는 콘솔에서 현재 선택된 요소를 참조하는 단축키이므로 다시 선택하는 쿼리를 작성할 필요 없이 콘솔에서 직접 조작할 수 있습니다.
아래 스크린샷은 $0을 사용하는 방법을 보여줍니다. 콘솔에서 DOM 트리의 선택된 노드에 액세스하고 배경색을 원하는 대로 변경합니다.
위 이미지에서 요소 패널에서 원하는 요소를 검사하는 것부터 시작했습니다. 이제 document.querySelector('#element')를 사용하여 요소를 다시 쿼리하는 대신 , $0를 사용하면 됩니다. 다음과 같이 직접 조작하려면:
$0.style.backgroundColor = 'lightblue';
이 코드는 선택한 <div>의 배경색을 변경합니다. 부드러운 하늘색으로. $0을 실제로 만드는 이유 이 경우 유용한 점은 DOM에서 선택한 정확한 요소를 직접 참조할 수 있어 요소가 동적으로 생성되거나 깊이 중첩된 경우에도 올바른 요소로 작업하고 있는지 확인할 수 있다는 것입니다.
Block Resource Request DevTools 기능은 웹 개발자가 특정 리소스를 로드할 수 없을 때 웹사이트가 어떻게 작동하는지 테스트하는 데 중요한 기능입니다.
이 기능을 사용하면 이미지, JavaScript, CSS 또는 전체 도메인에 접근할 수 없는 상황을 시뮬레이션하고 해당 상황에서 웹페이지가 어떻게 작동하는지 확인할 수 있습니다.
브라우저에서 요청한 리소스가 항상 다운로드된다는 보장은 없으므로 웹사이트 사용자에게 예상치 못한 경험이 발생할 수 있습니다. Chrome, Firefox, Edge에서 리소스에 대한 요청을 차단하고 사이트가 어떻게 작동하는지 테스트할 수 있습니다.
Chrome 및 Edge에서:
-
네트워크 패널에서 차단하려는 리소스를 마우스 오른쪽 버튼으로 클릭하고 요청 URL 차단을 선택하세요.
-
웹사이트를 새로 고치면 차단된 리소스가 다운로드되지 않으며 웹페이지에 영향을 주지 않습니다.
아래 이미지에서는 네트워크 탭의 요청 URL 차단 옵션을 사용하여 CSS 요청을 차단하고 선택한 CSS 파일이 로드되지 않을 경우 웹페이지가 어떻게 보이는지 확인하고 있습니다.
위 이미지에서 이미지, CSS 파일, JavaScript 파일 등에 대한 요청을 포함하여 웹페이지에서 수행된 모든 네트워크 요청을 볼 수 있습니다. 제 경우에는 CSS 파일만 표시되도록 필터링했습니다.
여기에서 네트워크 패널의 CSS 파일을 마우스 오른쪽 버튼으로 클릭하고 요청 URL 차단을 선택할 수 있습니다. 이 작업을 수행하면 다음에 페이지를 새로 고칠 때 브라우저가 특정 CSS 파일을 로드하지 못하게 됩니다.
요청을 차단함으로써 이상한 동작을 감시할 수 있으며 차단된 리소스가 없을 때 페이지 로드 시간과 성능에 어떤 영향을 미칠 수 있는지 측정할 수도 있습니다.
파이어폭스:
-
네트워크 패널에서 차단하려는 리소스를 마우스 오른쪽 버튼으로 클릭하고 URL 차단을 선택하세요.
-
페이지를 새로고침하세요.
나는 특정 JavaScript 파일을 로드하지 않을 때 내 사이트가 어떻게 작동하는지 테스트하기 위해 이것을 사용했습니다. 이 기능은 사용자가 JavaScript를 비활성화할 때 발생할 수 있는 문제를 개발자가 디버깅하는 데 도움이 될 수 있습니다.
DevTools의 가장 멋진 기능 중 하나는 브라우저에서 바로 네트워크 요청을 편집하고 다시 보내는 기능입니다. 이 기능은 네트워크 요청 문제를 디버깅하는 데 정말 유용할 수 있습니다. 예를 들어 프런트엔드 코드를 변경하거나 전체 요청 프로세스를 다시 시작하지 않고도 요청 매개변수, 헤더 또는 본문의 변경 사항이 서버의 응답에 어떤 영향을 미치는지 확인하려는 시나리오가 있습니다.
네트워크 요청 시 백엔드 서비스에 대한 요청이 실패하거나 의도한 데이터로 응답하지 않을 수 있습니다. 요청을 다시 시도하려면 전체 페이지를 다시 로드해야 하기 때문에 편집 및 재전송 기능이 도움이 됩니다.
Edge 및 Firefox 브라우저에서는 아래 이미지와 같이 편집하거나 재전송하려는 요청을 마우스 오른쪽 버튼으로 클릭하고 편집 및 재전송을 선택하여 네트워크 요청을 편집하고 재전송할 수 있습니다.
위 이미지에서는 웹사이트에 로그인을 시도했습니다. 사용자가 자격 증명을 제출하면 양식에서 POST를 보냅니다. API 엔드포인트 /auth/login에 대한 요청 , 사용자의 사용자 이름과 비밀번호를 포함합니다.
때때로 서버가 400를 반환할 수 있습니다. 잘못된 요청 오류입니다. 오류를 디버깅하고 이유를 찾으려면 요청을 다시 시도해야 합니다. 양식을 계속 작성하고 싶지 않기 때문에 아래와 같이 편집 및 재전송 기능을 사용합니다.
위 이미지는 편집 및 재전송을 클릭하면 열리는 네트워크 콘솔 또는 사이드바이며, 요청 세부 정보를 보여줍니다. 여기에서 다음을 편집할 수 있습니다:
-
URL:필요한 경우 URL을 수정하거나 검색어 매개변수를 추가할 수 있습니다.
-
헤더:Content-Type 헤더가 없거나 잘못된 것을 발견할 수 있으며 여기에서 수정할 수 있습니다.
-
본문:사용자 이름이나 비밀번호 필드 수정 등 페이로드를 조정할 수 있는 곳입니다.
Chrome 브라우저에서 수정 및 재전송 기능은 XHR 요청에 대해서만 작동하며 요청을 마우스 오른쪽 버튼으로 클릭하고 재생을 선택하여 사용할 수 있습니다.
DevTools의 Coverage 도구를 사용하면 개발자는 웹페이지 로딩 및 상호작용 단계에서 사용되지 않은 채로 남아 있는 JavaScript 및 CSS 파일 영역을 찾아낼 수 있습니다. 더 빠른 페이지 로드 시간과 더 나은 사용자 경험을 위해 파일 크기를 줄이고 불필요한 코드를 제거하여 웹 성능을 향상시키는 중요한 기능입니다.
사용하지 않는 JS 및 CSS 코드를 제거하는 것은 사용자 대역폭을 절약하는 좋은 방법입니다. Coverage 도구를 사용하면 소스 코드에서 사용되지 않는 코드를 찾아 제거하거나 코드가 필요할 때까지 연기할 수 있습니다.
Chrome 및 Edge에서:
-
DevTools에서
Ctrl/cmd+Shift+P를 누르세요. , Coverage를 입력하고 Start Instrumenting Coverage를 선택하고 페이지를 새로 고친 다음 Enter 키를 누르세요. -
사용되지 않은 바이트 열이 포함된 JS 및 CSS 파일 표가 표시됩니다.
-
파일 중 하나를 클릭하여 엽니다. 옆의 선은 빨간색으로 사용되지 않은 코드 섹션을 나타냅니다.
아래 이미지에서는 잠재적으로 코드 로딩을 제거하거나 지연시키기 위해 사용되지 않는 CSS 코드를 식별하고 있습니다.
위 이미지에서 기록이 완료된 후 Coverage 도구는 자세한 측정항목과 함께 페이지에서 로드한 CSS 및 JavaScript 파일 목록을 표시합니다.
-
총 바이트 수:파일 크기입니다.
-
사용되지 않은 바이트:파일에서 사용되지 않은 바이트 수입니다.
-
사용 시각화:사용된 코드와 사용되지 않은 코드의 비율을 나타내는 시각적 막대입니다.
Safari:소스 패널에서 왼쪽 탐색 사이드바를 열고 JS 파일을 클릭합니다. 툴바 오른쪽 상단에서 커버리지 아이콘 c를 클릭하세요. 페이지를 새로고침하세요. 실행되지 않은 코드 섹션이 회색으로 표시되는 것을 볼 수 있습니다.
접근성 트리는 요소 DOM 트리와 유사하며 화면 판독기와 같은 보조 기술에서 웹 콘텐츠를 읽는 데 사용됩니다. 개발자는 이 기능을 사용하여 웹사이트의 접근성 문제를 디버깅할 수 있습니다. Chromium 브라우저는 이를 가능하게 하기 위해 Chrome의 접근성 API를 사용하는 반면 Firefox에는 자체 접근성 도구가 있습니다.
Chrome 및 Edge에서:
-
설정 페이지에서 실험 탭을 선택하세요.
-
요소 패널에서 전체 접근성 트리 보기 활성화 옵션 확인란을 선택하세요.
-
DevTools를 새로 고치고 Elements 도구로 이동하세요.
-
요소 보기의 오른쪽 상단에서 DOM 트리 보기로 전환을 클릭하세요.
예를 들어, 아래 이미지에서는 웹사이트의 링크와 버튼이 올바르게 인식되고 스크린 리더를 사용하는 사용자가 액세스할 수 있는지 확인하고 있습니다.
접근성 트리를 활성화하면 접근성과 관련된 요소에 초점을 맞춘 DOM 트리의 단순화된 버전을 볼 수 있습니다. 속성을 보기 위해 접근성 트리에서 요소를 선택하면 트리에 해당 요소의 역할, 이름, 기타 중요한 속성(예:aria-label)이 표시됩니다.
또한 요소에 포커스가 가능한지, 계산된 접근성 속성이 무엇인지도 확인할 수 있습니다.
요소가 접근성 트리에 올바르게 표시되지 않거나 필수 속성이 누락된 경우 접근성을 향상시키기 위해 HTML 또는 ARIA 속성을 조정해야 할 수 있으므로 이는 큰 도움이 됩니다.
파이어폭스:
-
Firefox DevTools에서 접근성 탭을 클릭하고 문서 노드를 확장하세요.
-
다른 노드를 클릭하면 해당 속성을 볼 수 있습니다.
-
노드에 대한 접근성 문제는 확인 탭에 표시됩니다.
요약
간단히 말해서 최신 크로스 브라우저 DevTools 기능을 최신 상태로 유지하면 웹 개발자로서 시간을 절약할 수 있습니다. 이 게시물에서는 요소 검사 팁, 디버깅 프로세스를 더 쉽게 만드는 몇 가지 콘솔 단축키, 네트워크 모니터링을 위한 몇 가지 유용한 팁을 다룹니다.
개발자 경험을 향상시키기 위해 계속해서 더 많은 DevTools 기능을 탐색하고 사용하시기 바랍니다.
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요