Chrome 개발자 모드란 무엇이며 용도는 무엇인가요?

완벽하게 구축된 웹사이트는 없습니다. 사람이 만든 모든 제품과 마찬가지로 코드 오류도 프로세스의 일부입니다. 그렇기 때문에 사용자에게 가능한 최고의 경험을 제공하기 위해 가능한 한 오류가 없는지 확인하기 위해 구축하는 모든 새 웹사이트를 철저히 테스트하는 것이 중요합니다. 

Google ChromeDevTools 키트를 먼저 시도하지 않고 웹 사이트를 테스트해서는 안 됩니다. Chrome 개발자 모드를 사용하면 새 사이트(또는 기존 사이트)를 시도하고 철저하게 테스트하여 버그를 찾고 수정할 수 있습니다. 또한 소스 코드 보기를 포함하여 다른 사이트가 실행되는 방식에 대한 통찰력을 제공할 수 있습니다. 

다음은 Google Chrome(Google Chrome) 브라우저 개발자 모드, 포함된 도구 및 효과적으로 사용하는 방법에 대해 알아야 할 모든 것 입니다.

Chrome 개발자 모드란 무엇입니까?(What Is Chrome Developer Mode?)

Chrome 개발자 모드는 (Chrome)Chromebook(Chromebooks) 에서 볼 수 있는 것과 동일한 개발자 모드(same developer mode) 를 말하는 것이 아닙니다 . 우리가 말하는 것은 브라우저 자체에 내장된 광범위한 Chrome 개발 도구( Google DevTools 라고 함)입니다.(Google DevTools)

이들은 테스트 목적으로 Chrome(Google Chrome) 브라우저에 로드한 웹 페이지를 테스트, 분석 및 의도적으로 중단하도록 설계된 도구입니다(필요한 경우). 기본 수준에서 DevTools 를 사용하여 웹 사이트의 소스 코드를 볼 수 있으므로 사이트가 어떻게 구축되었고 얼마나 잘 실행되었는지 확인할 수 있습니다.

그러나 Google DevTools(Google DevTools) 는 이보다 더 많은 것을 제공합니다. Chrome 개발자 모드를 사용하여 페이지가 로드된 후 변경하고 Chrome 콘솔 명령을 실행 하여 페이지(Google Chrome) 를 제어 및 조작할 수 있을 뿐만 아니라 속도 및 네트워크 테스트를 실행하여 웹 트래픽을 모니터링할 수 있습니다.

Chrome DevTools 모드 에서 다양한 운영 체제 및 화면 해상도를 비롯한 다른 기기를 에뮬레이트할 수도 있습니다 . 이를 통해 사이트에 반응형 웹 디자인이 있는지, 장치 해상도 또는 유형에 따라 사이트 콘텐츠 및 레이아웃이 변경되는 위치를 확인할 수 있습니다.

이러한 도구는 전문 웹 개발자 또는 테스터를 대상으로 하지만 표준 Chrome 사용자가 (Chrome)DevTools 제품군 을 사용하는 방법을 아는 것도 편리합니다. 해결할 수 없는 사이트 문제가 있는 경우 Chrome 개발자 모드로 전환하면 문제가 사이트에 있는지 아니면 브라우저에 있는지 확인하는 데 도움이 될 수 있습니다.

Google Chrome DevTools 메뉴에 액세스하는 방법(How To Access Google Chrome DevTools Menu)

사용하려는 도구에 따라 Google Chrome DevTools 메뉴에 액세스할 수 있는 몇 가지 방법이 있습니다 .

이 작업을 수행하는 가장 쉬운 방법은 Google Chrome 메뉴를 사용하는 것입니다. 이렇게 하려면 오른쪽 상단에 있는 점 3개 메뉴 아이콘 을 클릭합니다. (three-dots menu icon)표시되는 메뉴에서 More Tools > Developer Tools 를 클릭 합니다.

그러면 열려 있는 Chrome 탭 또는 창의 오른쪽에 있는 새 메뉴에서 DevTools 키트가 열립니다.(DevTools)

키보드 단축키를 사용하여 이 작업을 수행할 수도 있습니다. Windows 또는 Linux PC 에서 Chrome 브라우저를 열고 F12 키를 누릅니다. 열려 있는 Chrome 탭이나 창 에서 Ctrl + Alt + J 또는 Ctrl + Alt + I 키를 누를 수도 있습니다.

macOS에서는 F12 를 누르거나 Option + Command + J 또는 Option + Command + I 키를 눌러 대신 Chrome DevTools 메뉴를 엽니다. 그러면 DevTools(DevTools) 메뉴 상단에 다른 Chrome 도구로 이동할 수 있는 옵션이 있는 (Chrome)Chrome 콘솔 이 열립니다 .

원하는 경우 열려 있는 웹 페이지에서 마우스 오른쪽 버튼을 클릭하고 검사(Inspect ) 옵션 을 클릭하여 웹 사이트의 소스 코드를 볼 수 있습니다( 프로세스에서 DevTools 메뉴의 (DevTools)요소(Elements) 탭 열기).

Chrome DevTools 사용(Using Chrome DevTools)

간단히 설명했듯이 Chrome DevTools 키트를 사용하여 (Chrome DevTools)요소(Elements) 탭 에서 웹사이트의 소스 코드를 볼 수 있습니다. 로드한 페이지의 코드를 분석하고 콘솔(Console) 탭 아래의 Chrome 콘솔에서 오류 메시지(사이트가 로드된 방식에 대한 문제를 나타냄)를 볼 수 있습니다 .

