Within Previz we use a custom fragment and vertex shader to handle multiple UV mapping support.

These shaders run in a language called GLSL, which is similar to C/C++, and runs directly on the GPU, and run very close to the metal of the machine with have very limited outputs - they effectively control what the GPU is drawing to the individual pixels and nothing else. Because of that - debugging them is pretty hard. console.log is just a fever dream in this context.

In looking for ways to debug, I ran into an amazing workaround option - instead of trying to output debugging context back to the original context (ie. a browser console or debug hook) overlay debug info on top of the rendered stream.

It uses 2 parts - first a new texture available on the vertex shader which is a character set texture, and secondly a debug function that offsets that texture and draws a debug output onto the output.

Shader Glyfs image

Shader Debug Output

All credit goes go Spektre on this Stack Overflow thread.