How to attach node-inspector to page loaded in iframe or object?

First must say, great job!

I am trying to inspect page loaded to my Angular component in iframe or , but I can't get that done. I have tried to set root to #pageFrame but still it inspects whole component.

Any ideas how do I do this?

If main page and iframe not same origin, unable to inspect node in iframe. You can insert script in iframe. Or provide pseudocode.

…

在 2019年2月15日，21:29，Ratko ***@***.***> 写道： First must say, great job! I am trying to inspect page loaded to my Angular component in iframe or , but I can't get that done. I have tried to set root to #pageFrame but still it inspects whole component. Any ideas how do I do this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

How do I do that. I just need to load another page and inspect it. Can you show an example please/

For example, your main page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <iframe id="iframe" src="https://www.google.com/" frameborder="0"></iframe>
    <script type="text/javascript" src="dom-inspector.js"></script>
    <script>
        const inspector = new DomInspector({
            root: '#iframe'
        });
        inspector.enable();
    </script>
</body>

</html>

You only can inspect iframe tag, can't inspect any element in google page.

If want inspect element in iframe page, you should add script in iframe.

Or ensure your main page and iframe page in same origin, look here about CORS. Then you can do like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <iframe id="iframe" src="[your iframe page url]"></iframe>
    <script type="text/javascript" src="dom-inspector.js"></script>
    <script>
        document.getElementById("iframe").onload = () => {
            const inspector = new DomInspector({
                // get iframe element by `contentWindow`
                root: document.getElementById("iframe").contentWindow.document.querySelector('h1')
            });

            inspector.enable();
        }
    </script>
</body>

</html>

ping?

Hi, @luoye-fe!

My iframe page is shifted relative to the left edge of main page.

Tell me, please, how can I fix such a problem?

Maybe, after the page loaded, you changed the browser size?

If so, you can listen the change event, and renew the dom-inspector instance.

Please look at this example: https://codepen.io/fedormelexin/project/full/ZeWdPj

I am resolved my problem by a workaround.

Workaround

Patched this line (for my use case when inspect the iframe body)

dom-inspector/src/index.js

Line 121 in b1e9559

$('body').appendChild(parent);

to

this.root.appendChild(parent);

Usage

// Load style.css as string over raw-loader
import dom_inspector_style from '!raw-loader!dom-inspector/src/style.css';

// Injection the DomInspector style into the iframe
var style = document.createElement('style');
style.textContent = dom_inspector_style;
document.getElementById("iframe").contentDocument.head.appendChild(style);

// Connect the DomInspector to the iframe
const inspector = new DomInspector({
  root: document.getElementById("iframe").contentDocument.body,
});
inspector.enable();

👍

dom-inspector@1.2.3-beta.0

Follow your workaround, latest beta version has been released.

Try version dom-inspector@1.2.3-beta.0, if there is no problem, give me a reply, i will release official version.

THX :)

Thanks it works!

But only with css injection, as expected.

And I got another problem inside the iframe.
The getMaxZIndex function uses document.all for the main page, not for current this.root + document.all

dom-inspector/src/dom.js

Line 82 in b1e9559

export function getMaxZIndex() {

This kind of scene, if dom-inspector gets maxZIndex value, cant cover all usage, maybe you need a new instance option?

Just like：

const instance = DomInspector({
  root: 'body',
  maxZIndex: 99,
})

It would be great!

And good to add a bit of backward compatibility so that the value is optional.
(pseudo code)

Math.max(maxZIndex, getMaxZIndex())

or rename maxZIndex to minZIndex within the meaning of Math.max

Math.max(minZIndex, getMaxZIndex())

If maxZIndex option has been specified, instance should not modify it, otherwise, the user must understand the internal logic.

Let me add the option, then you try it.

@melehin dom-inspector@1.2.3-beta.1

Thanks!

OK, I release the official version.