@private
()
| 269 | |
| 270 | /** @private */ |
| 271 | _updatePanel() { |
| 272 | this.stats.objects.textContent = game.world.children.length; |
| 273 | this.stats.draws.textContent = this.counters.get("draws"); |
| 274 | this.stats.update.textContent = `${this.frameUpdateTime.toFixed(2)}ms`; |
| 275 | this.stats.draw.textContent = `${this.frameDrawTime.toFixed(2)}ms`; |
| 276 | this.stats.fps.textContent = `${timer.fps}/${timer.maxfps} fps`; |
| 277 | this.stats.shapes.textContent = this.counters.get("shapes"); |
| 278 | this.stats.sprites.textContent = this.counters.get("sprites"); |
| 279 | this.stats.velocity_count.textContent = this.counters.get("velocity"); |
| 280 | this.stats.bounds.textContent = this.counters.get("bounds"); |
| 281 | this.stats.children.textContent = this.counters.get("children"); |
| 282 | this.stats.pool.textContent = pool.getInstanceCount(); |
| 283 | |
| 284 | if (window.performance?.memory) { |
| 285 | // Keep the `.toFixed(1)` string as-is — wrapping in `Number(...)` |
| 286 | // strips trailing zeros so 40.0 MB would render as "40/90.1MB" |
| 287 | // while 39.7 MB rendered as "39.7/90.1MB", producing the |
| 288 | // inconsistent decimal width that made the panel jitter. |
| 289 | const used = (window.performance.memory.usedJSHeapSize / 1048576).toFixed( |
| 290 | 1, |
| 291 | ); |
| 292 | const total = ( |
| 293 | window.performance.memory.totalJSHeapSize / 1048576 |
| 294 | ).toFixed(1); |
| 295 | this.stats.heap.textContent = `${used}/${total}MB`; |
| 296 | } else { |
| 297 | this.stats.heap.textContent = "n/a"; |
| 298 | } |
| 299 | |
| 300 | // record frame times and memory |
| 301 | this.updateHistory[this.historyIndex] = this.frameUpdateTime; |
| 302 | this.drawHistory[this.historyIndex] = this.frameDrawTime; |
| 303 | if (window.performance?.memory) { |
| 304 | this.memHistory[this.historyIndex] = |
| 305 | window.performance.memory.usedJSHeapSize / 1048576; |
| 306 | } |
| 307 | this.historyIndex = (this.historyIndex + 1) % GRAPH_SAMPLES; |
| 308 | |
| 309 | drawFrameGraph( |
| 310 | this.graphCanvas, |
| 311 | this.updateHistory, |
| 312 | this.drawHistory, |
| 313 | this.historyIndex, |
| 314 | this.stats.peak, |
| 315 | ); |
| 316 | if (this.memCanvas) { |
| 317 | drawMemGraph( |
| 318 | this.memCanvas, |
| 319 | this.memHistory, |
| 320 | this.historyIndex, |
| 321 | this.stats.memPeak, |
| 322 | ); |
| 323 | } |
| 324 | } |
| 325 | |
| 326 | /** |
| 327 | * show the debug panel |
no test coverage detected