Chrome 개발자 도구를 사용하여 WordPress 웹사이트를 개선하는 방법

Chrome 개발자 도구(DevTools)는 Google Chrome용 웹 작성 및 디버그 도구 모음입니다. DevTools는 웹 페이지를 빌드하는 요소에 대한 액세스를 제공합니다. DevTools를 사용하여 레이아웃 문제를 해결하고, CSS를 확인 및 수정하고, JavaScript 중단점을 설정하고, 최적화를 위해 코드를 검사하는 등의 작업을 수행할 수 있습니다. DevTools는 무료이며 이미 Chrome 브라우저에 내장되어 있습니다. 따라서 Chrome이 있다면 이미 가지고 있는 것입니다.

이 기사에서는 도구가 무엇이고 도구를 사용하여 WordPress 웹 사이트를 개선하는 방법에 대한 개요를 얻을 수 있습니다.

도구 열기

도구를 여는 방법에는 여러 가지가 있습니다.

1. Chrome 메뉴를 선택하고 도구를 선택한 다음 개발자 도구를 선택합니다.
2. 화면의 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사(내가 선호하는 방법)를 선택합니다.
3. Ctrl + Shift + I(PC용) | Cmd + Opt + I(Mac용)

DevTools 창

도구 창에는 두 개의 패널이 있습니다. 둘 다 함께 사용할 수 있는 도구가 포함되어 있습니다. 다음은 도구를 살펴보겠습니다.

첫 번째 도구에는 8개의 도구 그룹이 있습니다. 도구에는 다음이 포함됩니다.

• 집단
• 회로망
• 출처
• 타임라인
• 프로필
• 자원
• 감사
• 콘솔

두 번째 섹션에는 다음이 포함됩니다.

• 스타일
• 계산됨
• 이벤트 리스너
• DOM(문서 개체 모델) 중단점
• 속성

도구를 볼 수 있는 여러 가지 방법이 있습니다. 창 크기를 조정하여 공간을 만들 수 있습니다. 창을 화면 오른쪽으로 재배치하여 한쪽에는 도구가 있고 다른 한쪽에는 웹사이트가 있는 분할 화면을 제공할 수도 있습니다.

집단

이 패널에는 페이지의 HTML 요소를 나타내는 DOM 트리가 표시되며 모든 요소를 ​​검사하거나 편집할 수 있습니다. CSS 조정을 실시간으로 볼 수 있습니다.

노드(화살표 또는 삼각형 모양)를 클릭하여 더 쉽게 보고 탐색할 수 있도록 패널을 열고 접을 수 있습니다. DOM 트리 보기는 원래 HTML이 아닌 트리의 현재 상태를 보여줍니다(예: JavaScript에 의해 수정되었을 수 있음).

트리 보기의 요소 위로 마우스를 가져가면 웹 페이지의 요소가 강조 표시됩니다. 글꼴 스타일, 이미지 크기 등과 같은 정보가 표시됩니다.

요소 중 하나를 클릭하면 오른쪽 창에 CSS가 표시됩니다. 여기에서 스타일을 선택하고 글꼴, 색상, 크기, 여백, 테두리, 패딩 등을 수정할 수 있습니다.

바닥글에 이동 경로가 표시되므로 필요한 경우 역추적할 수 있습니다. 요소를 클릭하고 변경 사항을 입력하기만 하면 요소를 편집할 수 있습니다. Enter 키를 누르면 변경 사항이 적용되는 것을 볼 수 있습니다.

예를 들어 이 이미지는 현재 너비가 600픽셀입니다. 너비를 선택하고 새 값을 입력한 다음 Enter 키를 누릅니다.

이미지가 즉시 새 크기로 변경됩니다.

글꼴의 스타일을 변경하려면 글꼴을 선택하고 오른쪽의 스타일 창에서 변경할 내용을 선택하기만 하면 됩니다.

