소개
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();
// … and on and on
}
캔버스 컨텍스트로 전송된 안내를 캡처하여 하나씩 안내해야 하는 경우도 있습니다. 다행히 Chrome DevTools의 새로운 Canvas Inspection 기능을 사용하여 이를 수행할 수 있습니다.
이 도움말에서는 이 기능을 사용하여 캔버스 작업 디버깅을 시작하는 방법을 설명합니다. 검사기는 2D 및 WebGL 컨텍스트를 모두 지원하므로 어떤 컨텍스트를 사용하든 유용한 디버깅 정보를 즉시 얻을 수 있습니다.
시작하기
시작하려면 Chrome에서 about:flags 페이지로 이동하여 '개발자 도구 실험 사용 설정'을 사용 설정하세요.
그런 다음 DevTools로 이동하여 오른쪽 하단에 있는 톱니바퀴 
아이콘을 누릅니다. 여기에서 실험으로 이동하여 캔버스 검사를 사용 설정할 수 있습니다.
변경사항을 적용하려면 DevTools를 닫았다가 다시 열어야 합니다. 편리한 대안인 Alt+R 또는 Option+R를 사용할 수 있습니다.
DevTools가 다시 열리면 Profiles 섹션으로 이동하면 새로운 Canvas Profiler 옵션이 표시됩니다.
먼저 캔버스 프로파일러가 사용 중지되어 있는 것을 확인할 수 있습니다. 디버그하려는 캔버스가 포함된 페이지가 있으면 사용 설정을 누르기만 하면 페이지가 새로고침되어 <canvas> 호출을 캡처할 수 있습니다.
단일 프레임을 캡처할지, 아니면 프레임이 DevTools 타임라인에서 보는 것과 정확히 동일한 연속 프레임을 캡처할지 결정해야 합니다.
단일 프레임은 현재 프레임이 끝날 때까지 호출을 캡처한 다음 중지합니다. 반면 연속 프레임은 중지하라고 지시할 때까지 모든 <canvas> 요소의 모든 프레임을 캡처합니다. 어떤 모드를 선택할지는 <canvas> 요소를 사용하는 방법에 따라 달라집니다. 진행 중인 애니메이션의 경우 단일 프레임을 캡처하는 것이 좋습니다. 사용자 이벤트에 응답하여 발생하는 간단한 애니메이션의 경우 연속 프레임을 캡처해야 할 수 있습니다.
이제 설정이 완료되어 캡처를 시작할 수 있습니다.
프레임 캡처
사용자를 캡처하려면 시작을 누르고 평소처럼 애플리케이션과 상호작용하기만 하면 됩니다. 잠시 후 DevTools로 돌아가 연속 캡처하는 경우 Stop을 누릅니다.
이제 왼쪽 목록에 새로운 프로필이 표시되고 모든 <canvas> 요소에서 캡처된 컨텍스트 호출 수를 포함합니다. 프로필을 클릭하면 다음과 같은 화면이 표시됩니다.
하단 창에는 단계별로 실행할 수 있는 캡처된 모든 프레임의 목록이 표시됩니다. 각 프레임을 클릭하면 상단의 스크린샷에 프레임 끝에 있는 <canvas> 요소의 상태가 표시됩니다. <canvas> 요소가 여러 개인 경우 스크린샷 바로 아래의 메뉴를 사용하여 표시할 요소를 선택할 수 있습니다.
프레임 내에 그리기 호출 그룹이 표시됩니다. 각 그리기 호출 그룹에는 그룹의 마지막 호출인 단일 그리기 호출이 포함되어 있습니다. 그리기 호출이란 무엇일까요? clearRect(), drawImage(), fill(), stroke(), putImageData() 또는 텍스트 렌더링 함수와 같은 2D 컨텍스트의 경우 clear(), drawArrays() 또는 drawElements()입니다. 기본적으로 현재 그리기 버퍼의 콘텐츠를 변경하는 모든 것입니다. 그래픽을 좋아하지 않는다면 버퍼를 우리가 조작하는 픽셀이 포함된 비트맵으로 생각할 수 있습니다.
이제 목록을 단계별로 진행하기만 하면 됩니다. 프레임에서 호출 그룹 또는 통화 수준에서 그릴 수 있습니다. 어떤 방법으로 목록을 탐색하든 (스크린샷 바로 아래에는 빠르게 탐색할 수 있는 버튼이 있음) 해당 지점의 컨텍스트가 표시되어 버그가 발생하면 빠르게 찾아서 수정할 수 있습니다.
차이점 파악하기
또 다른 유용한 기능은 두 호출 간에 어떤 속성과 변수가 변경되었는지 확인하는 기능입니다.
사이드바 버튼 (
)을 클릭하기만 하면 새로운 뷰가 열립니다. 그리기 호출을 단계별로 실행하면 업데이트된 속성이 표시됩니다. 버퍼나 배열 위로 마우스를 가져가면 콘텐츠가 표시됩니다.
목소리를 분명하게 전달하세요
이제 Chrome DevTools에서 캔버스 작업을 디버그하는 방법을 알게 되었습니다. 캔버스 프로파일러 도구에 관한 의견이 있으면 버그를 신고하거나 Chrome DevTools 그룹에 게시하세요. 버그를 발견하거나 <canvas>을 검사할 때 확인하고 싶은 점이 있으면 알려주세요. Chrome 도구의 개선은 개발자 사용 및 의견을 통해서만 가능하기 때문입니다.