Введение
Неважно, используете ли вы контекст 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 есть новая функция Canvas Inspection, которая позволяет это сделать.
В этой статье я покажу, как использовать эту функцию для отладки работы с холстом. Инспектор поддерживает контексты 2D и WebGL, поэтому вы сможете сразу получить полезные сведения для отладки.
Начало работы
Чтобы начать, перейдите по адресу about:flags в Chrome и включите параметр Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).
Затем перейдите в DevTools и нажмите на значок шестеренки 
в правом нижнем углу. Перейдите в раздел Эксперименты и включите Проверка Canvas.
Чтобы изменения вступили в силу, закройте и снова откройте Инструменты разработчика. Для этого можно использовать сочетание клавиш Alt+R или Option+R.
Когда инструменты разработчика откроются снова, перейдите в раздел Profiles (Профили). Там вы увидите новый параметр Canvas Profiler (Профилировщик Canvas).
Для начала вы заметите, что профилировщик Canvas отключен. Откройте страницу с элементом canvas, который вы хотите отладить, и нажмите Enable (Включить). Страница перезагрузится, и вы сможете отслеживать вызовы <canvas>.
Вам нужно решить, хотите ли вы сделать снимок одного кадра или нескольких последовательных кадров. Кадр – это то, что вы видите на временной шкале в Инструментах разработчика.
Один кадр. Запись вызовов до конца текущего кадра. Последовательные кадры – захватывает все кадры всех элементов <canvas>, пока вы не остановите запись. Выбор режима зависит от того, как вы используете элемент <canvas>. Если вы хотите запечатлеть один кадр из анимации, Для короткой анимации, которая воспроизводится в ответ на действие пользователя, может потребоваться захватить последовательные кадры.
Теперь все готово к съемке.
Запись кадров
Чтобы начать запись, нажмите Start (Начать), а затем взаимодействуйте с приложением как обычно. Через некоторое время вернитесь в Инструменты разработчика и, если вы записываете данные непрерывно, нажмите Stop (Остановить).
В списке слева появится новый профиль с количеством вызовов контекста для всех элементов <canvas>. Нажмите на профиль, и вы увидите экран, который выглядит примерно так:
На нижней панели вы увидите список всех записанных кадров, которые можно просмотреть. При нажатии на каждый из них на скриншоте вверху будет показано состояние элемента <canvas> в конце этого кадра. Если у вас несколько элементов <canvas>, вы можете выбрать, какой из них будет показан, в меню под скриншотом.
Внутри кадра вы увидите группы вызовов отрисовки. Каждая группа вызовов отрисовки содержит один вызов отрисовки, который будет последним вызовом в группе. Что такое вызов отрисовки? Для 2D-контекста это могут быть такие функции, как clearRect(), drawImage(), fill(), stroke(), putImageData() или любые функции рендеринга текста, а для WebGL – clear(), drawArrays() или drawElements(). По сути, это любое действие, которое изменяет содержимое текущего буфера отрисовки. Если вы не разбираетесь в графике, представьте буфер как битовую карту с пикселями, которыми мы манипулируем.
Теперь вам нужно просто пройтись по списку. Это можно сделать на уровне кадра, группы вызовов отрисовки или вызова. Какой бы способ вы ни выбрали (для быстрой навигации под скриншотом есть кнопки), вы увидите контекст, в котором возникла ошибка, и сможете быстро ее исправить.
Найдите отличия
Ещё одна полезная функция – возможность посмотреть, какие свойства и переменные изменились между двумя вызовами.
Чтобы открыть ее, нажмите на кнопку боковой панели (
). По мере того как вы будете переходить от одного вызова отрисовки к другому, вы увидите, какие свойства были обновлены. Чтобы посмотреть содержимое буферов или массивов, наведите на них указатель мыши.
Выскажитесь!
Теперь вы знаете, как отлаживать работу холста в инструментах разработчика Chrome. Если у вас есть отзывы об инструменте Canvas Profiler, сообщите об ошибке или напишите в группу инструментов разработчика Chrome. Если вы обнаружите ошибки или у вас есть пожелания по улучшению инструментов для работы с <canvas>, сообщите нам об этом. Мы постоянно совершенствуем инструменты Chrome, опираясь на отзывы разработчиков.