비 개발자를위한 Google Chrome DevTools

Google 크롬은 전 세계 사용자의 거의 65 %를 차지하는 가장 널리 사용되는 브라우저 중 하나입니다. 그에 대한 좋은 이유가 있습니다. 잘 작동하고 수많은 웹 기능을 지원하며 기본적으로 Google이 제공하는 모든 기능과 통합되며 사용하기 쉽습니다.

그러나 사용자 측 이상의 것이 있습니다. 개발자를 위해 매우 잘 구축되었습니다. Firefox는 사용자 기반이 상대적으로 작지만 뛰어난 개발 경험을 제공하는 또 다른 훌륭한 브라우저입니다. 따라서 우리는 Chrome과 DevTools에 초점을 맞추고 있지만 고맙게도 대부분의 브라우저의 UI는 매우 유사하므로 여기에있는 팁은 Firefox, Safari, Edge 및 기타 브라우저로 잘 번역 될 것입니다.

Chrome DevTools 란 무엇입니까?

Chrome DevTools는 Google Chrome 브라우저에 직접 내장 된 웹 개발자 도구 모음입니다. DevTools는 페이지를 즉석에서 편집하고 문제를 신속하게 진단하는 데 도움이되며 궁극적으로 더 나은 웹 사이트를 더 빠르게 구축하는 데 도움이됩니다.
Chrome DevTools 문서 홈페이지

DevTools는 대부분의 프런트 엔드 (그리고 종종 백 엔드) 개발자가 웹 페이지의 성능, 페이지를 정의하는 HTML 태그 및 가장 기본적인 형태로 적용되는 스타일을 검사하는 데 사용하는 것입니다. 비 개발자를위한 일반적인 사용 사례에서도 작동하는 한 살펴볼 다른 매우 유용한 기능을 제공합니다.

개발 도구 는 왼쪽에 코드가 있고 오른쪽에 다양한 속성이있는 위 스크린 샷에서 볼 수있는 것입니다. Command + Option + C (Mac) 또는 Control + Shift + C (Windows, Linux, Chrome OS)를 누르면 표시되는 기본보기입니다.

DevTools는 많은 기능을 제공하지만 더 주목할만한 기능은 다음과 같습니다.

• 페이지가로드되고로드되는 동안 생성 된 문서 구조 (HTML)입니다.
• 특정 HTML 요소에 적용되는 CSS 및 상위 요소에서 상속되는 요소
  뷰포트 크기, 요소 크기, 패딩, 여백, 테두리 등을 봅니다.
• 실행중인 스크립트를 제외하고 페이지의 모든 것을 수정하는 기능.
• 페이지를 새로 고친 후 저장된 코드를 변경하려면 자리 비움 (기본적으로 불가능)
• 모든 변경 사항은 클라이언트 측입니다. 즉, 변경하는 내용이 무엇이든 페이지를 새로 고칠 때까지만 표시됩니다.
• 캐시없이 시뮬레이트 된 느린 네트워크 속도로 테스트합니다.
• 성능을 측정하고 페이지 성능에 점수를 매기고이를 해결하기위한 팁을 제공하는 도구입니다.
• 페이지의 콘솔과 오류, 경고 및 메시지를 표시하고 거기에서 자바 스크립트 코드를 실행하는 방법을 보여줍니다.

이것은 매우 짧은 목록이지만 더 주목할만한 기능 중 일부를 다루며 대부분 우리가 다룰 것입니다.

관련 : 첫 번째 Chrome 확장 프로그램을 만드는 방법

DevTools가 필요한 이유, 사용 사례는 무엇입니까?

개발자에게는 분명하지만 비 개발자는 어떻습니까? 파워 유저 상태에 더 가까이 다가 갈 수있는 몇 가지 멋진 트릭과 팁이 있습니다. 종종 사이트 소유자는 사이트에서 문제를 발견하고 한두 가지 질문을하고 때로는 문제를 해결하기 위해 "붙여 넣기"할 수있는 코드 스 니펫을받습니다. 개발자가 이러한 스 니펫을 테스트하는 방법 중 하나는 개발 도구에 직접 적용하는 것입니다. 또한 원하는 모양에 대해 개발자에게 멋진 미리보기를 제공하는 방법이기도합니다.

CSS 코드 적용

DevTools의 첫 번째이자 가장 일반적인 용도는 CSS를 수정하고 적용하는 것입니다. CSS는 페이지가 어떻게 보이는지 정의하는 것입니다. 이렇게하려면 스타일을 지정할 요소를 가리키고 마우스 오른쪽 버튼을 클릭 한 다음 "검사"를 선택하면됩니다.

메뉴 항목 텍스트가 약간 다를 수 있지만 대부분의 다른 브라우저에도 동일하게 적용됩니다. 그렇게하면 DevTools가 열리고 필요한 요소를 직접 선택하는 것을 볼 수 있습니다. 거기에서 개발 도구의 두 가지 주요 부분을 볼 수 있습니다. HTML 및 CSS 측면 (왼쪽 및 오른쪽) :

