chrome: konva tab missing

[HansKrywalsky]

Describe the bug
A clear and concise description of what the bug is.

I'm currently trying to make this inspector work in chrome. I installed the extension, relaunched chrome and start my konva app.

When i press on the extension it says that konva is detected:

But there is no konva tab in my dev tools:

Am i missing something?

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[maitrungduc1410]

you should try close the browser dev tool and reopen again.

if it still doesn't work, please provide a working example using Codesandbox or similar platforms.

Quick links to test konva-inspector:

• https://24pz1kkon0.csb.app/
• https://w0oz80qqw8.csb.app/
• https://mjw1ywlmpy.csb.app/

[HansKrywalsky]

Hey @maitrungduc1410 - I'm using Konva 9.3.0

All the links you provided work for me. Re-openeing the dev tools does not in my application.

Is the problem maybe that the konva is not on the first screen? You have to navigate into the page where it appears first

[maitrungduc1410]

there's an interval runs every 1 second:

const detectFromDevtoolInterval = setInterval(detectFromDevtool, 1000);

it'll check if Konva is detected on current browser window and show Konva tab in your browser devtool.

what I recommend is: when you know Konva is actually on a page, then open (or reopen) the browser devtool (I do this for other extensions also: React, Vue,...)

In your case: konva is not in first screen, then in second screen where you know it actually is -> open browser devtool

[HansKrywalsky]

Doesn't work for me 😕

[maitrungduc1410]

In your case , is it like:

• first page: no konva
• redirect to page 2: have konva

And it's SPA right? React?

[HansKrywalsky]

Specificly it is an Ionic + Angular application.

I open a modal which is a to the dom attached element. Inside this element i navigate to another internal page, there is the konva

[maitrungduc1410]

Is it in iframe?

[HansKrywalsky]

No

[maitrungduc1410]

Oh, it's webcomponent right?

In this case it has its own DOM (shadowDOM) it's very hard (but possible) for my dev tool to know if Konva is presented inside your component (since you can create any web component, div/span/.... also web component)

[HansKrywalsky]

The Ionic components use shadow dom, yes but my component should be in the light dom anyways 🤔

I will try to prepare a small reproducion in the next days when i found the time, when this is okay for you. Then we can check if the shadow dom is the problem

[maitrungduc1410]

Yeah, it'll be much easier for me to debug if you can provide reproducible example :)

[EinfachHans]

Hey @maitrungduc1410 - just switched to my main account^^

i created a reproducible repo here: https://github.com/EinfachHans/ionic-konva-inspector-bug

You can start it with npm run start, i added two konva's: one in the home page, which is the first page you are automatically routed to and one inside the modal you can open from there. For me: Both are not detected from the inspector. Tested in google chrome

[maitrungduc1410]

I'll check and get back to you

[maitrungduc1410]

Hi @EinfachHans, I checked your example

In both cases Konva stage is rendered inside ShadowDOM:

[maitrungduc1410]

I tried with no ShadowDOM, and still doesn't work:

I figured out that, in your global Konva object, it's very limited, has just few props, and one thing important is it doesn't have stages property. That why my dev tool can't figure out, as described here

[maitrungduc1410]

Found it,

You need to use this way:

import Konva from 'konva'

new Konva.Stage(...)
new Konva.Layer(...)

This usage also same as in Konva official docs.

it works now:

[maitrungduc1410]

1 thing I need to correct after review my code, my dev tools works regardless of whether it's ShadowDOM or not, it works universally.

My explanation yesterday was incorrect :)

[maitrungduc1410]

In case you don't want to change the import styles then you can do this:

import { stages } from 'konva/lib/Stage';
import { Util } from 'konva/lib/Util';

// do this once before you initialize your Stage, from anywhere in your app
(window as any).Konva.stages = stages;
(window as any).Konva.Util = Util;

Then you can keep your code as it is, no change:

import { Stage } from 'konva/lib/Stage';
import { Layer } from 'konva/lib/Layer';
import { Circle } from 'konva/lib/shapes/Circle';

const stage = new Stage({
  container: 'container-home',
  width: 300,
  height: 300,
});

const layer = new Layer();
stage.add(layer);

const circle = new Circle({
  x: 150,
  y: 150,
  width: 300,
  height: 300,
  fill: 'blue',
});

[EinfachHans]

Thank you for your dive-in, i made it work with this! Thanks a lot, you made an awesome tool! 😊