# How to get Inspector running?

**URL:** <https://forum.babylonjs.com/t/how-to-get-inspector-running/39159>\
**Category:** Questions\
**Created:** [March 18, 2023, 2:28pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159 "2023-03-18T14:28:47Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imperator](https://forum.babylonjs.com/u/imperator)\
**Post date:** [March 18, 2023, 2:28pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/1 "2023-03-18T14:28:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [March 18, 2023, 3:10pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/2 "2023-03-18T15:10:36Z")

</div>

Do you import the Inspector before calling it?

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

```

Or you may use dynamic import like

```auto
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,
            });
        });

```

---

<div class="post-metadata">

**Author:** ![imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imperator](https://forum.babylonjs.com/u/imperator)\
**Post date:** [March 18, 2023, 3:59pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/3 "2023-03-18T15:59:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [March 18, 2023, 4:26pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/4 "2023-03-18T16:26:02Z")

</div>

You need to call the Inspector script separately.

The latest version

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

```

or ‘stable’ version

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

```

---

<div class="post-metadata">

**Author:** ![imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imperator](https://forum.babylonjs.com/u/imperator)\
**Post date:** [March 18, 2023, 4:35pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/5 "2023-03-18T16:35:20Z")

</div>

ok I tried this but I am getting the same error

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [March 18, 2023, 5:29pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/6 "2023-03-18T17:29:01Z")

</div>

I attached the sample index.html with Inspector.  
Let me know if this file works for you.  
[index.zip](https://forum.babylonjs.com/uploads/short-url/uMdrGwiCsA4mo1i6goBAQ1aKMsR.zip) (1.5 KB)

---

<div class="post-metadata">

**Author:** ![imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imperator](https://forum.babylonjs.com/u/imperator)\
**Post date:** [March 18, 2023, 8:31pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/7 "2023-03-18T20:31:00Z")

</div>

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:

```auto
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:

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

```

and here I use it in my index.html

```auto
    <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.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 20, 2023, 3:33pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/8 "2023-03-20T15:33:57Z")

</div>

A repro would really help here ? cc @RaananW

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [March 20, 2023, 3:37pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/9 "2023-03-20T15:37:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![imperator](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imperator](https://forum.babylonjs.com/u/imperator)\
**Post date:** [March 20, 2023, 4:23pm UTC](https://forum.babylonjs.com/t/how-to-get-inspector-running/39159/10 "2023-03-20T16:23:45Z")

</div>

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