DevTools의 새로운 기능은 무엇입니까?

작년 9월에 저는 Firefox, Chrome, Safari 및 Edge 전반에 걸쳐 우리가 사랑하는 DevTools의 최신 업데이트 중 일부에 대해 썼습니다. 그로부터 4개월이 이미 지났고 DevTools를 작업하는 여러 팀이 바빴습니다! 이 4개월 동안 그들은 우리가 사용할 수 있는 많은 새로운 것을 만들었습니다. 강력한 생산성 향상 에서 완전히 새로운 패널에 이르기까지 그들은 패리티 격차를 좁히고 웹 경험을 개선하고 디버깅하는 새로운 수단으로 혁신을 계속해 왔습니다.

즉, 다른 DevTools 업데이트가 필요한 시점이므로 바로 시작하겠습니다!

• 크롬
• 가장자리
• 원정 여행
• 파이어폭스

크롬

Chrome 팀은 사용자 흐름을 매우 간단하게 기록하고 재생할 수 있는 새로운 패널인 Recorder 패널을 출시했습니다.

사용자 흐름 기록, 재생 및 측정

버그를 조사하기 위해 웹 앱에서 동일한 탐색 단계를 계속해서 반복해야 하는 자신을 발견했다면 이것이 당신의 인생을 바꿀 수 있습니다!

하지만 더 있습니다! 단계가 기록되면 성능을 측정하는 동안 다시 재생할 수 있습니다. 이렇게 하면 테스트할 때마다 항상 동일한 시나리오를 실행하면서 코드 최적화 작업을 수행할 수 있습니다.

여기에서 레코더에 대해 자세히 알아볼 수 있습니다. 이 도구에 대한 피드백이 있으면 팀에서 이 크롬 문제에 대한 귀하의 생각을 들을 수 있어 매우 기쁩니다.

접근성 트리 탐색

페이지를 화면에 렌더링하는 것은 브라우저가 하는 유일한 일이 아닙니다. 그들은 또한 프로세스에서 구축한 DOM 트리를 사용하여 다른 트리인 접근성 트리를 만듭니다. 접근성 트리는 화면 판독기와 같은 보조 기술에서 사용할 수 있는 현재 페이지의 또 다른 표현입니다.

웹 개발자로서 이 접근성 트리에 액세스하는 것은 매우 유용합니다. 선택한 마크업이 스크린 리더가 페이지를 해석하는 방식에 어떤 영향을 미치는지 이해하는 데 도움이 됩니다.

Chrome DevTools에는 접근성 트리가 포함된 Elements 패널의 사이드바에 접근성 패널이 한동안 있었습니다. 하지만 최근에 팀은 접근성과 DOM 트리를 같은 장소에 표시하는 실험을 하고 있어 개발자가 둘 사이를 오갈 수 있습니다.

이 실험을 활성화하려면 접근성 사이드바 패널로 이동하여 "전체 페이지 접근성 트리 활성화"를 확인하십시오. 그러면 DOM 트리의 오른쪽 상단 모서리에 DOM과 접근성 트리 사이를 전환할 수 있는 새 버튼이 표시됩니다.

여기에서 자세히 알아보고 팀에 피드백을 알려주세요.

CSS 개요는 이제 기본적으로 켜져 있습니다.

CSS 개요 패널은 새로운 것은 아니지만 선택할 수 있는 패널이 너무 많아서 한 번도 사용해 본 적이 없을 수도 있습니다. 그것은 아주 오랫동안 실험이었기 때문에 사용하기 전에 DevTools 설정으로 이동하여 활성화해야 했습니다.

이것은 더 이상 필요하지 않습니다. CSS 개요 패널은 이제 일반 기능이며 … > More tools > CSS Overview 로 이동하여 열 수 있습니다.

사용해 본 적이 없다면 대비 문제 또는 사용하지 않는 CSS 선언과 같은 잠재적인 CSS 개선 사항을 식별하는 데 매우 유용한 도구이므로 사용해 보십시오.

