Canvas Inspection using Chrome DevTools

HTML5 Rocks

소개

여러분이 2D 혹은 WebGL 컨텍스트를 사용하는지는 문제가 아닙니다. <canvas> 엘리먼트로 작업을 해본 누구나 디버깅이 어마어마하게 어려워질 수 있다는 것을 알고 있습니다. 보통 캔버스로 작업하는 것은 길고 따라가기 어려운 호출의 연속과 관계되어 있습니다.

function draw() {

  context.clearRect(0, 0, 258, 258);
  context.fillStyle = "#EEEEEE";
  context.beginPath();
  context.arc(129, 129, 127, 0, 6.28, true);
  context.closePath();
  context.fill();

  // … 등등 등등
}

종종 캔버스 컨텍스트로 전송되는 명령어들을 포착해서 그것들을 하나하나 따라가고 싶을 겁니다. 다행스럽게도 크롬 개발자도구에 새로 추가된 Canvas Inspection 기능이 바로 그것을 할 수 있게 해줍니다!

이 글에서는 저는 캔버스 작업의 디버깅을 시작하기 위해 이 기능을 어떻게 사용해야 하는지 보여드릴겁니다. Inspector는 2D와 WebGL 컨텍스트를 둘 다 지원하기 때문에 사용하는 것이 어떤 것인지는 문제가 되지 않으며 유용한 디버깅 정보를 바로 얻을 수도 있습니다.

시작하기

시작하기 위해, 크롬에 about:flags를 입력하고 “Enable Developer Tools experiments”(한글 버전의 경우 '개발자 도구 실험을 사용합니다.'로 표시)를 켭니다.

Figure 1 - about:flags에서 '개발자 도구 실험을 사용합니다.'로 설정

다음으로, 개발자도구로 가서 아래의 오른쪽 구석에 있는 cog 를 누릅니다. 거기에서 실험실(Experiments)로 가서 Canvas inspection을 활성화합니다.

Figure 2 - 개발자도구의 실험실(Experiments)에서 Canvas inspection을 활성화

변경 사항을 적용하려면 개발자도구를 닫았다 다시 여는 과정(여러분은 Alt+R이나 Option+R을 단축키로 사용할 수 있습니다.)이 필요합니다.

개발자도구가 다시 열리면, 프로파일 영역으로 가서 캔버스 프로파일러 옵션을 새로 볼 수 있을 것입니다.

캔버스 프로파일러가 비활성화되어 있는지에 대한 확인과 함께 시작해봅시다. 일단 디버깅하려는 캔버스를 포함한 페이지에서 간단히 Enable를 누르면 페이지가 재로딩되며 <canvas> 호출을 포착할 준비가 됩니다.

Figure 3 - 캔버스 프로파일러의 전환

여러분은 개발자도구의 타임라인에서 보는 것과 완전 똑같은 프레임을 보기 위해서 단일 프레임을 캡쳐할지 아니면 연속적인 프레임을 캡쳐할지를 결정해야 합니다.

프레임은 페이지의 이벤트 루프에서 한번의 통과를 뜻합니다. 이것은 자바스크립트의 실행과 이벤트의 핸들링, DOM 업데이트, 스타일 변경, 레이아웃의 실행, 페이지의 페인팅과 합성을 수반합니다. 부드러운 애니메이션을 위해 여러분은 각 프레임이 초당 60분의 1 혹은 16.6ms보다 적은 시간을 소요하는 것을 원할 것입니다.

단일 프레임(Single frame) 캡쳐는 현재 프레임의 마지막까지 호출되고 종료됩니다. 반대로, 연속 프레임(Consecutive frames)은 멈추라고 할 때까지 모든 <canvas> 엘리먼트의 모든 프레임을 캡쳐합니다. 여러분이 어떻게 <canvas> 엘리먼트를 사용 중이냐에 따라 모드를 결정할 수 있습니다. 진행 중인 애니메이션이라면 아마 단일 프레임을 캡쳐할 것입니다. 짧은 애니메이션은 사용자 이벤트를 발생하기 때문에 연속 프레임을 캡쳐하기를 원할 것입니다.