HTML 부분에서 길을 찾는 것은 약간 까다로울 수 있지만 걱정하지 마십시오. 왼쪽 패널에서 요소를 가리키면 DevTools가 요소를 강조 표시합니다. 필요한 것을 찾으면 오른쪽에 스타일을 작성할 수 있습니다. 이미 몇 가지가 추가되었습니다. 따라서 배경을 읽고 어떻게 보이는지 변경해 보겠습니다.

입력하는 즉시 페이지의 스타일이 업데이트됩니다. 여기에 CSS를 작성할 수 있으며 페이지에 이미있는 스타일처럼 적용됩니다. 규칙 끝 부분 ( "너비"아래)을 누르면 새 스타일이 추가되기 시작합니다. 또는 "element.style"이라고 표시된 상단에 작성할 수 있습니다. 그런 다음이를 개발자와 공유하려면 코드를 선택하고 복사하여 붙여 넣으면됩니다. 프로 팁, 스타일에 대한 "선택기"도 잡으십시오. 위 스크린 샷의“.RNNXgb”입니다. 이것은 개발자에게 스타일을 추가하는 요소를 알려줍니다.

관련 : WordPress CSS : 초보자를위한 기본 가이드

색을 고르세요

당신이 할 수있는 또 다른 깔끔한 일은 정확히 어떤 색상이 사용되는지 알아 내고 DevTools에서 직접 색상 선택기를 사용하여 다른 색상을 보는 것입니다. 색상 코드 옆에있는 사각형 (위의 화살표가 가리키는 곳)을 클릭하면 색상 선택기가 열립니다.

사용 된 글꼴 찾기

CSS 개발자는 사용중인 글꼴, 글꼴 크기, 줄 높이, 색상, 글꼴 두께 및 기타 타이포그래피 관련 속성도 정의합니다. 모두 오른쪽에 표시됩니다. 교차하지 않는 한 보이는 스타일이 적용됩니다. Google 양식에서 검색에 어떤 글꼴이 사용되는지 알아 보겠습니다. 글꼴이 보일 때까지 마우스 오른쪽 버튼을 클릭하고 검사하고 아래로 스크롤하거나 오른쪽 섹션 상단의 "필터"필드에서 검색합니다.

계속해서 글꼴을 업데이트하면 사이트가 곧 전환 할 다른 글꼴로 어떻게 보이는지 확인할 수 있습니다. 물론 개발자는 나중에 코드를 수정하고 글꼴 변경으로 인해 발생할 수있는 문제를 수정해야하지만이 방법은 개발 환경을 설정하지 않고도 빠르게 테스트 할 수 있습니다.

다음은 "Georgia"가 글꼴로 설정된 Google 홈페이지의 모습입니다. 이를 위해 하나 이상의 속성을 업데이트해야했지만 Google 개발자의 좋은 CSS 아키텍처 덕분에 상당히 쉬웠습니다. 대부분의 경우 잘못 작성된 사이트는 전체 사이트가 업데이트되었는지 확인하기 위해 수많은 속성을 업데이트해야합니다.

관련 : 웹 사이트에 가장 적합한 글꼴을 선택하는 방법

캐시, 스로틀 및 속도

캐시 란 무엇입니까? 간단히 말해서 나중에 사용하기 위해 컴퓨터에 저장되는 리소스입니다. 리소스는 JS, CSS 파일 또는 이미지 일 수 있습니다. 페이지를 열 때마다 바뀌지 않으면 매번 다운로드 할 필요가 없죠? 따라서 브라우저는 잠시 동안 컴퓨터에 보관합니다.

그러나 서버에 변경 사항이 있고 설정에서 리소스를 업데이트하는 데 모범 사례를 활용하지 않으면 어떻게됩니까? 간단히 말해서 개발자가 코드베이스를 변경하더라도 여전히 오래된 스타일을 볼 수 있습니다. 그러면 캐시를 중지하고 "하드 새로 고침"을 수행 할 수 있습니다.

개발 도구를 열고 "네트워크"탭으로 이동합니다. 그런 다음 "캐시 비활성화"를 클릭하고 "하드 새로 고침"을 수행합니다.

이제 DevTools가 열린 상태에서 페이지를 탐색하는 동안 브라우저에서 캐시 된 리소스가 없습니다. 리소스가 매번로드되기 때문에 페이지가 느리게로드되지만 변경 사항이 표시됩니다. 일반적으로 개발자는 기본적으로 "캐시 비활성화"를 ON으로 유지하고로드 시간이 중요한 경우 실제 사용자 상호 작용을 테스트 할 때만 비활성화합니다.

새로 고친 후 동일한 탭에서 페이지 속도 및 무게에 대한 측정 값도 볼 수 있습니다. "로드"가 트리거 될 때까지 (다른 스크립트가 더 많은 작업을 수행하기 위해 첨부되는 이벤트), 요청 된 파일 수 (위의 31 개 요청, 상당히 많은 양), 다운로드 된 양 등. 간단합니다. 값이 낮을수록 좋습니다. 100-150 개 이상의 요청이 있으면 큰 속도 문제가 발생하기 시작합니다.

