이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 116의 새로운 기능

Adriana Jara

다음 사항에 유의하시기 바랍니다.

Document Picture in Picture API를 사용하여 사용자의 생산성을 높이세요.
이제 DevTools에서 더 쉽게 누락된 스타일시트를 디버그할 수 있습니다.
이 외에도 다양한 기능이 제공됩니다.

저는 아드리아나 자라입니다. Chrome 116의 개발자를 위한 새로운 기능을 자세히 살펴보겠습니다.

Document Picture-in-Picture API입니다.

Document Picture-in-Picture API를 사용하면 임의의 HTML 콘텐츠로 채울 수 있는 상시 사용 설정 창을 열 수 있습니다.

Sintel 트레일러 동영상이 재생되는 PIP 모드 창입니다. — Document Picture-in-Picture API로 만든 PIP 모드 창 (데모)

Document Picture-in-Picture API의 PIP 창은 window.open()를 사용하여 열린 빈 동일 출처 창과 비슷하지만 몇 가지 차이점이 있습니다.

PIP 모드 창이 다른 창 위에 떠 있습니다.
PIP 모드 창은 항상 열린 창보다 오래 지속됩니다.
PIP 창은 탐색할 수 없습니다.
PIP 모드 창 위치는 웹사이트에서 설정할 수 없습니다.

다음 HTML은 맞춤 동영상 플레이어와 버튼 요소를 설정하여 PIP 모드에서 동영상 플레이어를 엽니다.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

다음 JavaScript는 사용자가 버튼을 클릭하여 빈 PIP 모드 창을 열 때 documentPictureInPicture.requestWindow()를 호출합니다. 반환된 프로미스는 PIP 모드 창 JavaScript 객체로 확인됩니다. 동영상 플레이어가 append()를 사용하여 해당 창으로 이동합니다.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

자세한 내용과 예는 모든 요소의 PIP 모드를 참고하세요.

DevTools에서 스타일시트 디버깅을 개선할 수 있습니다.

DevTools에는 누락된 스타일시트와 관련된 문제를 식별하고 디버그하도록 여러 기능이 개선되었습니다.

첫째, 혼란을 최소화하기 위해 이제 소스 > 페이지 트리에 성공적으로 배포 및 로드된 스타일시트만 표시됩니다.

또한 Sources > Editor에서 이제 실패한 문, @import,url(), href 문 옆에 인라인 오류 도움말을 밑줄과 함께 표시합니다.

소스 패널의 도움말과 함께 밑줄이 표시된 문.

이제 콘솔에는 실패한 요청에 대한 링크 외에도 로드에 실패한 스타일시트를 참조하는 정확한 행으로 연결되는 링크가 제공됩니다.

Console은 문제가 있는 구문이 있는 정확한 행으로 연결되는 링크를 제공합니다.

Network(네트워크) 패널은 로드하지 못한 스타일시트를 참조하는 정확한 줄로 연결되는 링크로 Initiator 열을 일관되게 채웁니다.

Issues 패널에는 손상된 URL, 실패한 요청, 잘못 배치된 @import 문을 비롯하여 모든 스타일시트 로드 문제가 표시됩니다.

소스 및 요청으로 연결되는 링크가 있는 문제 패널

Chrome 116의 DevTools에 관한 자세한 내용과 자세한 내용은 DevTools의 새로운 기능을 확인하세요.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

모션 경로를 사용하면 작성자가 그래픽 객체의 위치를 지정하고 개발자가 지정한 경로를 따라 애니메이션을 적용할 수 있습니다.
이제 키프레임 애니메이션에서 display 및 content-visibility 속성이 지원되므로 이탈 애니메이션을 CSS에서만 추가할 수 있습니다.
이제 Import API를 Bring Your Own Buffer 리더와 함께 사용할 수 있으므로 가비지 컬렉션 오버헤드와 사본을 줄이고 사용자의 응답성을 개선할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 116의 추가 변경사항은 아래 링크를 확인하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

안녕하세요, 아드리아나 자라님. Chrome 117이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.