지금 바로 Chrome 개발자 도구를 사용해야 하는 이유

웹사이트를 테스트하는 데 도움이 되는 유용한 도구 세트를 보유하는 것은 개발자에게 필수적입니다. 보관하기에 가장 좋은 장소는 어디인가요? 물론 브라우저에서! Google의 인기 있는 웹 브라우저인 Chrome에는 개발자 도구가 내장되어 있습니다. 웹 작성 및 디버깅을 위해 만들어진 도구 모음입니다. Chrome 개발자 도구(DevTools라고 함)를 사용하면 개발자가 웹 브라우저 및 웹 앱의 내부 작동에 액세스할 수 있습니다.

Chrome DevTools를 사용하면 사용된 스타일, 이미지 크기, 사용된 스크립트 등을 알 수 있습니다. 디버그하고 페이지에 어떤 오류가 있는지 알 수 있습니다. 스타일을 켜거나 끄거나 완전히 변경하여 웹사이트에 어떤 영향을 미치는지 확인할 수도 있습니다.

그것은 당신의 브라우저에 있습니다

도구 자체는 쉽게 얻을 수 있습니다. 이를 여는 세 가지 방법은 다음과 같습니다.

1. Chrome 브라우저에서 Chrome 메뉴(오른쪽 상단 모서리에 있는 세 개의 가로 막대)를 선택하고 추가 도구를 선택한 다음 개발자 도구를 선택합니다.
2. 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택합니다.
3. Windows의 키보드에서 ctrl + shift + i를 선택합니다. Mac에서는 cmnd + opt + i를 선택합니다.

이들 중 어느 것이든 브라우저 하단에 DevTools 창이 열립니다.

기본 창

도구가 화면 하단에 나타납니다. 상단에 메뉴가 있고 기본 보기로 요소가 있는 기본 창과 기본 선택으로 메뉴 및 스타일이 있는 보조 창이 표시됩니다.

도구는 작업으로 그룹화됩니다. 요소, 네트워크, 소스, 타임라인, 프로필, 리소스, 감사 및 콘솔을 포함하는 8개의 그룹이 있습니다.

집단

여기에서 페이지의 HTML 구조를 볼 수 있습니다. 하단에 HTML 및 본문에 대한 토글이 있습니다. 요소 위에 마우스를 올려 놓으면 각 요소에 대한 자세한 정보를 볼 수 있습니다.

화살표를 클릭하여 기본 요소의 내용을 열고 닫기 쉽게 만들 수 있습니다. 따라서 본문을 닫고 헤더를 읽고 헤더 내에서 볼 요소를 선택하는 등의 작업을 수행할 수 있습니다. 이것은 웹사이트의 HTML을 보기 위한 훌륭한 도구입니다.

회로망

이것은 로드될 각 요소, 로드 방법, 파일 유형, 파일 크기, 로드하는 데 걸리는 시간, 페이지 로드 시퀀스 내에서 로드될 시간 타임라인을 보여줍니다. 이는 페이지 로드의 병목 현상 및 잘못된 요청과 같은 네트워크 문제를 해결하는 데 사용할 수 있습니다.

예를 들어, 404 오류가 많이 표시되는 경우 문제가 무엇인지 자세히 보기 위해 볼 수 있습니다. 여전히 트래픽이 많은 페이지를 다운받았거나 누군가 링크를 잘못 입력했을 수 있습니다.

출처

이것은 로드될 스크립트와 스니펫과 그 출처를 보여줍니다.

타임라인

이것은 각 리소스가 로드되는 시간을 보여줍니다. 가장 시간이 많이 걸리는 것을 확인할 수 있어 페이지 로딩을 줄이는 데 도움이 됩니다.

프로필

이것은 각 요소의 메모리 사용량을 보여줍니다. 이것은 최적화가 필요한 코드를 보여주는 데 유용합니다.

자원

여기에서 로드된 리소스를 검사할 수 있습니다. 쿠키, 애플리케이션 캐시, HTML5 데이터베이스 등을 볼 수 있습니다.

감사

이를 통해 페이지를 분석할 수 있습니다. 로드된 후 또는 로드할 때 감사할 수 있습니다.

감사 현황

먼저 현재 상태 감사를 실행하기로 선택했습니다. 이것은 사이트가 현재 내 브라우저에 이미 로드된 상태에서 감사를 실행합니다.

항목 목록을 제공하고 중요도에 따라 색상을 지정하고 문제 수를 보여줍니다. 클릭하면 자세히 볼 수 있습니다.

각각에 대한 자세한 정보를 보기 위해 몇 개를 확장했습니다. 네트워크 활용 및 웹 페이지 성능에 대한 정보를 제공합니다. 문제를 해결하고 우선 순위를 지정하는 방법에 대한 조언을 제공합니다.

페이지 새로고침 및 로드 시 감사

