镀铬帆布检查员 2015

Question

I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.

It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.

Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.

It... miraculously disappeared one day, and google does not give any insight.

I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?

Answer 1

Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension

We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.

According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.

Answer 2

Chrome and Firefox have both removed their Canvas inspectors...

Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated: https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/

You can enable it in the settings of the normal inspector

EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67 :
Mozilla deprecated listing
Bug report with reasoning

Alternative:
spector.js - Recommended alternative by Mozilla

Answer 3

Canvas inspection was just removed!

You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg . (Provided by freesmug )

Happy Canvas Inspection!

Answer 4

This is the best extension inspector I've seen so far.

https://spector.babylonjs.com

Answer 5

First go into

chrome://flags

Then enable

Developer Tools experiments

Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.