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