항상 사용 설정된 새로운 간소화된 기기 모드를 통해 DevTools가 모바일 우선으로 전환되는 방법을 알아보세요. 색상 버튼을 사용하여 선택기에 색상을 빠르게 추가하고 DevTools에 곧 제공될 기능을 알아보세요.
작성의 미래 살펴보기
Chrome Dev Summit에서 돌아왔습니다. DevTools를 사용하는 현재와 미래의 모습을 보여드렸습니다. 저는 보통 이 다이제스트에서 아직 실험 단계이거나 진행 중인 작업이 많은 기능은 언급하지 않지만 이번에는 예외로 하겠습니다. 전체 강연을 시청할 시간이 없다면 다음 내용을 참고하세요.
기기 모드 버전 2
YouTube는 기기 모드의 새로운 대담한 버전을 개발하는 데 여전히 많은 노력을 기울이고 있지만 모든 사용자에게 이 기능을 사용해 볼 기회를 제공하고자 오늘 Canary에서 이 기능을 사용 설정했습니다. 이번 변경사항을 통해 DevTools는 모바일 개발이 기본이고 데스크톱 개발이 '부가기능'인 모바일 우선 미래를 향해 나아가고 있습니다. 앞으로 몇 주에 걸쳐 더 많은 반복 작업이 진행될 예정이며, 완료되면 확장된 블로그 게시물을 통해 자세히 알려드리겠습니다.
강력한 애니메이션 검사
현재 개발 중인 애니메이션 검사를 사용하면 움직이는 모든 항목에서 발생하는 상황을 전체적으로 자세히 파악할 수 있습니다. 한 번에 하나의 요소에 전환을 표시하는 대신, 사용자가 화면에 표시된 모든 항목에 집중할 수 있도록 복잡한 애니메이션을 그룹화하는 휴리스틱을 추가했습니다. 동영상을 살펴보세요. 완전히 출시되면 더 큰 규모의 독립형 블로그 게시물을 제공할 예정입니다.
레이아웃 모드 (미리보기)
아직은 완성되지 않았지만 매우 유망한 기능인 새로운 레이아웃 모드는 완전히 구현될 때까지 기다릴 수 없습니다. 레이아웃 모드는 페이지의 모든 요소에 대해 DevTools에 WYSIWYG 편집 기능을 추가합니다. 지금까지는 높이, 너비, 패딩, 마진을 컨텍스트에서 수정할 수 있습니다. 사용해 보실 수 있을 때까지 조금 더 기다려 주세요. 새로운 소식이 있으면 알려드리겠습니다.
업데이트된 타임라인 패널을 사용한 성능 프로파일링
새로운 RAIL 성능 모델을 도입하기 위한 대대적인 노력의 일환으로 타임라인 패널에 크고 작은 수백 개의 변경사항이 적용되었으며, 이러한 변경사항을 통해 성능 프로파일링 스토리가 상당히 변형되고 개선되었습니다. 따라서 Google의 Paul Irish는 개별 변경사항을 개별적으로 보여주는 대신 사이트(이 경우 Hotel Tonight의 모바일 사이트)의 성능을 적절하게 디버그하는 방법을 라이브 스트림으로 보여주었습니다. 새로 발표된 기능에는 로드 및 성능 필름 스트립, 포함된 네트워크 폭포식 차트, 트리뷰 요약, 도메인 및 파일별 성능 비용을 볼 수 있는 기능이 있습니다.
모든 요소에 전경 및 배경 색상을 쉽게 추가
요소에 background-color 또는 color 속성을 추가할 때마다 색상 선택 도구를 열 수 없었습니다. 대신 대부분의 경우 색상 선택 도구 아이콘이 표시될 때마다 'background: red;'와 같이 입력한 다음 원하는 실제 색상을 선택합니다.
이 문제를 간소화할 수 있다고 생각했습니다. 선택 도구의 오른쪽 하단에 마우스를 가져가면 색상을 추가하고 클릭 한 번으로 선택 도구를 표시할 수 있는 두 가지 편리한 버튼이 표시됩니다.
그 밖의 추천
- 이전에는 일반 미디어 유형을 표시하여 스타일 패널의 공간을 많이 낭비했습니다. 이제 일반적인 경우 선택기 앞에 이러한 항목이 숨겨집니다.
- 이제 스타일 패널에서 CSS 선택자 위로 마우스를 길게 가져가면 페이지에서 선택자가 적용되는 요소 수를 확인할 수 있습니다.
- 아직 인쇄를 포기하지 않으셨나요? 인쇄 미디어 에뮬레이션은 페이지가 인쇄될 때 어떤 모양인지 확인할 수 있도록 계속 제공됩니다. 단, 렌더링 설정으로 이동했습니다.
- 이제 검사할 요소를 선택하면 관련 DOM 하위 트리가 자동으로 펼쳐지고 닫힙니다. 설명하기는 어렵습니다. 눈으로 확인하는 것이 가장 좋습니다.
언제나 그렇듯이 트위터 또는 아래 댓글을 통해 의견을 보내 주시고 crbug.com/new에 버그를 제출해 주세요.
다음 달에 뵙겠습니다.
폴 바카우스 및 DevTools팀