4

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 was removed.

Is there a way to search/find the JS code responsible of modifying some specifig canvas element? in that way at least we could add breakpoints to the JS

Enrique
  • 4,693
  • 5
  • 51
  • 71
  • There is a search in the chrome dev tools, is that what you need? – Helder Sepulveda Aug 10 '18 at 17:16
  • 1
    @HelderSepu yes but is really hard to find the method if there are multiple and big JS files (and minified!). I was hoping something like the Event Listener Breakpoint, to detect automatically the JS line when the canvas is modified – Enrique Aug 10 '18 at 19:51

2 Answers2

2

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/

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
0

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)

Enrique
  • 4,693
  • 5
  • 51
  • 71