Debug JS Modifying Some Specific Canvas Element

I'm trying to debug a canvas element with Chrome Developer Tools. From this: How to inspect Canvas Frames I can see there was an experimental feature to do something like that but

Solution 1:

The Event Listener Breakpoints section lets you pause when a canvas context is created. But I don't see any breakpoint for pausing when a canvas was modified.

If the canvas is modified after the page load, you can run something like this in the Console:

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]);     
  }
}

And then trigger the modification.

If it happens on page load, just add a breakpoint somewhere in a script that runs before the canvas modification, run the code above in the Console while paused, and then resume script execution.

You can try out the workflow in this demo: https://51789703.glitch.me/

Solution 2:

I've found a workaround: override the function from CanvasRenderingContext2D and add a "debugger;" line there to stop every time is called (or add some extra condition to stop)