DevTools 已与页面断开连接（错误：STATUS_BREAKPOINT）

Question

关于问题

\n

\n
• 该问题会根据 2D 场景的大小在不同的随机时刻停止应用程序执行。
\n
• 该问题停止了开发工具并且页面变成白色。
\n
• 该问题不会在 DevTools 控制台中显示为错误或警告。
\n
• 该问题仅出现在 Chrome 和 Edge 浏览器中。
\n
• 在测试的前 4 天中，Chrome 和 Edge 浏览器中\xe2\x80\x99 并未出现该问题。
\n

\n

关于应用程序

\n

我制作了一个 JS6 应用程序来使用画布测试一些 2D 图形。只是纯 HTML、CSS 和 JavaScript。该应用程序应该在碰撞检测（使用 AABB 算法）、路径查找、碰撞物理和一些人工智能之后绘制场景和不同的几何图元。我使用 requestAnimationFrame(render) 方法来模拟动画渲染。所有代码都是基于 ECMAScript 6 中描述的 OOP 原则构建的。核心且非常简化的代码示例：

\n

class Scene{\n#vMap = [];\n\nconstructor(board){\n        this.canvas = document.getElementById(board);\n        this.ctx = this.canvas.getContext(\'2d\');\n        this.#createMap();\n        this.#createModels();\n\n        //etc.\n}\n\n#createMap(){//to do}\n\n#createModels(){//to do}\n\nrender(){\n        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\n        this.#vMap.forEach(obj =>{\n            obj.draw();\n           \n            if(obj.checkCollision(this.ball)){\n                this.ball.updateSpeedVector(obj);\n            }\n        });\n       \n        this.ball.draw();\n       \n        window.requestAnimationFrame(this.render.bind(this));\n}\n//\xe2\x80\xa6\n\nconst board = new Scene("board").render();\n

\n

我通过启用和禁用应用程序中的不同选项、方法、功能来执行许多测试。因此，我注意到任何 draw() 方法（又名画布方法）都不会导致此问题。仅当我启用碰撞检测（主要）、物理或人工智能时，才会出现此问题。I\xe2\x80\x99m 使用点、向量和其他数学函数进行相应的中间件检测。浏览器\xe2\x80\x99s 调试器和性能监视器未\xe2\x80\x99 在各自的方法中显示任何内存泄漏或其他异常行为。

\n

我逐帧、逐像素、一步一步地分析了各自的代码。在调试期间，浏览器突然停止 DevTools，并显示消息 \xe2\x80\x9cDevTools 与页面\xe2\x80\x9d 断开连接，并且浏览器选项卡变为白色，并显示消息 \xe2\x80\x9cError: STATUS_BREAKPOINT\xe2 \x80\x9d。

\n

\n

最不常见和奇怪的是，这个问题会根据场景大小、对象数量在不同的随机时刻（5 秒后、25 秒后）出现。此外，DevTools 控制台中没有任何错误或警告通知。关于这个问题最疯狂的事情是，考虑到我在此之前没有进行任何操作系统或浏览器更新，在开发和测试的前 4 天中它运行得很好。这里\xe2\x80\x99是崩溃前我的应用程序性能的屏幕截图：

\n

\n

正如您所注意到的，该应用程序的工作原理就像一个时钟。checkCollision 方法的调用树显示执行时间为 0.4 毫秒。\xe2\x80\x99s 没有内存泄漏，GC 工作得很好：

\n

\n

关于环境

\n

\n
• 平台 x64；
\n
• 操作系统 Win10 v.18363；
\n
• CPU AMD x64；
\n
• Chrome 97.0.4692.71 和 Edge 97.0.1072.55。
\n

\n

类似问题

\n

开发工具：

\n

\n
• 解决“DevTools 与页面断开连接”和 Electron Helper 死机的提示
\n
• https://groups.google.com/a/chromium.org/g/chromium-discuss/c/SBxe5gMOzS0
\n
• https://github.com/electron/electron/issues/21834
\n

\n

状态断点：

\n

\n
• https://browserhow.com/how-to-fix-the-error-status_breakpoint-on-chrome-or-edge/
\n
• https://www.technipages.com/fixing-google-chrome-error-code-status_breakpoint
\n
• https://answers.microsoft.com/en-us/microsoftedge/forum/all/error-statusbreakpoint-in-any-browser-i-use/957692c0-3428-4fb5-9499-dbf8f1779b6f
\n
• https://support.google.com/chrome/thread/121850451/error-status-breakpoint-everytime-i-open-paypal-com?hl=en
\n

\n

我的假设

\n

我\xe2\x80\x99d想找到一个解决方案，或者至少解释\xe2\x80\x99s正在发生的事情。根据上面的链接，这个问题似乎很常见。在我看来，它\xe2\x80\x99是各个浏览器运行时、GPU或JIT编译器代码中的一个严重错误，甚至是一个漏洞。即使是 DevTool 也无法\xe2\x80\x99 检测或处理的东西。我发现这个问题似乎在AMD CPU下的Win10操作系统上更频繁地出现。正如有人所写，该问题也是由运行时无法处理的内部无限循环引起的。看起来 Chrome 和 Edge 都使用相似/相同的核心运行时。

\n