How to get Inspector running?

Questions
1

this is what I get by using
scene.debugLayer.show()

inspector.ts:488 Uncaught TypeError: Cannot read properties of null (reading ‘ownerDocument’)
at gc._CreateCanvasContainer (inspector.ts:488:50)
at gc.Show (inspector.ts:456:22)
at e._createInspector (debugLayer.ts:292:37)
at debugLayer.ts:366:26
at o.onload (tools.ts:456:17)

My scene is loading correct. I tried before and after loading scene.
What I am doing wrong here?

Thank you!

2

Do you import the Inspector before calling it?

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

Or you may use dynamic import like

void Promise.all([
            import("@babylonjs/core/Debug/debugLayer"),
            import("@babylonjs/inspector"),
        ]).then((_values) => {
            console.log(_values);
            scene.debugLayer.show({
                handleResize: true,
                overlay: true,
                globalRoot: document.getElementById("#root") || undefined,
            });
        });
1 Like
3

not via import. I thought it would be in main babylon.js which I am loading outside my app in index.html:

4

You need to call the Inspector script separately.

The latest version

<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

or ‘stable’ version

<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
5

ok I tried this but I am getting the same error

6

I attached the sample index.html with Inspector.
Let me know if this file works for you.
index.zip (1.5 KB)

7

thank you.
Your code works. But that does not help me here. I have a full working little project (sorry no playground - it is local only). I am still getting same error there. I copied all the Babylon script tags from your index as well.
I also do not have not much HTML code around.
Here is my init code:

function initCanvas(canvas) {
        engine = new BABYLON.Engine(canvas, true, {
            preserveDrawingBuffer: true,
            stencil: true,
        })
        engine.enableOfflineSupport = false
        engine.resize()
        // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
        BABYLON.Animation.AllowMatricesInterpolation = true

        scene = new BABYLON.Scene(engine)

        clearColorDefault=scene.clearColor
        // var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3(0, 1, 0), scene);
        let camera = new BABYLON.ArcRotateCamera("camera1",Math.PI / 2,Math.PI / 2, 3,new BABYLON.Vector3(0, 1, 0),scene)
        camera.attachControl(canvas, true)
        camera.lowerRadiusLimit = 1.2
        camera.upperRadiusLimit = 8
        camera.wheelDeltaPercentage = 0.01
        camera.onViewMatrixChangedObservable.add(() => {
                dispatchChange({type:"camera",position:camera.position,rotation:camera.rotation})
        })
        let light = new BABYLON.HemisphericLight("light1",new BABYLON.Vector3(0, 1, 0),scene)
        light.intensity = 0.6
        light.specular = BABYLON.Color3.Black()

        let light2 = new BABYLON.DirectionalLight( "dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene)
        light2.position = new BABYLON.Vector3(0, 5, 5)

        // Shadows
        let shadowGenerator = new BABYLON.ShadowGenerator(1024, light2)
        shadowGenerator.useBlurExponentialShadowMap = true
        shadowGenerator.blurKernel = 32

        var groundMaterial = new BABYLON.GridMaterial("groundMaterial", scene);
        groundMaterial.majorUnitFrequency = 1;
        groundMaterial.minorUnitVisibility = 0.1;
        groundMaterial.gridRatio = 1;
        groundMaterial.backFaceCulling = false;
        groundMaterial.mainColor = new BABYLON.Color3(0, 0, 0);
        groundMaterial.lineColor = new BABYLON.Color3(0,0, 0);
        groundMaterial.opacity = 0.2;
        
        var ground = BABYLON.Mesh.CreateGround("ground1", 20, 20, 2, scene)
        ground.material = groundMaterial
        scene.debugLayer.show()      // produces error
        startRenderLoop(engine, canvas)

    }

some vars like scene are defined outside that function. It is a Svelte project.
My Svelte template is just one line:

    <canvas id="renderCanvas" {width} {height} bind:this={canvas} class="canvas"/>

and here I use it in my index.html

    <fds-3d-scene  camera_behaviour="" width="1000" height="1000" style="width:1000px;height:1000px;display:block" id="sceneEditor"></fds-3d-scene>

fds-3d-scene is my custom element tag here.

8

A repro would really help here ? cc @RaananW

1 Like
9

A repo will be very helpful for sure. It feels like you are using UMD in Svelte? I would recommend using our es6 packages instead, including the inspector package

1 Like
10

I will switch over to ES6 and make an open repo with only that problem. I will take a few days. Thanks for feedback.

1 Like