More tools 메뉴에 있는 동안 주변을 살펴보세요. Chrome DevTools에는 30개 이상의 개별 패널이 있습니다! 많은 것이지만 특정한 이유 때문에 모두 여기에 있다는 점을 명심하십시오. 특정 패널이 도움이 될 수 있는 웹 앱의 측면이 있을 수 있습니다. 호기심을 갖고 어떤 일을 하는지 모르겠다면 읽을 수 있는 문서가 있음을 기억하십시오.

가장자리

Microsoft의 브라우저 팀은 계속 Chromium 프로젝트에 적극적으로 기여하고 있지만 Edge에만 있는 새롭고 고유한 기능에 더 많은 시간을 할애하고 있습니다. 여기에서 두 가지를 검토해 보겠습니다.

분리된 요소 패널로 DOM 메모리 누수 디버그

Edge는 메모리 누수 조사 도구인 Detached Elements 도구를 출시했습니다. 이 도구는 장기 실행 앱의 누수를 조사하는 데 매우 유용할 수 있습니다.

웹 페이지에서 메모리 누수가 발생하는 여러 가지 이유 중 하나는 DOM 요소가 분리되었기 때문입니다. 이 요소는 특정 시점에서 필요했을 수 있지만 DOM에서 제거되고 다시 연결되지 않는 요소입니다. 코드 기반이 복잡해지면 실수를 저지르기 쉽고 분리된 요소를 정리하는 것을 잊게 됩니다.

앱을 사용하면서 시간이 지남에 따라 앱에 계속 더 많은 메모리가 필요하다는 것을 알게 되면 Detached Elements를 사용해 보십시오. 매우 빠르게 올바른 방향으로 안내할 수 있습니다.

발표 블로그 게시물과 문서에서 이에 대해 자세히 알아보세요.

포커스 모드가 있는 DevTools를 위한 완전히 새로운 사용자 인터페이스

우리의 DevTools는 초기 Firebug 시절부터 지금까지와 같은 방식으로 사용되었습니다. 물론 사용자 인터페이스는 시간이 지남에 따라 더 많은 도구가 추가되고 항목이 재정렬되면서 약간 발전했지만 높은 수준에서는 여전히 대부분 동일합니다.

Edge 팀은 DevTools가 매우 압도적일 수 있음을 나타내는 실험 및 사용자 연구를 수행했습니다(DevTools에 이미 30개 이상의 패널이 있다고 했습니까?). 새로운 웹 개발자는 어디서부터 시작해야 하고 도구를 탐색하고 사용하는 방법을 명확하게 알지 못하지만 경험이 많은 개발자는 한두 가지 친숙한 워크플로에서 자신을 찾는 경향이 있습니다.

이를 기반으로 Edge 팀은 DevTools: Focus Mode 를 더 쉽게 배우고 사용할 수 있도록 하는 새로운 실험 기능을 출시했습니다.

Focus Mode 에는 새로운 활동 표시줄, 도구를 쉽게 추가 및 제거할 수 있는 방법, 빠른 보기 창 및 재설계된 메뉴가 있습니다.

Focus Mode 를 시도하려면 먼저 Settings > Experiments > Focus Mode 로 이동하여 활성화하십시오.

이 Edge 설명 문서에서 Focus Mode 에 대해 자세히 알아볼 수 있습니다.

원정 여행

Safari 자체는 대략 1년에 두 번 업데이트되지만(새로운 기능이 포함된 주요 버전은 가을에, 봄에 또 다른 버전으로) Safari 기술 미리 보기 채널을 사용하여 더 자주 업데이트하고 초기 기능에 액세스할 수 있습니다. 이 버전의 브라우저는 약 2~3주마다 자체 업데이트됩니다.

고객이 일반 Safari 버전만 설치했을 가능성이 높기 때문에 모든 테스트에 Technology Preview 채널을 사용하고 싶지 않을 수도 있지만 때때로 사용하기에 매우 흥미로운 브라우저입니다. 그렇게 하면 새로운 기능에 더 일찍 접근할 수 있고 Safari에 곧 제공될 기능을 확인할 수 있습니다.

