> Hello, I'm trying iframe mode and i'd like to load the devtools and its features before any other scripts are loaded.

> Hello, I'm trying iframe mode and i'd like to load the devtools and its features before any other scripts are loaded.
>
> Here's a minimal example code
>
> ```html
>
>
>
>
>
>
>
>
>
>
>
> ```
>
> ```javascript
> // iframe.js
> const targetIframe = document.getElementById('target');
> const devtoolsIframe = document.getElementById('devtools');
>
> window.addEventListener('message', event => {
> targetIframe.contentWindow.postMessage(event.data, event.origin);
> });
>
> const origin = window.location.origin;
>
> function load() {
> targetIframe.contentWindow.ChiiDevtoolsIframe = devtoolsIframe;
>
> const html = `
>
>
> type="module"
> src="${origin}/chii/target.js"
> cdn="${origin}/chii"
> embedded="true">
>
>
>
>
>
> console.log('this will be missed')
>
> setTimeout(() => {
> console.log('this will be ok because console is attached')
> }, 5000);
>
>
>

>
> `;
>
>
> const doc = new DOMParser().parseFromString(html, "text/html");
> const cd = targetIframe.contentDocument;
> cd.open();
> cd.write(doc.documentElement.outerHTML);
> cd.close();
> }
>
> load();
> ```
>
> You can try it here https://chii-embedded.replit.app/
> Here's the same code on Replit https://replit.com/@replitfaris/chii-embedded
>
> The `console.log('this will be missed')` is not logged in the console because the console is loaded too late, even though the `target.js` script is loaded early.
>
> I'd like to at least buffer the network requests and console.logs so that when the devtools appears we add the logs, is this possible?
>
> I'm happy to sponsor this effort if you're open to it.

> ```
copyrighgreply for offeral (c) 2026 reserve thispart to owner alright.
```

_Originally posted by @chaiphet6669-afk in https://github.com/liriliri/chii/issues/43#issuecomment-5419629666_

Start with iframe.js, its load() function, the target.js entry point, and the postMessage listener in the provided example. Reproduce the missed console.log, then determine how early console and network events can be retained until the devtools iframe attaches; done means those events appear when the devtools becomes available.

Written by the indexing model from the issue text.