요소를 끌어서 새 위치에 놓아 페이지 레이아웃을 변경할 수도 있습니다.

div를 드래그하여 최근 게시물 위로 최근 댓글을 이동합니다.

마우스 오른쪽 버튼을 클릭하면 새로운 기능 세트가 제공됩니다. 다양한 요소 상태를 보고, HTML로 수정하고, 나누기를 설정하고, CSS 경로를 복사하는 등의 작업을 수행할 수 있습니다. 마우스 오른쪽 버튼을 클릭하고 노드를 삭제할 수도 있습니다. 너무 쉬워서 거의 무섭습니다.

이 도구를 사용하여 이미지 크기를 찾고 코드 조각을 검사했습니다.

회로망

네트워크 패널은 웹사이트에서 어떤 리소스가 요청되고 다운로드되는지 보여줍니다. 실시간으로 그래프로 표시됩니다. 다운로드하는 데 가장 오래 걸리는 요소를 확인하면 페이지를 최적화하기 위해 수정해야 할 문제에 대한 통찰력을 얻을 수 있습니다.

폭포수와 같은 다양한 보기 및 차트 유형을 필터링하여 표시할 수 있습니다. 네트워크 활동을 기록하고 나중에 분석할 수 있도록 저장할 수 있습니다.

리소스의 세부 정보를 볼 수 있습니다. 세부 정보는 다음과 같습니다.

• HTTP 요청 및 응답 헤더 – 요청 URL, HTTP 메서드, 응답 상태 코드를 표시하고 HTTP 응답 및 요청 헤더와 해당 값, 쿼리 문자열 매개변수를 나열합니다.
• 리소스 미리보기 – 이미지 및 JSON 리소스에 대한 미리보기를 표시합니다.
• HTTP 응답 – 리소스의 형식이 지정되지 않은 콘텐츠를 보여줍니다.
• 쿠키 이름 및 값 – 리소스의 HTTP 요청 및 응답 헤더에서 전송된 쿠키와 삭제 쿠키를 표시합니다.
• WebSocket 메시지 – WebSocket 연결을 통해 보내거나 받은 메시지를 보여줍니다.
• 리소스 네트워크 타이밍 – 리소스 로드와 관련된 네트워크 단계에 소요된 시간 그래프를 보여줍니다.

폭포 보기는 요청 시작부터 요소의 마지막 바이트가 전달될 때까지 각 요소가 로드되는 데 걸리는 시간을 볼 수 있는 좋은 방법입니다. 어떤 요소가 가장 시간이 많이 걸리는지 확인하면 조정해야 할 부분을 더 잘 이해할 수 있습니다.

향후 분석을 위해 네트워크 데이터를 저장할 수 있습니다.

출처

소스 패널을 사용하여 로드된 페이지의 일부인 JavaScript 및 스크립트와 같은 코드를 보고 디버그할 수 있습니다. 일시 중지, 재개, 코드 단계별 실행 및 예외 시 일시 중지를 수행할 수 있습니다. 여기에는 기본 코드 실행 기능이 포함되어 있으므로 한 단계씩 건너뛰고, 한 단계씩 들어가고, 중단하고, 중단점을 토글할 수 있습니다. 중단점을 사용하여 JavaScript, DOM 업데이트 및 네트워크 호출을 디버그할 수 있습니다. 표현식이 true 또는 false로 반환될 수 있는 조건부 중단점을 설정할 수도 있습니다. 그런 다음 조건이 충족되면 중단점이 코드를 일시 중지합니다.

축소된 코드를 읽기 쉽게 만드는 예쁜 인쇄 기능이 있습니다. 이렇게 하면 중단점을 배치할 위치를 더 쉽게 볼 수 있습니다. 이것이 필요한 것처럼 작동하지 않으면 소스 맵이라는 JSON 기반 매핑 형식을 사용할 수 있습니다. 소스 맵은 이 기능이 내장된 축소기에 의해 생성됩니다.

타임라인

