완벽하게 구축된 웹사이트는 없습니다. 사람이 만든 모든 제품과 마찬가지로 코드 오류도 프로세스의 일부입니다. 그렇기 때문에 사용자에게 최상의 경험을 제공하기 위해 가능한 한 오류가 없는지 확인하기 위해 구축하는 모든 새 웹사이트를 철저히 테스트하는 것이 중요합니다.
Google Chrome의 DevTools 키트를 먼저 시도하지 않고 웹사이트를 테스트해서는 안 됩니다. Chrome 개발자 모드를 사용하면 새 사이트(또는 기존 사이트)를 시도하고 철저하게 테스트하여 버그를 찾고 수정할 수 있습니다. 또한 소스 코드 보기를 포함하여 다른 사이트가 실행되는 방식에 대한 통찰력을 제공할 수 있습니다.
다음은 Google Chrome 브라우저 개발자 모드, 포함된 도구 및 효과적인 사용 방법에 대해 알아야 할 모든 것입니다.
Chrome 개발자 모드란 무엇입니까?
Chrome 개발자 모드는 Chromebook에서 볼 수 있는 것과 동일한 개발자 모드를 말하는 것이 아닙니다. 우리가 말하는 것은 광범위한 Chrome 개발 도구(Google DevTools ) 브라우저 자체에 내장되어 있습니다.
이들은 테스트 목적으로 Chrome 브라우저에 로드한 웹 페이지를 테스트, 분석 및 의도적으로 중단하도록 설계된 도구입니다(필요한 경우). 기본 수준에서 DevTools를 사용하여 웹사이트의 소스 코드를 볼 수 있으며, 이를 통해 사이트가 어떻게 구축되었고 얼마나 잘 실행되었는지 확인할 수 있습니다.
그러나 Google DevTools는 이보다 더 많은 것을 제공합니다. Chrome 개발자 모드를 사용하여 페이지가 로드된 후 변경하고 Chrome 콘솔 명령을 실행하여 페이지를 제어 및 조작할 수 있을 뿐만 아니라 속도 및 네트워크 테스트를 실행하여 웹 트래픽을 모니터링할 수 있습니다.
Chrome DevTools 모드에서 다양한 운영 체제 및 화면 해상도를 비롯한 다른 기기를 에뮬레이트할 수도 있습니다. 이를 통해 사이트에 반응형 웹 디자인이 있는지, 기기의 해상도나 유형에 따라 사이트 콘텐츠 및 레이아웃이 변경되는 위치를 확인할 수 있습니다.
이러한 도구는 전문 웹 개발자 또는 테스터를 대상으로 하지만 표준 Chrome 사용자가 DevTools 제품군을 사용하는 방법을 아는 것도 편리합니다. 해결할 수 없는 사이트 문제가 있는 경우 Chrome 개발자 모드로 전환하면 문제가 사이트에 있는지 아니면 브라우저에 있는지 확인하는 데 도움이 될 수 있습니다.
Google Chrome DevTools 메뉴에 액세스하는 방법
사용하려는 도구에 따라 몇 가지 방법으로 Chrome DevTools 메뉴에 액세스할 수 있습니다.
이 작업을 수행하는 가장 쉬운 방법은 Google Chrome 메뉴를 사용하는 것입니다. 이렇게 하려면 점 3개로 된 메뉴 아이콘을 클릭합니다. 오른쪽 상단에 있습니다. 표시되는 메뉴에서 추가 도구> 개발자 도구를 클릭합니다. .
그러면 열려 있는 Chrome 탭 또는 창의 오른쪽에 있는 새 메뉴에서 DevTools 키트가 열립니다.
키보드 단축키를 사용하여 이 작업을 수행할 수도 있습니다. Windows 또는 Linux PC에서 Chrome 브라우저를 열고 F12 키를 누릅니다. 열쇠. Ctrl + Alt + J를 누를 수도 있습니다. 또는 Ctrl + Alt + I 열려 있는 Chrome 탭 또는 창의 키
macOS의 경우 F12 키를 누릅니다. 또는 Option + Command + J를 누릅니다. 또는 Option + Command + I 대신 Chrome DevTools 메뉴를 열려면 키를 누르세요. 그러면 DevTools 메뉴 상단에 다른 Chrome 도구로 이동할 수 있는 옵션이 있는 Chrome 콘솔이 열립니다.
원하는 경우 웹사이트의 소스 코드를 볼 수 있습니다(요소 프로세스에서 DevTools 메뉴의 탭) 열려 있는 웹 페이지에서 마우스 오른쪽 버튼을 클릭하고 검사 옵션.
Chrome DevTools 사용
간단히 설명했듯이 Chrome DevTools 키트를 사용하여 요소 아래에서 웹사이트의 소스 코드를 볼 수 있습니다. 탭. 로드한 페이지의 코드를 분석하고 콘솔 아래의 Chrome 콘솔에서 오류 메시지(사이트가 로드된 방식에 대한 문제를 나타냄)를 볼 수 있습니다. 탭.
소스 아래에서 웹사이트의 콘텐츠에 대한 다양한 소스를 볼 수도 있습니다. 탭. 예를 들어 사이트에서 CDN(콘텐츠 전송 네트워크)을 사용하는 경우 사이트의 미디어는 여기에 다른 소스로 나열됩니다.
Chrome 개발자 모드를 사용하면 해당 콘텐츠를 직접 다운로드하거나 더 복잡한 콘텐츠 분석을 수행할 수 있습니다.
사이트의 성능을 테스트하려면 네트워크에서 네트워크 사용량을 모니터링하고 기록할 수 있습니다. 탭. 브라우저와 사이트 간에 이루어진 네트워크 요청의 속도, 크기 및 유형이 표시됩니다.
예를 들어 페이지가 처음 로드될 때 사이트는 페이지 콘텐츠 자체를 로드하지만 타사 데이터베이스의 데이터를 요청할 수도 있습니다. 예를 들어 로그인하면 여기에 네트워크 요청으로 표시되는 데이터베이스를 쿼리할 수 있습니다.
실적 에서 더 자세히 분석할 수 있습니다. 탭에서 다양한 지점에서 스크린샷을 기록하는 것을 포함하여 Chrome 브라우저 사용을 더 깊이 기록할 수 있습니다. 추가 분석을 위해 사이트를 로드하는 데 걸리는 시간을 기록합니다.
Chrome은 PC 메모리를 많이 사용하는 것으로 유명하므로 메모리에서 사이트의 JavaScript 메모리 사용량을 테스트할 수 있습니다. 탭. 여기에서 다양한 Chrome 테스트 프로필을 사용할 수 있으며 이 테스트에 대한 추가 정보는 Chrome DevTools 문서 페이지에서 확인할 수 있습니다.
사이트 콘텐츠 및 사용 중인 브라우저 저장소(예:데이터 기록용)에 대한 보다 심층적인 분석을 위해 응용 프로그램을 통해 검색할 수 있습니다. 탭. 쿠키 아래에서 사이트 쿠키 정보를 볼 수 있습니다. 섹션을 클릭하거나 저장용량 지우기를 클릭하여 사용 중인 저장소를 지웁니다. 옵션.
사이트 보안이 걱정된다면 보안 에서 사이트가 얼마나 잘 작동하는지 확인할 수 있습니다. 탭. 이렇게 하면 페이지에 정확하고 신뢰할 수 있는 SSL 인증서가 있는지 여부를 포함하여 페이지에 대한 Chrome의 보안 분석에 대한 간략한 개요가 제공됩니다.
일반적인 사용자 표준을 충족하고 사이트 성능이 검색 엔진 최적화에 영향을 미칠 수 있는지 여부를 포함하여 사이트 성능에 대한 보고서를 생성하려면 Lighthouse 탭. 보고서에 대해 선택하거나 선택 취소할 수 있는 설정을 제공합니다. 보고서 생성을 클릭합니다. 볼 보고서를 생성합니다.
이것은 Chrome 개발자 모드가 개발자에게 가져올 수 있는 잠재력의 표면을 거의 긁지 않습니다. 더 자세히 알아보려면 Chrome DevTools 문서에서 사용자 테스트를 빌드하는 방법을 포함하여 제공되는 도구와 기능에 대해 도움을 받을 수 있습니다.
고급 Google 크롬 트릭
대부분의 Chrome 사용자는 브라우저에 Google Chrome DevTools 키트가 있다는 사실을 전혀 알지 못하지만 고급 사용자에게는 웹사이트를 테스트하고 분석하는 데 매우 유용한 방법입니다. 사이트를 추가로 테스트하는 데 도움이 되는 웹 개발자용 타사 Chrome 확장 프로그램도 있습니다.
기본 웹사이트를 구축하는 경우 Chrome 개발자 모드로 전환하면 즉시 표시되지 않는 사이트 오류를 찾는 데 도움이 될 수 있습니다. Chrome이 올바르게 작동하는 경우에만 이 작업을 수행할 수 있으므로 Chrome 충돌 문제로 어려움을 겪고 있다면 먼저 브라우저를 재설정하거나 다시 설치해야 할 수 있습니다.