老鼠！ WebGL 遇到了麻烦——如何调试？

Question

调用 canvas.getContext("webgl"); 会让 Chrome 触发“Rats！WebGL 遇到障碍”消息，但不提供任何信息。我该如何解决？

除了canvas.getContext("webgl") 返回null 之外，我没有得到任何其他信息，如果我自己不使用该设备，我什至不知道 Chrome 会失败并显示占据手机屏幕 25% 的消息，因为这会触发 no错误。

这是一个函数的一部分，它应该通过创建新画布并获取 webGL 上下文来测试是否支持 WebGL：

var webGLIsSupported = function() {
  if (typeof window.webGLIsSupported !== 'undefined') {return window.webGLIsSupported;}

  var canvas = $('<canvas></canvas>')[0];
  var ctx;
  try {
    ctx = canvas.getContext('webgl'); // <- this triggers the message, and fails
  }
  catch (e) {
    window.webGLIsSupported = false;
    return false;
  }
  window.webGLIsSupported = !!ctx;
  return window.webGLIsSupported;
};

我可以从哪里开始获取有关哪些内容不起作用的信息？没有任何日志真是令人沮丧。

将canvas.getContext('webgl') 更改为canvas.getContext('experimental-webgl') 没有任何区别。

我在三星 S6 上运行 Chrome 49.0.2623.105。

Answer 1

如您所见，检查null 是一种了解上下文创建是否成功的方法。但是当你只检查它时，没有关于“为什么”的信息。

实际上应该为此触发一个事件：webglcontextcreationerror

它确实包含一个statusMessage 属性，它应该为您提供有关“为什么”它未能创建上下文的更多信息。

来自 MDN：

canvas.addEventListener("webglcontextcreationerror", function(e) {
  console.log(e.statusMessage || "Unknown error"); 
}, false);

但是，我不知道您是否可以对收到的消息做任何事情...