타임라인 패널은 페이지 로드 및 사용에 소요된 시간을 보여줍니다. 타임라인의 모든 이벤트를 그리고 플롯합니다. JavaScript, 스타일 계산 및 다시 그리기와 같은 리소스가 표시됩니다. 이벤트를 기록하고 단계별로 분석할 수 있습니다. 세 가지 모드가 있습니다.

• 이벤트 – 유형별로 구성된 모든 이벤트 목록입니다. 이것은 가장 시간이 많이 걸리는 작업을 보여줍니다.
• 프레임 – 웹사이트 렌더링 성능의 각 프레임에서 수행해야 하는 작업을 보여줍니다. 예를 들어, 사이트가 초당 60프레임으로 렌더링되는 경우 1/60초 안에 완료된 작업이 표시됩니다. 여기에는 스크립트 로드, 레이아웃 페인팅, 이벤트 처리 등이 포함됩니다. 이를 사용하여 페이지 로드 시 비정상적인 활동을 볼 수 있습니다.
• 메모리 – 시간 경과에 따른 메모리 사용량을 그래프로 표시합니다. 메모리에 보관된 모든 문서, 노드 및 이벤트 리스너를 보여줍니다. 이것은 메모리 누수의 원인을 파악하는 데 도움이 됩니다.

프로필

여기에서 웹 페이지 및 앱의 실행 시간과 메모리 사용량을 프로파일링할 수 있습니다. 이것은 리소스가 사용되는 위치를 보여줍니다. 이것은 코드를 최적화하는 좋은 도구입니다.

세 가지 프로필 유형을 기록합니다.

• JavaScript CPU 프로필 수집 - JavaScript 기능의 실행 시간을 보여줍니다.
• 힙 스냅샷 찍기 – JavaScript 개체의 메모리 사용량 및 배포를 보여줍니다.
• 힙 할당 기록 – 시간 경과에 따른 메모리 누수를 표시하기 위해 개체 할당을 기록합니다.

자원

이 패널을 사용하여 리소스를 검사할 수 있습니다. IndexedDB, 웹 SQL 데이터베이스, 앱 캐시 쿠키, 로컬 및 세션 저장소 등에 대한 정보를 표시합니다. 글꼴, 이미지 및 스타일시트와 같은 시각적 리소스를 검사할 수도 있습니다.

IndexedDB 탭을 사용하면 IndexedDB 데이터베이스 및 개체 저장소를 검사하고 레코드를 보고 삭제할 수 있습니다.

SQL 명령 을 실행하고 결과를 표 형식으로 볼 수 있습니다. 명령을 입력하면 테이블 이름, 명령 및 절에 대한 힌트가 제공됩니다.

쿠키 탭은 HTTP 또는 JavaScript에 의해 생성된 쿠키에 대한 정보를 보여줍니다. 개별적으로 또는 그룹으로 삭제할 수 있습니다.

Chrome은 애플리케이션 리소스를 캐시합니다. 응용 프로그램 캐시 탭을 사용하면 해당 리소스의 상태를 볼 수 있습니다. 또한 리소스의 URL, 리소스 유형 및 크기도 표시됩니다.

로컬 및 세션 스토리지 패널을 사용하면 스토리지 API로 생성한 로컬 및 세션 스토리지 키/값 쌍을 보고, 생성하고, 삭제하고, 편집할 수 있습니다.

감사

감사 패널은 페이지가 로드될 때 페이지를 분석하고 페이지 로드를 최적화하기 위한 수정 사항을 제안합니다. 정보를 네트워크 활용도와 웹 페이지 성능의 두 가지 범주로 분리하는 두 가지 감사가 있습니다. 두 감사를 모두 실행하거나 원하는 감사만 실행할 수 있습니다. 페이지의 현재 상태에서 감사를 실행하거나 페이지를 다시 로드하고 로드 시 감사할 수 있습니다.