Figure 4 - 얼마나 많은 프레임을 캡쳐할지 선택하세요

저것으로 우리는 모든 설정을 마치고 캡쳐를 시작하기 위한 준비가 되었습니다!

프레임 캡쳐하기

캡쳐를 위해 간단하게 Start를 누르고 어플리케이션을 평상시처럼 조작합니다. 잠시 뒤에 개발자도구로 돌아가서 연속으로 캡쳐하고 있다면 Stop버튼을 누릅니다.

이제 모든 <canvas> 엘리먼트 간의 많은 양의 컨텍스트 호출들의 캡쳐가 완료되어 빤짝거리는 새로운 프로파일을 왼쪽의 목록에서 볼 수 있습니다. 프로파일을 클릭해서 이것과 같은 뭔가가 보이는 화면을 확인할 수 있을 것입니다.

Figure 5 - 개발자도구의 캔버스 프로파일

아래쪽 창에서 따라가볼 수 있는 모든 캡쳐된 프레임들의 리스트를 볼 수 있으며 각 항목을 클릭하면 그 프레임에서 <canvas> 엘리먼트의 최종 상태를 보여주는 스크린샷이 상단에 보여질 것입니다. 만약 여러개의 <canvas> 엘리먼트가 있다면 아래 스크린샷처럼 메뉴를 사용해서 보여질 하나를 선택할 수 있습니다.

Figure 6 - 캔버스 컨텍스트 선택하기

프레임 안에서는 드로우(Draw) 호출 그룹을 확인할 수 있습니다. 각 드로우 호출 그룹은 그 그룹에서의 마지막 호출이 될 단일 드로우 호출을 포함하고 있습니다. 그렇다면 드로우 호출은 과연 무엇일까요? 2D 컨텍스트에서는 clearRect(), drawImage(), fill(), stroke(), putImageData()나 어떤 텍스트 렌더링 함수과 같은 것들이고 WebGL에서는 clear(), drawArrays() or drawElements()일 것입니다. 즉 현재의 드로잉 버퍼의 내용을 변경하는 근본적인 무엇인가가 될 것입니다. (만약 여러분이 그래픽스에 관심이 없다면, 우리가 다루고 있는 픽셀들로 이루어진 비트맵과 같은 버퍼를 떠올려보시기 바랍니다.)

여러분 모두는 이제 항목들을 따라가볼 수 있으며 이를 프레임이나 드로우(Draw) 호출 그룹 혹은 호출 수준에서 할 수도 있습니다. 어떠한 방법을 골라도 목록들을 따라갈 수 있으며 (그리고 아래 스크린샷에서 보는 바와 같이 빠르게 돌아다닐 수 있도록 버튼들이 있습니다.) 불쑥 나타난 버그를 빠르게 찾아 수정하고자 하는 곳에서 컨텍스트를 확인할 수 있을 것입니다.

Figure 7 - 간편한 목록 변경을 위한 네비게이션 버튼

차이점 찾기

또다른 유용한 기능은 두 호출 간 변경된 속성과 변수들을 확인할 수 있는 것입니다.

그것을 보기 위해 사이드바 버튼 ()을 클릭하면 새로운 뷰가 팝업됩니다. 드로우(Draw) 호출들을 따라가는 것처럼 갱신된 속성들을 확인할 수 있습니다. 어떠한 버퍼나 배열들도 여러분이 그것들에 머물러 있는 동안 그 내용을 표시할 것입니다.

들어보세요!

자, 이제 여러분은 크롬 개발자도구에서 캔버스 동작을 어떻게 디버깅하는지 알았습니다. 만약 여러분이 캔버스 프로파일러 도구에 대한 피드백이 있으시다면, 버그 신고크롬 개발자도구 그룹에 게시해주시기 바랍니다. 오로지 개발자의 사용과 피드백만이 크롬 도구를 더 나아지게 하므로 때문에 만약 여러분이 버그를 발견하시거나 <canvas>를 조사(Inspecting)할 때 보고 싶은 다른 것들이 있다면 알려주시기 바랍니다.

Comments

0