다음은 CSS 작업을 훨씬 더 효율적으로 만드는 기술 미리 보기 채널에서 사용할 수 있는 Safari Web Inspector에 대한 몇 가지 최신 업데이트입니다.

스타일 패널의 CSS에 대한 퍼지 자동 완성

CSS 변경은 DevTools에서 가장 많이 하는 일 중 하나이며 Safari는 우리 모두를 위해 훨씬 더 빠르게 만들었습니다.

이제 CSS에 대한 자동 완성 기능이 퍼지 일치를 지원합니다. 즉, "pat"를 입력하여 패딩 상단과 일치시키거나 "bob"을 입력하여 경계 하단과 일치시킬 수 있습니다.

VS Code 또는 퍼지 자동 완성을 지원하는 다른 텍스트 편집기를 사용하는 경우 집에 있는 것처럼 느껴질 것입니다.

계산된 패널에서 유형별로 CSS 변수 그룹화

CSS 변수(사용자 정의 속성이라고도 함)는 이제 수년 동안 모든 주요 브라우저에서 지원되었으며 사이트 소유자, 디자인 시스템 및 라이브러리는 실제로 이를 광범위하게 사용하기 시작했습니다. 좋은 이유로 그들은 훌륭합니다!

그러나 사용량이 증가함에 따라 DevTools의 Styles 및 Computed 패널이 약간 복잡해지기 시작했습니다.

Safari는 이에 약간의 도움이 되는 기능을 출시했습니다. Computed 창은 이제 접을 수 있는 섹션 안에 깔끔하게 정리되고 값 유형별로 그룹화된 모든 CSS 변수를 나열합니다. 예를 들어, 모든 색상 변수는 함께 그룹화됩니다.

플렉스 라인과 그리드 트랙을 시각적으로 정렬 및 정렬

얼마 전 Chrome과 Edge는 Styles 패널에서 플렉스박스 및 그리드 레이아웃을 위한 정말 멋진 정렬 편집기를 얻었습니다. 그것들은 justify-content 또는 align-items 와 같은 복잡한 정렬 속성으로 작업하는 것을 더 시각적으로 만들어주므로 훨씬 더 쉽게 이해할 수 있습니다.

이제 Safari에는 align-content/items/self 및 justify-content/items/self CSS 속성에 대한 유사한 시각적 편집기가 있습니다. 사용 방법은 매우 간단합니다. 스타일 패널에서 정렬 값 옆에 있는 아이콘을 클릭하여 편집기를 열기만 하면 됩니다. 그런 다음 플렉스 라인과 그리드 트랙의 정렬 유형을 선택할 수 있습니다.

파이어폭스

Firefox DevTools 팀은 얼마 동안 DevTools 코드 베이스를 재설계하는 여정에 있었고, 이로 인해 해당 기간 동안 더 적은 수의 기능이 제공되었지만 이제 해당 프로젝트가 완료되었습니다. 이는 팀이 정말 멋진 개선 사항을 많이 가지고 돌아왔음을 의미합니다.

실행 컨텍스트 선택

여러 iframe에서 온 것이든 웹 작업자에서 온 것이든 사이트의 여러 컨텍스트를 처리해야 하는 경우가 있습니다. 브라우저는 이러한 것들을 여러 다른 프로세스에서 실행하기 때문에 DevTools에서 항상 쉽게 액세스할 수 있는 것은 아닙니다.

이 상황을 돕기 위해 Firefox는 입력한 코드가 실행되는 위치를 선택하는 데 사용할 수 있는 컨텍스트 선택기를 콘솔에 추가했습니다. 예를 들어, iframe에 있는 일부 전역 변수의 값을 알고 싶다면 선택기를 사용하여 iframe으로 전환할 수 있습니다.

인스펙터에서 hwb() 함수 지원

hwb() CSS 색상 함수는 CSS 색상 모듈 4 사양의 일부이며 색상을 지정하는 매우 직관적인 방법입니다. HWB 색상은 3가지 값을 사용합니다. 첫 번째 값은 색상의 시작점인 색조입니다. 두 번째 및 세 번째 값은 최종 색상을 만들기 위해 혼합되어야 하는 흰색의 양과 검은색의 양입니다.