DevTools는 또한 느린 연결 시뮬레이션을 제공합니다. 사이트가 3G와 같이 느린 네트워크에서 어떻게 작동하는지 확인하는 데 매우 유용한 기능입니다. 이를 켜려면 "캐시 비활성화"옆의 값을 변경하고 새로 고침을 누르십시오. 새로 고침하면 사이트로드의 각 단계가 표시됩니다. 캐시가 비활성화 된 상태에서 이것은 정기적 인 사용을위한 첫 번째 방문입니다.

실제 연결 속도를 사용하는 첫 번째 예와 비교하여 "Slow 3G"를 선택하고 새로 고침하면 속도 차이를 확인하십시오. 여기에서 "오프라인"을 테스트 할 수도 있습니다. 인터넷 연결없이 사이트가 어떻게 작동할까요? 이상하게 들리지만 그렇지 않은 경우 프로그레시브 웹 앱은 방문자가 한 번 이상 액세스 한 경우 인터넷 연결 없이도 사이트가 작동하도록 이미 허용하고 있습니다.

감사 는 페이지의 사용자 친화적 인 속도 분석을 제공하는 또 다른 훌륭한 기능입니다. "Audits"탭으로 이동하여 "Generate Report"를 눌러 실행하면됩니다.

오른쪽에는 테스트 할 항목을 결정할 수있는 몇 가지 옵션이 있습니다. 때로는 테스트에 시간 (1 ~ 2 분)이 걸릴 수 있으므로 테스트를 여러 번 실행하면 현재 테스트에 필요한 항목 만 선택할 수 있습니다. . 다음은 Google 홈 화면에 대한 위의 옵션을 사용한 샘플 결과입니다.

대단한 점수! 94는 매우 훌륭하며이 페이지에 담긴 훌륭한 작업을 보여줍니다. 표면적으로는 매우 단순 해 보일 수 있지만 숨겨진 상태로 유지되는 백그라운드에서 실행되는 스크립트가 많고 사이트 속도가 느려집니다. 테스트 된 다른 많은 메트릭이 있으며 모든 사이트에서이 작업을 수행하여 어떤 문제가 있고 개선 할 수있는 사항을 찾을 수 있습니다.

관련 : "사이트 속도 향상"이 실제로 의미하는 것은 무엇이며이를 달성하는 방법은 무엇입니까?

DevTools 콘솔

우리가 다룰 마지막 뷰는 콘솔입니다. ESC 키를 누르거나 "콘솔"탭으로 이동하여 쉽게 액세스 할 수 있습니다. 예상대로 오류가 없으며 너무 많은 문제를 일으키지 않아야하는 몇 가지 경고 만 있습니다.

그러나 사이트의 최근 업데이트 후 어떤 이유로 든 대화 형 구성 요소 (예 : 드롭 다운, 메뉴,지도, 양식)가 작동을 멈춘 경우 언제든지 콘솔을 살펴볼 수 있습니다. 이유를 알려주는 오류가있을 수 있습니다.

다음은 이러한 오류의 예입니다.

오류를 보여주기 위해 오류 로그 문서 페이지를 사용하는 것은 약간 아이러니하지 않습니까? 어쨌든 그것은 좋은 목적을 가지고 있습니다. 일부 기능의 작동을 중지시키는 오류입니다. 이러한 정보를 언제든지 개발자와 공유하고 도움을 요청할 수 있습니다. 로그는 페이지와 상호 작용할 때 실시간으로 게시되므로 버튼을 클릭하고 오류가 표시되면 그 뒤에있는 스크립트에 문제가있을 가능성이 높습니다.

관련 : 좋은 웹 디자이너가되는 길

보안주의 사항 : 코드가 무엇을하는지 이해하지 못한 채 코드를 복사하여 콘솔에 붙여 넣는 것은 좋지 않습니다. 특히 출처가 신뢰할 수없고 회사의 내부 애플리케이션 / 웹 사이트에서 사용되는 경우. Facebook은 콘솔에 경고를 게시했습니다.

요약

DevTools는 개발자와 사이트 소유자 모두를 지원하는 놀라운 도구입니다. 페이지를 조정하고 수정하는 데 필요한 모든 것을 제공합니다. 이를 통해 CSS 변경, HTML 수정, 페이지의 요소 삭제 및 재 배열, 속도 보고서 및보고 된 오류를 볼 수 있습니다.

사이트 소유자는이를 사용하여 텍스트 단락을 작성하는 것보다 이해하기 쉬운 개발자에게 필요한 아이디어와 예를 보여줄 수 있습니다. 기본 속성에 대한 CSS 지식이 있으면 요구 사항을 훨씬 더 자세히 설명 할 수 있으므로 새로운 변경에 소요되는 시간과 앞뒤를 크게 줄일 수 있습니다.

사용할 수있는 다른 기능이 많이 있습니다. 탐색하는 것을 두려워하지 마십시오!