다시 돌아가 부하 시 감사를 선택했습니다. 결과는 비슷하지만 예상대로 페이지가 로드된 후보다 페이지를 로드할 때 더 많은 문제가 있습니다.

둘 사이에서 JavaScript, 브라우저 캐싱, 프록시 캐싱, 쿠키 크기, 쿠키가 없는 도메인의 콘텐츠 제공, 이미지 크기, 스크립트 순서 및 스타일, 문서 헤드에 CSS 배치, 사용하지 않는 CSS 파일 제거, 일반 CSS 사용에 대한 정보를 얻습니다. 속성 이름. 물론 결과는 사이트에 따라 다릅니다.

정보는 PageSpeed ​​Insights만큼 상세하지 않지만 시작하기에 충분하고 어쨌든 사용하는 도구에 이 정보가 내장되어 있다는 편리함이 마음에 듭니다. 사이트를 변경할 때마다 실행하는 것이 좋습니다. 사용하지 않기에는 너무 쉽습니다.

콘솔

페이지와 앱을 테스트할 수 있는 JavaScript 콘솔입니다. 스크립트를 디버그하고 변경 사항에 대한 조언을 얻을 수 있습니다. 콘솔을 사용하면 웹 페이지와 상호 작용할 수 있도록 명령을 입력할 수 있습니다. 디버깅에 도움이 되도록 진단 정보를 기록합니다. 메인 화면 또는 서랍(메인 화면 아래의 창)에서 사용할 수 있습니다.

콘솔 또는 명령줄 API를 사용할 수 있습니다. 콘솔에 쓰기, 요소 형식 지정 및 출력 스타일 지정, 실행 또는 로드 시간 측정, 타임라인 보기 및 표시, 명령문 계산, 중단점 설정, 표현식 평가, 이벤트 모니터링, 메시지 스택, 오류 및 경고 보기 등을 수행할 수 있습니다. 더.

이것은 강력한 도구이지만 사용하는 데 많은 어려움이 있습니다. 다행히 좋은 참고 자료가 사용 방법에 대한 예제와 함께 제공됩니다.

디버깅

Windows에서 ctrl + p를 선택하거나 Mac에서 cmd + p를 선택하면 디버그할 스크립트를 선택할 수 있는 디버그 화면이 열립니다. 이 도구는 모든 프로그래밍 환경에서 볼 수 있을 것으로 예상되는 디버깅 기능(일시 중지, 계속하기, 한 단계씩 실행, 한 단계씩 건너뛰기, 중단점, 형식이 지정된 코드 등)을 제공합니다.

디버깅 모드 사용을 단계별로 설명하는 자세한 도움말 파일이 제공됩니다.

CSS 스타일 창

맨 오른쪽에 있는 상자에는 모든 CSS 정보가 들어 있습니다. 요소를 선택하면 오른쪽의 스타일 창에 요소의 스타일 정보가 표시됩니다. 이 섹션은 흥미롭습니다. 스타일, 계산, 이벤트 리스너, DOM 중단점 및 속성의 5가지 도구 그룹이 있습니다.

스타일

이 창에서 스타일을 선택하고 수동으로 변경할 수 있습니다. 예를 들어 글꼴 크기와 색상을 선택할 수 있습니다.

글꼴 크기를 선택하고 원하는 크기를 입력합니다. 그러면 화면에서 선택한 글꼴의 글꼴 크기가 변경됩니다.

글꼴 색상을 선택하면 색상 선택기가 열립니다. 원하는 색상을 선택하고 Enter 키를 누릅니다. 선택한 글꼴이 새 색상으로 변경되는 것을 볼 수 있습니다. 이것은 새로운 글꼴 스타일, 크기 및 색상을 시험해 볼 수 있는 좋은 방법입니다.

오른쪽의 site.CSS를 클릭하면 자세한 정보가 있는 더 큰 창이 열립니다. 여기에 사용하려는 글꼴의 이름을 입력하고, 색상을 지정하고, 크기를 지정하는 등의 작업을 수행할 수 있습니다.

계산됨

이것은 픽셀 단위로 상자 크기를 표시합니다. 패딩, 테두리 및 여백이 있습니다.

장치 모드

모바일 기기처럼 보이는 요소 메뉴와 돋보기 사이 왼쪽에 작은 버튼이 있습니다. 뭔지 맞춰봐? 모바일 기기입니다. 이것은 장치 에뮬레이션 모드입니다. 이것은 귀하의 사이트가 얼마나 반응하는지 확인할 수 있는 좋은 방법입니다.

장치

단순한 모바일 기기보다 더 멋진 점은 어떤 모바일 기기인지 선택하면 해당 기기에서 웹사이트를 보는 것처럼 웹사이트를 볼 수 있다는 것입니다. 굉장합니다!

