title: DevTools was disconnected from the page (Error: STATUS_BREAKPOINT)
body: <p><strong>About issue</strong></p>
  <ul>
  <li>The issue stops the app execution at different random moments based on the size of 2D Scene.</li>
  <li>The issue stops the DevTools and the page turns white.</li>
  <li>The issue doesn't appear as an Error or Warning in the DevTools console.</li>
  <li>The issue appears only in the Chrome and Edge browsers.</li>
  <li>The issue didn’t appear in the Chrome and Edge browsers during the first 4 days of testing.</li>
  </ul>
  <p><strong>About app</strong></p>
  <p>I made a JS6 app to test some 2D graphics using canvas. Just pure HTML, CSS and JavaScript only. The app is supposed to draw a scene and different geometric primitives after collision detections (using AABB algorithm), path finding, impact physics and some AI. I used the method requestAnimationFrame(render) to emulate animation rendering. All the code is built based on the OOP principles described in ECMAScript 6. The core and very simplified sample of code:</p>
  <pre><code>class Scene{
  #vMap = [];
  
  constructor(board){
          this.canvas = document.getElementById(board);
          this.ctx = this.canvas.getContext('2d');
          this.#createMap();
          this.#createModels();
  
          //etc.
  }
  
  #createMap(){//to do}
  
  #createModels(){//to do}
  
  render(){
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  
          this.#vMap.forEach(obj =&gt;{
              obj.draw();
             
              if(obj.checkCollision(this.ball)){
                  this.ball.updateSpeedVector(obj);
              }
          });
         
          this.ball.draw();
         
          window.requestAnimationFrame(this.render.bind(this));
  }
  //…
  
  const board = new Scene(&quot;board&quot;).render();
  </code></pre>
  <p>I performed many tests by enabling and disabling different options, methods, functions in the app. Therefore, I noticed that any draw() methods (aka canvas methods) don’t cause the issue. The issue appears only if I enable collision detection (mainly), physics or AI. I’m using points, vectors and other math functions for respective middleware detections. The browser’s debuggers and performance monitors didn’t show any memory leaks or other abnormal behavior in the respective methods.</p>
  <p>I analyzed the respective code frame by frame, pixel by pixel and step by step. During the debug time the browser just suddenly stops the DevTools with the message “DevTools was disconnected from the page” and the browser tab turns white with the message “Error: STATUS_BREAKPOINT”.</p>
  <p><a href="https://i.stack.imgur.com/4Q6Rz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Q6Rz.jpg" alt="enter image description here" /></a></p>
  <p>The most uncommon and strange thing is that this issue appears at different random moments (after 5 sec, after 25 sec) based on the Scene size, the number of objects. Also, there’s no any error or warning notifications in the DevTools console. And the most crazy thing about this issue is that it worked just fine during the first 4 days of development and testing, considering I didn’t make any OS or browser updates before this. Here’s a screenshot from my app performance just before the crash:</p>
  <p><a href="https://i.stack.imgur.com/tD0u6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tD0u6.jpg" alt="enter image description here" /></a></p>
  <p>As you can notice, the app works like a clock. Call Tree for the checkCollision method shows  0.4ms execution time. There’s no memory leaks and GC works just fine:</p>
  <p><a href="https://i.stack.imgur.com/uO1CA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uO1CA.jpg" alt="enter image description here" /></a></p>
  <p><strong>About environment</strong></p>
  <ul>
  <li>Platform x64;</li>
  <li>OS Win10 v.18363;</li>
  <li>CPU AMD x64;</li>
  <li>Chrome 97.0.4692.71 and Edge 97.0.1072.55.</li>
  </ul>
  <p><strong>Similar issues</strong></p>
  <p><em>DevTools:</em></p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/55032227/tips-on-solving-devtools-was-disconnected-from-the-page-and-electron-helper-di">Tips on solving &#39;DevTools was disconnected from the page&#39; and Electron Helper dies</a></li>
  <li><a href="https://groups.google.com/a/chromium.org/g/chromium-discuss/c/SBxe5gMOzS0" rel="nofollow noreferrer">https://groups.google.com/a/chromium.org/g/chromium-discuss/c/SBxe5gMOzS0</a></li>
  <li><a href="https://www.adoclib.com/blog/devtools-was-disconnected-from-the-page-when-creating-and-retrieve-node-with-text-content.html" rel="nofollow noreferrer">https://www.adoclib.com/blog/devtools-was-disconnected-from-the-page-when-creating-and-retrieve-node-with-text-content.html</a></li>
  <li><a href="https://github.com/electron/electron/issues/21834" rel="nofollow noreferrer">https://github.com/electron/electron/issues/21834</a></li>
  </ul>
  <p><em>STATUS_BREAKPOINT:</em></p>
  <ul>
  <li><a href="https://browserhow.com/how-to-fix-the-error-status_breakpoint-on-chrome-or-edge/" rel="nofollow noreferrer">https://browserhow.com/how-to-fix-the-error-status_breakpoint-on-chrome-or-edge/</a></li>
  <li><a href="https://www.technipages.com/fixing-google-chrome-error-code-status_breakpoint" rel="nofollow noreferrer">https://www.technipages.com/fixing-google-chrome-error-code-status_breakpoint</a></li>
  <li><a href="https://answers.microsoft.com/en-us/microsoftedge/forum/all/error-statusbreakpoint-in-any-browser-i-use/957692c0-3428-4fb5-9499-dbf8f1779b6f" rel="nofollow noreferrer">https://answers.microsoft.com/en-us/microsoftedge/forum/all/error-statusbreakpoint-in-any-browser-i-use/957692c0-3428-4fb5-9499-dbf8f1779b6f</a></li>
  <li><a href="https://support.google.com/chrome/thread/121850451/error-status-breakpoint-everytime-i-open-paypal-com?hl=en" rel="nofollow noreferrer">https://support.google.com/chrome/thread/121850451/error-status-breakpoint-everytime-i-open-paypal-com?hl=en</a></li>
  </ul>
  <p><strong>My assumptions</strong></p>
  <p>I’d like to find a solution or at least an explanation of what’s going on. It seems that this issue is very common based on the links above. In my opinion, it’s a serious bug or even a vulnerability in the respective browser's runtime, GPU or JIT-Compiler code. Something that even a DevTool can’t detect or handle. I found that this issue seems to appear more frequently on Win10 OS under AMD CPU. Also the issue is caused by an internal infinite loop which runtime can't handle, as somebody wrote. Looks like both Chrome and Edge are using similar/same core runtime.</p>