2020 년 Chrome Devtools의 새로운 기능을 살펴 봅니다.

2020 년 Chrome Devtools의 새로운 기능을 살펴보십시오.

이 기사는 Chrome Devtools의 새로운 기능 중 일부에 대해 빠르게 배우게됩니다. 우리는 간단히 소개 한 다음 많은 새로운 DevTools 기능으로 뛰어 들고 다른 브라우저의 진행 상황에 대해 배울 것입니다. 나는 당신이 온라인에서 찾을 수있는 가장 큰 DevTools 프롬프트 인 Dev Tips를 만들었 기 때문에 이러한 측면에 계속 집중하고 있습니다!

개발 및 디버그 경험을 향상시키는 데 도움이되는 새로운 기능을 통해 DevTools의 변화를 계속 진화함에 따라 이해하는 것이 중요합니다.

최신 및 최고의 기능을 살펴 보겠습니다. Chrome의 공개적으로 안정적인 버전에는 이러한 기능의 대부분이 있지만 기술의 최전선에있는 것을 좋아하기 때문에 Chrome Canary를 사용하고 있습니다.

등대

Lighthouse는 일반적으로 성능, SEO, 접근성 등을 중심으로 웹 페이지를 감사하기위한 오픈 소스 도구입니다. Lighthouse는 한동안 DevTools의 일부로 함께 번들로 만들어졌습니다. 즉, Lighthouse라는 패널에서 찾을 수 있습니다!

나는 Lighthouse를 정말 좋아합니다. 왜냐하면 그것은 DevTools의 가장 쉬운 부분 중 하나이기 때문입니다. "보고서 생성"을 클릭하면 웹 페이지에 대해 즉시 인식 가능한 주석을 얻을 수 있습니다.

문서는 읽기 쉬운 글꼴 크기, 100% 읽기 쉬운 텍스트를 사용합니다

또는:

지나치게 큰 돔 크기를 피하십시오 (1,189 개 요소)

거의 모든 검토는 검토가 실패한 이유와 개선 방법을 설명하는 개발자 문서와 연결되어 있습니다.

Lighthouse를 시작하는 가장 좋은 방법은 자신의 웹 사이트에서 감사를 실행하는 것입니다.

1. DevTools를 열고 사이트 중 하나를 방문하면 등대 패널 로 이동합니다.
2. 검토하려는 프로젝트를 선택하십시오 ( 모범 사례는 좋은 출발점입니다)
3. 보고서를 생성하려면 클릭하십시오
4. 승인 된/실패 검토를 클릭하여 결과를 조사하십시오

Lighthouse는 한동안 DevTools의 일부 였지만 (2017 년 이후!) : 다음과 같은 사용자를위한 기능을 계속 제공하기 때문에 여전히 언급 할 가치가 있습니다.

• 앵커 요소가 URL 감사로 해결되는지 확인하십시오 (흥미로운 사실 ​​:이 작업에 관여합니다!)
• 최대 컨텐츠 도면 메트릭이 검토하기에 충분한 지 확인하십시오.
• JavaScript를 사용하지 않는 감사에 대해 경고합니다

더 나은 "요소 확인"

이것은 어떤면에서는 미묘하고 매우 작은 기능이지만 웹 접근성을 처리하는 방법에 큰 영향을 줄 수 있습니다.

다음과 같이 작동합니다. DevTools의 가장 일반적인 사용 인 점검 요소를 사용하면 접근성에 대한 추가 정보가 포함 된 툴팁을 얻을 수 있습니다.

내가 이것이 큰 영향을 미치는 이유는 DevTools가 한동안 접근성을 가지고 있지만 실제로 우리 중 얼마나 많은 사람들이 그것들을 사용하기 때문입니까? 이 정보를 일반적으로 사용되는 기능에 포함하여 Check 요소와 같은 가시성이 높아지고보다 액세스 할 수 있습니다.

도구 팁은 다음과 같습니다.

• 텍스트의 대비 비율 (배경색이있는 전경 텍스트의 대비 또는 얼마나 나쁜지)
• 텍스트 표현
• 아리아 역할
• 검사 요소가 키보드에 집중할 수 있는지 여부

이 기능을 시도하려면 마우스 오른쪽 버튼을 클릭하십시오 (또는 CMD Shift C) 요소를 선택하고 검사를 선택하여 DevTools에서이를 확인하십시오.

Chrome Devtools의 접근성 디버깅에 대한 14 분짜리 비디오를 만들었습니다.

시뮬레이션 된 비전 결함

이름에서 알 수 있듯이 Chrome Devtools를 사용하여 시각 장애를 시뮬레이션 할 수 있습니다. 예를 들어, 흐릿한 비전 관점에서 웹 사이트를 볼 수 있습니다.

DevTools 에서이 작업을 어떻게합니까? 이와 같이:

1. DevTools를 엽니 다 (마우스 오른쪽 버튼을 클릭하고 Check 또는 CMD Shift C를 선택하십시오).
2. DevTools 명령 메뉴 (Mac에서 CMD Shift P 및 Windows의 Ctrl Shift P)를 엽니 다.
3. 명령 메뉴에서 렌더링 표시를 선택하십시오.
4. 렌더링 패널 에서 결함을 선택하십시오.

우리는 퍼지 비전을 예를 들어 사용하지만 DevTools에는 풀 컬러 실명, 부분 색상 실명, 청록색 실명 및 총 색맹 등의 다른 옵션이 있습니다.

그러한 도구와 마찬가지로, 기존 접근성 기술을 보완하도록 설계되었습니다. 다시 말해, 그것은 유익하지는 않지만 우리가 만든 설계 및 사용자 경험에 영향을 미칩니다.