소스(Sources) 탭 에서 웹 사이트의 콘텐츠에 대한 다양한 소스를 볼 수도 있습니다 . 예를 들어 사이트 에서 CDN(콘텐츠 전송 네트워크)을 사용하는(using a content delivery network (CDN)) 경우 사이트 의 미디어는 여기에 다른 소스로 나열됩니다.

Chrome 개발자 모드를 사용하면 해당 콘텐츠를 직접 다운로드하거나 콘텐츠에 대한 보다 복잡한 분석을 수행할 수 있습니다.

사이트의 성능을 테스트하려면 네트워크(Network) 탭에서 네트워크 사용량을 모니터링하고 기록할 수 있습니다. 브라우저와 사이트 간에 이루어진 네트워크 요청의 속도, 크기 및 유형이 표시됩니다.

예를 들어 페이지가 처음 로드될 때 사이트는 페이지 콘텐츠 자체를 로드하지만 타사 데이터베이스의 데이터를 요청할 수도 있습니다. 예를 들어 로그인하면 여기에 네트워크 요청으로 표시되는 데이터베이스를 쿼리할 수 있습니다.

성능(Performance ) 탭에서 이를 더 자세히 분석할 수 있습니다. 여기 에서 다양한 지점에서 스크린샷을 기록하는 것을 포함 하여 Chrome 브라우저 사용을 더 깊이 기록할 수 있습니다. (Chrome)추가 분석을 위해 사이트를 로드하는 데 걸리는 시간을 기록합니다.

Google 크롬은 PC 메모리를 많이 사용하는 것으로 유명하므로 (being hard on your PC memory)메모리(Memory) 탭 에서 사이트의 JavaScript 메모리 사용량을 테스트할 수 있습니다 . 여기에서 다양한 Chrome(Different Chrome) 테스트 프로필을 사용할 수 있으며 이 테스트에 대한 추가 정보는 Chrome DevTools 설명서 페이지(Chrome DevTools documentation page) 에서 확인할 수 있습니다.

사이트 콘텐츠와 사용 중인 브라우저 저장소(예: 데이터 기록)에 대한 보다 심층적인 분석을 위해 애플리케이션(Application) 탭을 통해 검색할 수 있습니다. 쿠키(Cookies) 섹션 에서 사이트 쿠키 정보를 보거나 저장소 지우기(Clear storage) 옵션 을 클릭하여 사용 중인 저장소를 지울 수 있습니다.

사이트 보안이 걱정된다면 보안(Security ) 탭에서 사이트가 얼마나 잘 작동하는지 확인할 수 있습니다. 이렇게 하면 페이지에 정확하고 신뢰할 수 있는 SSL(SSL) 인증서 가 있는지 여부를 포함하여 페이지에 대한 Chrome의 보안 분석에 대한 간략한 개요가 제공됩니다 .

일반적인 사용자 표준을 충족하는지 여부와 사이트 성능이 검색 엔진 최적화에 영향을 미칠 수 있는 경우를 포함하여 사이트 성능에 대한 보고서를 생성하려는 경우 등대(Lighthouse) 탭을 클릭할 수 있습니다. 보고서에 대해 선택하거나 선택 취소할 수 있는 설정을 제공합니다. 보고서 생성(Generate report) 을 클릭 하여 볼 보고서를 만듭니다.

이것은 Chrome 개발자 모드가 개발자에게 가져올 수 있는 잠재력의 표면을 거의 긁지 않습니다. 더 자세히 알아보려면 Chrome DevTools 설명서(Chrome DevTools documentation) 를 사용하여 자체 사용자 테스트를 빌드하는 방법을 포함하여 제공되는 도구 및 기능에 대해 도움을 받을 수 있습니다. 

고급 Google 크롬 트릭(Advanced Google Chrome Tricks)

대부분의 Chrome 사용자는 브라우저에 Google Chrome DevTools(Google Chrome DevTools) 키트가 있다는 사실을 전혀 알지 못하지만 고급 사용자에게는 웹사이트를 테스트하고 분석하는 데 매우 유용한 방법입니다. 사이트를 추가로 테스트하는 데 도움이 되는 웹 개발자용 타사 Chrome 확장 프로그램 도 있습니다.(Chrome extensions for web developers)

기본 웹사이트를 구축하는(building a basic website) 경우 Chrome 개발자 모드 로 전환하면 즉시 표시되지 않는 사이트 오류를 ​​찾는 데 도움이 될 수 있습니다. Chrome 이 올바르게 작동하는 경우에만 이 작업을 수행할 수 있으므로 Chrome 충돌 문제로 어려움을 겪고(struggling with Chrome crashes) 있다면 먼저 브라우저를 재설정하거나 다시 설치해야 할 수 있습니다.



About the author

저는 이 분야에서 거의 10년의 경험을 가진 소프트웨어 엔지니어이자 블로거입니다. 저는 Mac 및 Windows 플랫폼을 위한 도구 리뷰 및 튜토리얼 제작을 전문으로 할 뿐만 아니라 소프트웨어 개발 주제에 대한 전문가 논평을 제공합니다. 저는 또한 전 세계의 기술 컨퍼런스에서 프레젠테이션을 한 전문 연사이자 강사입니다.



Related posts