hwb 기능은 현재 Safari 및 Firefox에서 지원되며 Firefox DevTools 팀은 Inspector에서 이에 대한 지원을 출시했습니다. 이제 hwb 함수가 올바르게 인식되고 추가 보너스로 키보드로 W 및 B 값을 증가 및 감소시키면 자동으로 0% 에서 100% 사이를 유지합니다.

선택할 수 없는 요소 선택

흥미롭게도 DevTools에서 요소를 선택하는 것은 pointer-events CSS 속성의 영향을 받습니다. 즉, 포인터 이벤트( pointer-events:none 사용)를 수신하지 않도록 요소가 지정된 경우 마우스 상호 작용이 필요하기 때문에 DevTools의 요소 선택기를 사용하여 요소를 선택할 수 없습니다.

크롬과 엣지에는 아는 사람이 거의 없는 특별한 트릭이 있습니다. 요소 선택기를 사용하는 동안 Shift 키를 누르고 있으면 pointer-events:none 요소도 선택 가능하게 됩니다.

좋은 소식은 Firefox도 동일한 기능을 구현했다는 것입니다. 여러 DevTools에 걸친 기능의 패리티는 여러 브라우저에서 웹 사이트를 훨씬 쉽게 테스트하고 디버깅할 수 있기 때문에 사용자에게 항상 좋은 소식입니다.

패리티에 대해 이야기하는 동안 Firefox가 개별 이벤트 리스너도 비활성화하는 방법을 제공했다는 점도 언급할 가치가 있습니다.

Inspector 패널에서 요소 옆에 있는 [env] 배지를 클릭하여 요소에 연결된 이벤트 리스너를 나열할 수 있습니다. 이제 이벤트 리스너 목록에는 리스너를 전환하는 확인란도 포함됩니다.

디버거에서 한 줄의 코드 무시

프레임워크와 라이브러리를 사용하는 대규모 코드 기반의 DevTools에서 JavaScript를 디버깅하는 데 시간을 보낸다면 소스 파일을 무시하는 방법에 이미 익숙할 수 있습니다. 이 기능을 사용하면 전체 파일을 무시된 것으로 표시하여 디버거가 파일 내에서 일시 중지하도록 할 수 있습니다.

이것은 예를 들어 프레임워크 번들 파일을 무시된 것으로 표시할 수 있고 프레임워크 코드로 들어가는 것에 대한 두려움 없이 자신의 코드를 행복하게 디버그할 수 있음을 의미합니다.

다른 브라우저도 이 기능을 지원하지만 Firefox는 정말 멋진 진화로 혁신하고 있습니다. 파일 내의 줄 범위를 무시하는 기능입니다! 항상 호출되는 파일에 유틸리티 함수가 있다고 상상해보십시오. 이 함수만 무시된 것으로 표시하고 해당 파일의 다른 모든 항목을 정상적으로 디버그할 수 있는 것이 유용할 수 있습니다. 모든 소스 코드와 라이브러리를 동일한 파일에 그룹화하는 번들러를 사용할 때도 유용할 수 있습니다.

이 기능은 작성 시점에서 아직 실험 단계입니다. about:config 페이지에서 먼저 devtools.debugger.features.blackbox-lines 부울을 true로 설정해야 합니다.

활성화되면 소스 코드의 아무 줄이나 마우스 오른쪽 버튼으로 클릭하고 줄 Ignore line 를 선택할 수 있습니다.

그것이 지금입니다!

이 업데이트가 마음에 드셨기를 바라며 웹 개발 시 유용하게 사용되기를 바랍니다. 항상 그렇듯이 피드백, 보고할 버그 또는 DevTools에 대한 새로운 기능 아이디어가 있는 경우 직접 들려주세요! 웹 플랫폼 디버깅 기능이 얼마나 발전했는지 확인하는 것은 인상적이며 우리 모두는 이를 더욱 개선하는 데 도움을 줄 수 있습니다!