Can't open Inspector because of Chrome's "[Violation] Added non-passive event listener ..."

Questions
1

I have a big project. When I try to open Inspector I get:

[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See Chrome Platform Status

My showing Inspector code:

const { Inspector } = await import( "@babylonjs/inspector" );

Inspector.Show( scene, {
	embedMode: true,
	overlay: true,
	enablePopup: true,
	enableClose: true,
	showExplorer: true,
	handleResize: true,
} );

How to deal with this error? What should I check?

2

I think I’ve seen this flag

not sure the cause or consequences tho

3

Everywhere when I saw addEventListener calls I added as the third argument: { passive: true } but it didn’t help.

The violation points me to some code in a module: node_modules/split.js/dist/split.es.js, actually I don’t know what the module is it :slight_smile:

5

split.js is a library for creating splittable/draggable view containers on an HTML page.
The Inspector uses an older version which doesn’t mark the event as passive. This shouldn’t prevent opening the Inspector though.

If you want to get rid of the warning add the following to your package.json:

  "overrides": {
    "split.js": "^1.6.0"
  }

This version uses passive events wherever possible.

You can use this setup which handles tree-shaking as well:

hook-inspector.ts:

import { Scene } from "@babylonjs/core/scene";
import { signalIsInspectorOpen } from "@state/state";
import { signalIsDebugOpen } from "@state/state-ui";

export async function hookInspector(scene: Scene) {
  const { toggleInspector } = await import("./inspector");

  window.addEventListener("keyup", (event) => {
    // Handle Alt+I to toggle inspector
    if (event.code === "KeyI" && event.altKey === true) {
      signalIsInspectorOpen.value = !signalIsInspectorOpen.peek();
      return;
    }

    // Handle Alt+D to toggle debug view
    if (event.code === "KeyD" && event.altKey === true) {
      signalIsDebugOpen.value = !signalIsDebugOpen.peek();
      return;
    }
  });

  signalIsInspectorOpen.subscribe((open) => {
    toggleInspector(scene, open);
  });
}

inspector.ts:

import { Scene } from "@babylonjs/core/scene";
import { Nullable } from "@babylonjs/core/types";
import { AxesViewer } from "@babylonjs/core/Debug/axesViewer";
import { Inspector } from "@babylonjs/inspector";

let axesViewer: Nullable<AxesViewer> = null;

async function toggleInspector(scene: Scene, open: boolean) {
  open ? enableInspector(scene) : disableInspector();
}

function enableInspector(scene: Scene) {
  enableAxis();

  Inspector.Show(scene, {
    embedMode: true,
    globalRoot: document.getElementById("inspector") ?? undefined,
    skipDefaultFontLoading: true,
  });
}

function disableInspector() {
  disableAxis();
  Inspector.Hide();
}

function enableAxis(scene: Scene) {
  if (!axesViewer) {
    axesViewer = new AxesViewer(scene, 5);
  }

  axesViewer.xAxis.setEnabled(true);
  axesViewer.yAxis.setEnabled(true);
  axesViewer.zAxis.setEnabled(true);
}

function disableAxis() {
  if (!axesViewer) {
    return;
  }

  axesViewer.xAxis.setEnabled(false);
  axesViewer.yAxis.setEnabled(false);
  axesViewer.zAxis.setEnabled(false);
}

export { enableAxis, disableAxis, toggleInspector };

I use the Inspector only when in dev:

if (Profile.dev) {
   (await import("../common/inspector-hook")).hookInspector(this.scene);
}

Omit the signal stuff ofcourse.

6

Our split.js dependency should be bigger than 1.6.5 so already using the fixed one @roland

image
image442×128 10.9 KB

@Lemcat What version of Babylon/Inspector are you currently using ?

cc @georgie

2 Likes