Google PageSpeed ​​Insights만큼 자세하게 설명하지는 않지만 덜 걸린 열매를 수정하기에 충분한 정보를 제공합니다. PageSpeed ​​Insights를 거친 후 내 페이지는 괜찮은 모양이 되었지만 Insights가 제공하지 않은 내 사이트에 대한 일부 정보를 제공했습니다.

콘솔

콘솔은 디버깅에 사용됩니다. 진단을 기록하고, 명령을 입력하고, JavaScript를 평가하고, JavaScript 프로필을 만드는 등의 작업을 수행할 수 있습니다. 명령줄을 통해 콘솔에 정보를 쓸 수 있습니다. 명령줄을 사용하면 함수를 사용하여 DOM의 요소를 선택 및 검사하고, 이벤트를 모니터링하고, 프로파일러를 중지 및 시작할 수 있습니다.

장치 모드

내가 가장 좋아하는 기능 중 하나는 장치 모드입니다. 메뉴의 요소 왼쪽에 있는 작은 버튼을 사용하여 액세스할 수 있습니다. 장치 모드를 사용하면 23개의 다른 인기 모바일 장치(Kindle Fire, 여러 iPhone, 여러 Galaxy, 랩톱 등)에서 선택하고 해당 장치에서 웹사이트가 어떻게 보이고 반응하는지 확인할 수 있습니다.

화면을 드래그하여 사용자 정의 화면 크기를 만들 수도 있습니다. 커서는 손가락 끝을 모방하여 화면이 손가락과 마찬가지로 마우스와 반응합니다. 설정 화면에서 나만의 맞춤형 장치를 만들 수도 있습니다.

또한 네트워크 유형(3G, 4G, Wi-Fi 등)을 선택하여 다양한 네트워크 및 속도에서 사이트가 어떻게 보이고 반응하는지 분석할 수 있습니다.

서랍

화면 하단에 서랍이 있습니다. 도구 모음 오른쪽에 있는 >_ 버튼으로 켜거나 끌 수 있습니다. 서랍에는 다음이 포함됩니다.

• 콘솔 – 콘솔 명령줄입니다. 이렇게 하면 다른 패널을 사용할 때 콘솔을 사용할 수 있습니다.
• 검색 – 모든 출처를 찾습니다. 대소문자를 무시하고 정규식을 검색하도록 선택할 수 있습니다.
• 에뮬레이션 – 장치 모드용 도구 및 설정. 여기에는 가속도계 및 지리적 위치 좌표와 같은 기능이 포함됩니다.
• 렌더링 - fps 미터, 합성 레이어 테두리 등과 같은 렌더링 기능을 보여줍니다. 이 기능의 가장 좋은 점은 잠재적인 병목 현상을 보여줍니다.

일부 패널에는 이러한 도구에 대한 액세스가 포함되어 있지 않으므로 서랍에 이러한 도구를 두는 것이 좋습니다.

마지막 생각들

Chrome 개발자 도구(DevTools)는 웹사이트를 개선하는 데 도움이 되는 놀라운 웹 작성 및 디버그 도구 모음입니다. 요소를 빠르게 끌어다 놓아 사이트 레이아웃을 변경하고, 메모리 누수 문제를 해결하고, 페이지 로드 문제를 해결하고, 거의 모든 모바일 장치 및 화면 크기에서 웹사이트를 보는 등 많은 작업을 수행할 수 있습니다. 이 개요는 이러한 도구가 얼마나 강력한지 간략하게 설명한 것입니다. 가장 좋은 점은 이미 Chrome에 내장되어 있으므로 아무 것도 다운로드할 필요가 없다는 것입니다.

당신의 의견을 듣고 싶습니다. Chrome 개발자 도구를 사용합니까? 가장 좋아하는 기능은 무엇입니까? 당신은 무엇을 가장 많이 사용합니까? 도구 사용에 대한 팁이 있습니까? 의견에 대해 알려주십시오.