다음은 낮은 비전 접근성 및 시뮬레이션에 대한 추가 리소스입니다.

• 비전이 적은 사람들을위한 접근성 요구 사항 (W3C)
• 비전 결함을 시뮬레이션하여 페이지 접근성을 향상시킵니다

성능 타이밍을 얻으십시오

DevTools의 성능 패널은 때때로 모양과 색상의 지저분한 혼합처럼 보입니다.

이에 대한 업데이트는 의미있는 성능 메트릭을 더 잘 제시하는 데 더 나은 일을하기 때문에 훌륭합니다.

우리 가보고 싶은 것은 성능 패널 레코드에서 타이밍에 표시된 추가 타이밍 사각형입니다. 이것은 하이라이트 :

• DomContentLoaded : 초기 HTML 로딩시 이벤트가 발생했습니다
• 첫 번째 드로우 : 브라우저가 처음 화면에 픽셀을 그릴 때
• 첫 번째 컨텐츠 그리기 : 브라우저는 DOM에서 컨텐츠 지점을 그립니다.
• onload : 페이지와 모든 리소스가로드 될 때
• 최대 컨텐츠 그리기 : 뷰포트에서 렌더링 된 가장 큰 이미지 또는 텍스트 요소

또한 성능 패널 레코드에서 가장 큰 콘텐츠 도면 이벤트를 찾으면 추가 정보를 보려면 클릭 할 수 있습니다.

여기에는 귀중한 정보가 많이 있지만 "관련 노드"는 LCP 이벤트를 유발하는 요소를 지정하기 때문에 가장 유용한 프로젝트 일 수 있습니다.

이 기능을 시도하려면 :

1. DevTools를 열고 성능 패널 로 이동하십시오
2. "분석 시작 및 페이지 재 장전"을 클릭하십시오.
3. 레코드의 타이밍 부분 에서 타이밍 표시기를 관찰하십시오.
4. 얻은 추가 정보를 보려면 각 메트릭을 클릭하십시오.

성능 모니터

DevTools를 빨리 시작하고 등대를 시도하려면 성능 모니터 기능을 권장합니다. CPU 사용과 같은 손가락 끝에 webpagetest.org를 갖는 것과 같습니다.

액세스하는 방법은 다음과 같습니다.

1. DevTools를여십시오
2. 명령 메뉴를 엽니 다 (Mac에서 CMD Shift P 및 Windows의 Ctrl Shift P)
3. 명령 메뉴에서 "성능 모니터 표시"를 선택하십시오
4. 웹 사이트와 상호 작용하고 찾아보십시오
5. 관찰 결과

성능 모니터는 흥미로운 메트릭을 제공 할 수 있지만 등대와 달리 직접 해석하고 행동하는 방법을 알아 내야합니다. 조언이 제공되지 않았습니다. CPU 사용 차트를 직접 연구하고 허용되는 경우 90%에게 물어봐야합니다.

Performance Monitor에는 대화식 범례가 있습니다. 예를 들어 메트릭을 켜거나 끌 수 있습니다.

• CPU 사용
• JS 힙 크기
• 돔 노드
• JS 이벤트 리스너
• 문서
• 문서 프레임 워크
• 레이아웃/초
• 스타일 재 계산/초

CSS 개요 및 로컬 개요

CSS- 트릭은 이러한 기능을 도입 했으므로 확인하십시오!

• CSS 개요 : 페이지에서 사용하는 CSS에 대한 흥미로운 통계를 많이 제공하는 편리한 DevTools 패널
• 로컬 오버레이 : 로컬 리소스로 생산 웹 사이트를 덮어 쓸 수 있도록 강력한 기능으로 변경 사항을 쉽게 미리 볼 수 있습니다.

그렇다면 다른 브라우저의 DevTools는 어떻습니까?

기사 전체에서 Chrome을 사용하고 있음을 알았습니다. 이것은 내 개인 브라우저입니다. 즉, 다음을 고려할 가치가 있습니다.

• Firefox DevTools는 지금 멋져 보입니다
• Microsoft Edge가 Chromium에서 확장됨에 따라 이러한 DevTools 기능의 혜택도 있습니다.
• Safari Technology Preview Release Notes (이 페이지의 웹 검사관 검색)에서 입증 한 것처럼 Safari Devtools는 큰 진전을 이루었습니다.

다시 말해, 이것은 빠르게 성장하는 지역이기 때문에주의를 기울이십시오!

결론적으로

우리는 아주 짧은 시간에 많이 덮었습니다!

• Lighthouse : 성능, 접근성, SEO 및 모범 사례 팁 및 제안을 제공하는 패널.
• 점검 요소 : 검사 요소 기능을 제공하는 기능 검사 요소에 대한 접근성 정보를 제공합니다.
• 시뮬레이션 된 Vision Deficits : 렌더링 패널의 기능.
• 성능 패널 타이밍 : 성능 패널 레코드의 기타 메트릭, 최대 콘텐츠 그리기와 같은 사용자 지향 통계 표시
• 성능 모니터-CPU 사용 및 DOM 크기와 같은 현재 웹 사이트 성능 지표의 실시간 시각화

최신 업데이트를 알고 200 개가 넘는 웹 개발 팁을 얻으려면 Mailing List Dev 팁을 확인하십시오! 또한 ModernDevTools.com에 고급 비디오 과정이 있습니다. 그리고 저는 트위터에 많은 추가 웹 개발 리소스를 게시하는 경향이 있습니다.

위 내용은 2020 년 Chrome Devtools의 새로운 기능을 살펴 봅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!