How to console.log in webgl shaders?

Question

I'm trying to understand how to simulate console.log in webgl shaders which are written in GLSL. It's easy to get error messages but I can't get how to print custom messages.

Basically I want to print stuff in the browser's console:

<script id="shader-fs1" type="x-shader/x-fragment">
  void main(void) 
  { 
    //console.log doesn't work here since it's GLSL not javascript
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 
  } 
</script>

Any suggestions?

Answer 1

After compiling shader you can do something like:

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(shader));
}

And it will show you any error messages during compiling. GLSL cannot send data back to program in any other form but framebuffer/texture, so you can only check what's happening by inspecting output colors. WebGL inspector might me useful, as pointed by Michael, but not that much for shaders, but for general debugging of webGL apps