최신 DevTools 뉴스
이 게시물의 첫 번째 뉴스 항목은 약간의 메타입니다. 이 업데이트 자체입니다. 가끔씩, 하지만 한 달에 한 번 이상 Chrome DevTools의 최신 소식을 요약하여 전해드리겠습니다.
'최신'이라고 말하는 것은 정말 최신이라는 뜻입니다. Chrome Canary에 방금 도착한 새로운 기능에 대해 이야기할 예정이니 안정적인 버전을 사용하고 싶다면 그도 좋습니다. 하지만 모험심이 있고 최신 정보를 계속 확인하고 싶다면 다음 게시물을 확인하세요. 최신 기능과 버그 수정 외에도 각 게시물 끝에 커뮤니티 하트비트 섹션이 있어 소중한 사용자 여러분의 참여도가 가장 높은 항목을 확인할 수 있습니다.
이제 본론으로 들어가 실제 뉴스를 들어보겠습니다.
DevTools의 새로운 기능
네트워크 및 타임라인의 필름 스트립과 같은 스크린샷
불과 일주일 전, Google은 중요한 새로운 기능인 네트워크 및 타임라인 탭에서 모두 페이지의 스크린샷을 캡처하는 기능을 실험 단계에서 출시했습니다.
네트워크 패널에서 작은 카메라 아이콘을 클릭하여 프레임 캡처를 사용 설정한 다음 페이지를 새로고침하여 캡처를 트리거합니다. WebPageTest와 같은 다른 도구로 캡처한 스크린샷을 제외하고 현재는 실제로 페인트에서 가져온 프레임만 표시됩니다.
프레임 중 하나를 더블클릭하면 확대된 뷰가 표시되고 (그런 다음 왼쪽/오른쪽 화살표를 사용하여 탐색) 프레임 위로 마우스를 가져가면 패널과 타임라인에 선이 표시되어 프레임이 캡처된 정확한 시점을 시각화할 수 있으므로 로드 시퀀스와 연결할 수 있습니다. 이렇게 하면 렌더링 차단 웹 글꼴과 같은 일반적인 로드 문제를 훨씬 더 간단하게 디버깅할 수 있습니다.
타임라인 패널에서 상단 툴바의 'Screenshots' 체크박스를 전환하여 스크린샷 캡처를 사용 설정할 수 있습니다. 여기서는 네트워크 패널과는 약간 다르게 작동합니다. 이 경우 실제 페인팅과 관계없이 최대한 자주 캡처하여 타임라인의 다른 행과 상관관계가 있는 선형 타임스케일에 해당 스크린샷을 배치할 수 있도록 합니다. 미리보기를 표시하기 위해 더블클릭할 필요 없이 마우스를 가져가면 확대된 프레임이 표시됩니다.
두 도구는 기능과 UX 측면에서 약간 동기화되지 않으므로 기능을 사용해 보고 crbug.com/new의 티켓을 통해 또는 @ChromeDevTools에 트윗하여 의견을 보내주세요.
네트워크 패널의 네트워크 제한
기기 모드를 도입할 때 추가된 기능인 네트워크 제한이 네트워크 패널 툴바에 두 번째 홈을 마련하여 이제 한곳에서 네트워크 최적화에 집중할 수 있습니다.
이 새 홈은 미러링된 홈일 뿐입니다. 사이트의 반응성을 높이는 작업을 할 때는 여전히 연결 상태가 좋지 않은 경우를 시뮬레이션하는 것이 매우 중요하므로 기기 모드에서도 계속 사용할 수 있습니다.
끝으로, 피곤한 하루를 보낸 후 인터넷 연결이 끊어진 이유를 궁금해 하다가 네트워크 제한을 사용 중지하는 것을 잊은 불안한 자들 중 한 명이신가요? 이제 네트워크 제한이 사용 설정되면 Network 패널 탭에 경고 아이콘이 표시됩니다.
기타 정보
- 네트워크 타임라인에 표시되는 이상한 원이 싫으셨나요? 저희도 마찬가지입니다. 새 필름 스트립의 프레임이 캡처된 시점입니다. 이제 마우스를 가져가면 선으로 표시됩니다.
- 기기 모드: 이제 기기 간에 전환할 때 방향을 유지합니다.
커뮤니티 활동 현황
Chrome DevTools로 자세히 살펴보기
Bret Little가 기본 DevTools 기능을 소개하고 다양한 심층 팁과 트릭을 제공하는 멋진 둘러보기 과정을 출시했습니다. 유용한 정보가 많이 있습니다. DevTools 문서를 더 많이 읽어 보세요.
DevTools IDE라고요?
웹 개발자이자 DevTools 애호가인 Kenneth Auchenberg는 몇 달 전 개념 증명용 독립형 DevTools 앱을 개발했으며, 그의 블로그 게시물이 이번 주에 다시 (해커) 뉴스에 올랐습니다.
DevTools를 본격적인 IDE로 전환하는 것은 재미있는 아이디어이며, 많은 팀원들이 이전에 꿈꿔 왔던 것이기도 하지만, 엄청난 규모의 프로젝트가 될 것입니다.
어떻게 생각하시나요? DevTools IDE가 좋은가요? 아니면 잘 작동하는 걸 볼 수 있나요? 어떤 모습일까요? 댓글을 남겨 알려 주시기 바랍니다.
곧 뵙겠습니다.
폴 바카우스 및 DevTools팀