Amazon Kindle Fire HDX 7”을 선택했고 화면이 해당 장치를 모방하여 사이트가 화면에서 어떻게 보이고 터치가 작동하는지 볼 수 있었습니다.

Swap Dimensions 버튼을 눌러 화면의 방향을 변경할 수 있습니다.

이것은 더 작은 모바일 화면에서 WordPress 사이트가 어떻게 보이는지 볼 수 있는 좋은 방법입니다. 나는 iPhone 6을 선택했고 새로운 화면 크기와 해상도에 맞게 화면 크기를 변경했습니다. 볼 수 있는 장치가 많이 있습니다. 크기를 늘리거나 줄이기 위해 측면을 드래그하여 사용자 정의 크기를 볼 수도 있습니다.

회로망

사이트에 액세스하는 네트워크 유형을 선택할 수도 있습니다. 이를 통해 다양한 연결 유형과 속도를 통해 웹사이트의 성능을 확인할 수 있습니다. 50Kbps GPRS에서 30Mbps WiFi까지 다양한 속도와 여러 2G, 3G 및 4G 연결 속도를 테스트할 수 있습니다. 이것은 다양한 네트워크를 통해 웹사이트의 속도를 테스트하고 개선해야 할 사항에 대한 통찰력을 얻을 수 있는 훌륭한 방법입니다.

미디어 쿼리

왼쪽 상단에 계단처럼 보이는 작은 버튼이 있습니다. 다른 픽셀 너비를 표시하는 웹 사이트 창 위에 화면의 다른 섹션이 열립니다. 클릭하면 모바일 화면이 해당 크기로 이동합니다. 그들은 당신에게 보여줍니다:

• 최대 너비를 타겟팅하는 쿼리
• 범위 내 너비
• 최소 너비를 타겟팅하는 쿼리

이렇게 하면 완전히 반응하는 디자인을 위해 스타일과 미디어 콘텐츠를 조정하는 데 도움이 됩니다.

서랍

기본 화면 아래에는 서랍이라는 또 다른 도구 섹션이 있습니다. 이것은 다음을 추가합니다.

콘솔 – 기본 창과 동일한 콘솔입니다. 여기에 배치하면 기본 창의 모든 도구와 함께 사용할 수 있습니다.

검색 – 소스를 검색할 수 있습니다.

에뮬레이션 – 장치(여기서 모델, 해상도, 네트워크 등을 선택할 수 있음), 미디어, 네트워크(처리량 및 사용자 에이전트) 및 센서(터치스크린, 가속도계 등)를 선택할 수 있습니다.

렌더링 – 페인트 사각형, 합성된 레이어 테두리, FPS 미터, 연속 페이지 다시 그리기 및 잠재적인 스크롤 병목 현상을 표시합니다.

설정 및 기타

오른쪽의 메뉴 표시줄은 사이트의 오류 및 경고 수를 알려주고, 하단의 서랍을 숨길 수 있고, 설정을 조정하고, 도구를 기본 창에 고정할 수 있습니다. 귀하의 웹사이트 및 DevTools).

필요한 방식으로 작동하도록 도구를 수정할 수 있도록 조정할 수 있는 설정이 매우 많습니다.

크롬 카나리아

Google Chrome DevTools의 최첨단에 서고 싶다면 Chrome Canary를 사용해 보세요. 아이콘은 노란색입니다. 알겠어? 망토가 필요합니다. Google에서 제공하는 가장 최신의 제품입니다. 개발자를 위해 설계되었으며 최신 버전의 DevTools가 있습니다. 아직 일반 용도로는 충분히 안정적이지 않으므로 시스템이 손상될 수 있습니다.

시스템이 고장났을 때 환경에 심각한 피해를 입히는 경향이 있다면 위 이미지의 Chrome Canary 아이콘을 보고 5초 동안 깜박이지 마십시오.

이제 끝으로 이동할 수 있습니다. 이 부분을 기억하지 못할 것입니다.

마무리

Google 크롬의 개발자 도구는 문제 해결, 네트워크 성능 개선, 다양한 화면 크기 및 해상도에서 사이트 보기, 사이트 개선이 필요한 부분에 대한 정보 얻기를 위한 훌륭한 도구입니다. 많은 기능이 있으며 확장을 통해 더 많은 기능을 추가할 수 있습니다. 기본 브라우저가 아니더라도 이러한 도구만으로도 Chrome을 설치해야 하는 큰 이유가 됩니다. 기능을 배우는 데 시간을 할애하면 효과를 볼 수 있으며 사이트와 방문자는 이에 대해 감사할 것입니다.

네 차례 야! Chrome 개발자 도구를 사용합니까? 내가 좋아하는 기능을 빠뜨렸나요? 추가할 사항이 있습니까? 아래 의견에서 그것에 대해 듣고 싶습니다!

Anikei의 기사 썸네일 이미지 / Shutterstock.com