DevTools Digest - 필름 스트립 및 새로운 제한 모드

폴 바카우스
폴 바카우스

최신 개발자 도구 뉴스

이 게시물의 첫 번째 뉴스 항목은 약간 메타적인 것으로, 이번 업데이트 자체에 해당합니다. 이따금씩, 적어도 한 달에 한 번은 Chrome DevTools에서 벌어지고 있는 일을 요약해 드리겠습니다.

Chrome Canary에 새로 추가된 새로운 기능에 관해서도 말씀드리겠습니다. 하지만 모험심이 뛰어나고 최고를 유지하고 싶다면 이 게시물을 참고하세요. 최신 기능과 버그 수정 외에도 각 게시물의 끝부분에 있는 커뮤니티 하트비트 섹션에서 소중한 사용자가 참여해 주신 멋진 업적을 집중 조명합니다.

본론으로 넘어가겠습니다.


DevTools의 새로운 기능

네트워크 및 타임라인의 필름 스트립형 스크린샷

불과 1주일 전, 실험에서 벗어나 네트워크 탭과 타임라인 탭에서 페이지 스크린샷을 캡처하는 기능이 새로 추가되었습니다.

Network 패널에서 작은 카메라 아이콘을 클릭하여 프레임 캡처를 사용 설정한 다음 페이지를 새로고침하여 캡처를 트리거합니다. WebPageTest와 같은 다른 도구로 캡처한 스크린샷 외에는 현재 페인트에서 실제로 나온 프레임만 표시됩니다.

프레임 중 하나를 더블클릭하면 확대된 뷰가 표시되며 (그런 다음 왼쪽/오른쪽 화살표를 사용하여 탐색), 패널 위로 마우스를 가져가면 패널과 타임라인에 선이 표시되어 프레임이 캡처된 시점을 정확하게 시각화하여 로드 시퀀스와 연관시킬 수 있습니다. 이렇게 하면 렌더링 차단 웹 글꼴과 같은 일반적인 로드 문제를 훨씬 간단하게 디버깅할 수 있습니다.

타임라인 패널의 상단 툴바의 '스크린샷' 체크박스를 전환하여 스크린샷 캡처를 사용 설정할 수 있습니다. 네트워크 패널과 비교했을 때 여기서 작동 방식이 약간 다릅니다. 이 경우 실제 페인트와 관계없이 타임라인의 다른 행과 관련된 선형 시간 척도에 해당 스크린샷을 드롭할 수 있도록 최대한 자주 캡처합니다. 더블클릭하여 미리보기를 표시할 필요 없이 마우스 오버 시 확대된 프레임이 표시됩니다.

이 두 가지는 기능 및 UX 면에서 약간 일치하지 않으므로 기능을 사용해 보시고 crbug.com/new의 티켓이나 @ChromeDevTools로 트윗을 보내 의견을 보내 주시기 바랍니다.

Network 패널의 네트워크 제한

기기 모드를 도입하면서 추가한 기능인 네트워크 제한은 네트워크 패널 툴바에서 두 번째 홈을 발견하여 한곳에서 네트워크 최적화에 집중할 수 있습니다.

네트워크 제한의 실행

하지만 새로운 홈은 거울에 불과합니다. 기기 모드에서 계속 사용할 수 있습니다. 사이트를 반응형으로 만들려면 연결 상태를 시뮬레이션하는 것이 여전히 중요하기 때문입니다.

마지막으로, 직장에서 긴 하루를 보낸 후 네트워크 제한을 사용 중지하는 것을 깜빡 잊고 인터넷 연결이 끊어지는 이유를 궁금해 하신 분인가요? 네트워크 제한이 사용 설정되면 네트워크 패널 탭에 경고 아이콘이 표시됩니다.

기타 정보


커뮤니티 하트비트

Chrome DevTools를 사용한 다운 및 더티

네트워크 제한의 실행

Bret Little은 기본적인 DevTools 기능을 익히는 동시에 여러 가지 심층적인 도움말 및 유용한 정보를 제공하는 멋진 둘러보기 과정을 발표했습니다. 거기에 정말 유용한 정보가 있고 더 많은 DevTools 문서도 도움이 되죠!

DevTools IDE는...?!

웹 개발자이자 DevTools 전문가인 케네스 오헨버그는 몇 달 전에 독립 실행형 개념 증명 앱을 개발했으며 블로그 게시물에서 이번 주에 다시 (해커) 소식을 전했습니다.

DevTools를 완전한 IDE로 전환하는 것은 많은 팀원들이 이전에 꿈꾸던 멋진 아이디어이지만, 이는 상당한 부분을 차지할 프로젝트이기도 합니다.


어떻게 생각하시나요? DevTools IDE는 환상적인 아이디어인가요, 아니면 잘 진행될까요? 어떤 모습이어야 할까요? 댓글을 남겨 알려 주시기 바랍니다.

곧 뵙겠습니다
폴 바카우스, DevTools팀