Я пытаюсь отладить элемент холста с помощью инструментов разработчика Chrome.
От этого:
Как проверить рамки холста
Я вижу, что была экспериментальная функция, позволяющая сделать что-то подобное, но она была удалена.
Есть ли способ найти / найти код JS, отвечающий за изменение какого-либо конкретного элемента холста? таким образом, по крайней мере, мы могли бы добавить точки останова в JS
@HelderSepu да, но действительно сложно найти метод, если есть несколько больших файлов JS (и минифицированных!). Я надеялся, что что-то вроде точки останова прослушивателя событий автоматически обнаружит строку JS при изменении холста.
Раздел Точки останова прослушивателя событий позволяет делать паузу при создании контекста холста. Но я не вижу точки останова для паузы при изменении холста.
Если холст изменен после загрузки страницы, вы можете запустить что-то вроде этого в консоли:
const context = $("canvas").getContext("2d");
for (const key in context) {
if (context[key] instanceof Function) {
// debug() pauses on the first line of the function whenever it's called.
// This function is only available from the DevTools Console:
// https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#debugfunction
debug(context[key]);
}
}
И затем активируйте модификацию.
Если это происходит при загрузке страницы, просто добавьте точку останова где-нибудь в сценарии, который выполняется до изменения холста, запустите приведенный выше код в консоли во время паузы, а затем возобновите выполнение сценария.
Вы можете опробовать рабочий процесс в этой демонстрации: https://51789703.glitch.me/
Я нашел обходной путь: переопределите функцию из CanvasRenderingContext2D и добавьте «отладчик»; строка там, чтобы останавливаться каждый раз, когда вызывается (или добавьте дополнительное условие для остановки)
Есть поиск в инструментах chrome dev, это то, что вам нужно?