Chrome DevTools는 개발자에게 필수적인 자산입니다. 다른 브라우저는 매우 편리한 문제 해결 도구를 제공하지만 Chrome DevTools는 다기능 인터페이스와 인기로 인해 주목할만한 가치가 있습니다.
Chrome은 강력한 디버깅 도구 모음으로 인해 개발자에게 가장 인기 있는 브라우저입니다. Chrome DevTools를 사용하는 것은 쉽지만 최대한 활용하려면 작동 방식을 이해해야 합니다.
Chrome 개발자 도구의 작동 방식
Chrome DevTools를 사용하면 오류 콘솔과 기타 디버깅 및 모니터링 도구를 통해 웹사이트의 문제를 해결할 수 있습니다. DevTools를 사용하면 프런트엔드 허점이 노출되고 웹사이트가 모바일 및 태블릿 기기에서 어떻게 표시되는지 모니터링할 수 있습니다.
DevTools를 사용하면 JavaScript, HTML 및 CSS와 같은 웹사이트 코드를 실시간으로 편집하고 변경 사항에 대한 즉각적인 결과를 얻을 수 있습니다.
DevTools를 통해 변경한 사항은 웹사이트에 영구적으로 영향을 미치지 않습니다. 실제 소스 코드에 적용한 것처럼 예상 결과만 일시적으로 표시됩니다. 이를 통해 웹사이트를 훨씬 빠르게 로드하고 버그를 쉽게 해결할 수 있는 방법을 찾을 수 있습니다.
Chrome DevTools에 액세스하는 방법
여러 가지 방법으로 Chrome DevTools에 액세스할 수 있습니다. Mac OS에서 단축키 방법으로 개발자 도구를 열려면 Cmd + Opt + I을 누르세요. . Windows OS를 사용하는 경우 Ctrl + Shift + I 키를 누릅니다. 키보드의 키.
또는 화면 오른쪽 상단 모서리에 있는 세 개의 점을 클릭하여 Chrome 개발자 도구에 액세스할 수 있습니다. 추가 도구로 이동 개발자 도구를 선택합니다. . 또 다른 옵션은 웹페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 옵션.
웹사이트 진단을 위한 Chrome 개발자 도구 사용
Chrome DevTools는 웹페이지를 조정하고 문제를 해결할 수 있는 여러 가지 방법을 제공합니다. DevTools가 도움이 될 수 있는 몇 가지 방법을 살펴보겠습니다.
스마트폰에서 웹사이트가 어떻게 보이는지 확인하세요
Chrome 브라우저를 개발자 모드로 전환하면 웹페이지의 절반 크기 버전이 렌더링됩니다. 그러나 이렇게 하면 스마트폰이나 태블릿에서 실제로 어떻게 보이는지 알 수 없습니다.
고맙게도 Chrome DevTools를 사용하면 웹페이지의 화면 크기를 설정하는 것 외에도 다양한 모바일 화면 유형과 버전 간에 전환할 수 있습니다.
해당 옵션에 액세스하려면 검사 방법. 다음으로 반응형을 클릭합니다. DevTools의 왼쪽 상단 모서리에 있는 드롭다운을 클릭하고 원하는 모바일 장치를 선택합니다. 그러면 웹페이지가 렌더링되고 선택한 모바일 장치의 크기에 맞게 조정됩니다.
웹페이지의 소스 파일에 액세스
Chrome DevTools를 통해 웹페이지를 구성하는 파일에 액세스할 수 있습니다. 이 파일에 액세스하려면 소스를 클릭하세요. DevTools 메뉴의 상단에 있는 옵션입니다. 이렇게 하면 웹사이트의 파일 시스템이 노출되고 편집도 가능합니다.
또한 소스 파일을 검색할 수 있습니다. 이는 리소스가 많은 웹 페이지를 다룰 때 유용할 수 있습니다. DevTools를 통해 소스 파일을 검색하려면 검색 콘솔 바로 위의 옵션입니다.
그러나 검색을 찾을 수 없는 경우 옵션에서 더 나은 대안은 바로 가기 키를 사용하는 것입니다. Mac OS의 경우 Cmd + Opt + F를 누릅니다. 소스 파일을 검색하는 키. Windows OS를 사용하는 경우 Ctrl + Shift + F를 누릅니다. 소스 파일 검색 창에 액세스하는 키입니다.
웹페이지에 실시간 편집 수행
DevTools를 사용하는 주요 목적 중 하나는 웹 페이지의 요소를 즉시 가짜 편집하는 것입니다. 개발자 도구로 전환하면 요소를 클릭하여 웹사이트의 HTML 콘텐츠를 수정할 수 있습니다. 옵션. 그런 다음 코드 편집기 내에서 변경 사항을 적용하려는 지점을 마우스 오른쪽 버튼으로 클릭하고 HTML로 편집을 선택합니다. .
인라인이 아닌 CSS 속성을 수정하려면 소스를 선택하세요. . 다음으로 편집할 CSS 파일을 선택합니다. 라이브 편집을 수행하려면 코드 콘솔 내에서 선택한 라인에 커서를 놓습니다. 이렇게 하면 웹 페이지에 적용한 스타일 변경 사항에 대한 즉각적인 피드백을 얻을 수 있습니다.
DevTools를 통해 페이지를 편집할 때 브라우저에서 페이지를 다시 로드하면 원래 형식으로 돌아가며 편집 내용은 나만 볼 수 있습니다. DevTools를 통한 편집은 원활한 실행이나 다른 사용자의 해당 웹사이트 사용에 영향을 미치지 않습니다.
DevTools 콘솔로 JavaScript 코드 디버그
JavaScript를 디버그하는 가장 좋은 방법 중 하나는 Chrome의 개발자 도구를 사용하는 것입니다. 잘못된 스크립트와 버그의 정확한 위치에 대한 직접 보고를 제공합니다.
JavaScript로 웹 사이트를 디자인하는 동안 항상 DevTools를 열어 두는 것이 좋습니다. 예를 들어 console.log() 실행 일련의 지침에 대한 JavaScript 명령은 프로그램이 성공적으로 실행되는 경우 DevTools 콘솔에 해당 로그의 결과를 표시합니다.
기본적으로 콘솔은 웹사이트의 모든 JavaScript 문제를 보고합니다. DevTools 하단에서 콘솔을 찾거나 콘솔을 클릭하여 액세스할 수 있습니다. Chrome DevTools 창 상단의 옵션
데이터베이스에서 리소스 로드 모니터링
JavaScript 디버깅 외에도 콘솔은 웹사이트 데이터베이스에서 올바르게 로드되지 않는 리소스에 대한 세부 정보를 제공할 수도 있습니다.
이것이 백엔드 문제를 디버깅하는 가장 좋은 방법은 아니지만 404를 반환하는 리소스를 알려줍니다. 해당 요소의 데이터베이스 쿼리를 실행한 후 오류가 발생했습니다.
Chrome 개발자 도구의 방향 전환
Chrome 개발자 도구의 위치를 변경하려면 DevTools 내에서 세 개의 메뉴 점(브라우저의 기본 점 아님)을 클릭하십시오. 그런 다음 도크 쪽에서 원하는 위치를 선택합니다. 옵션.
Chrome DevTools 확장 프로그램 설치
Chrome DevTools에서 작동하는 언어 또는 프레임워크별 확장 프로그램을 설치할 수도 있습니다. 이러한 확장 프로그램을 설치하면 웹페이지를 보다 효율적으로 디버그할 수 있습니다.
Chrome의 Featured DevTools Extensions 갤러리에서 Chrome DevTools에 사용 가능한 확장 프로그램 목록에 액세스할 수 있습니다.
웹사이트의 보안 문제 확인
Chrome DevTools를 사용하면 웹 보안 인증서의 가용성 및 연결 보안과 같은 매개변수를 기반으로 웹사이트가 얼마나 안전한지 평가할 수 있습니다. 웹사이트가 안전한지 확인하려면 보안 DevTools 상단의 옵션입니다.
보안 탭은 웹사이트의 보안 세부 정보에 대한 개요를 제공하고 잠재적인 위협을 알려줍니다.
웹사이트 감사
Chrome DevTools에는 특정 매개변수를 기반으로 웹사이트의 전체 성능을 확인할 수 있는 기능이 있습니다.
해당 기능에 액세스하려면 등대를 선택하세요. DevTools 창 상단의 옵션. 그런 다음 확인하려는 매개변수를 선택한 다음 모바일 또는 데스크톱 다양한 플랫폼에서 웹페이지의 성능을 확인하는 옵션입니다.
그런 다음 보고서 생성을 클릭합니다. 이전에 선택한 매개변수를 기반으로 웹페이지 분석을 실행합니다.
성능을 클릭하여 웹사이트의 런타임 또는 로드 성능을 평가할 수도 있습니다. 옵션. 테스트를 실행하려면 녹화 버튼 클릭 옆에 있는 아이콘을 클릭하세요. 런타임 분석을 수행하는 옵션입니다. 또는 그 아래에 있는 다시 로드 버튼을 클릭하여 로드 시간 성능을 평가하십시오. 중지를 클릭합니다. 분석기를 중지하고 결과를 표시합니다.
Chrome DevTools 활용
필요한 것에 따라 Chrome DevTools를 사용하면 단순한 웹 사이트 디버깅 이상의 작업을 수행할 수 있습니다. 고맙게도 DevTools는 모든 기술 수준의 프로그래머가 사용하기 쉽습니다. 방문하는 웹사이트의 소스 코드를 검색하여 웹사이트 프론트엔드 개발의 몇 가지 기본 사항을 배울 수도 있습니다.
이 기사에서 다루지 않은 다른 옵션을 발견할 수도 있습니다. 따라서 사용 가능한 기능을 자유롭게 사용하십시오. 게다가 이러한 기능을 조정해도 웹사이트에 피해를 주지 않습니다.