Chrome Dev Tools Scope

[stephancasas]

Hello,

Firstly, thank you for this amazing tool. CodeSwing is a part of my daily development workflow. I use it all the time — especially when building-up Tailwind components and fiddling with all of those utility classes.

At one point in time, it seemed like the Chrome DevTools integration was working really well, but it now seems that when I use them, the DevTools scope is set to top — giving me VSCode's Electron context instead of the CodeSwing preview window. If I adjust this, it retains for a moment, but then jumps back to the top context as soon as I save my swing to render the next preview.

Is there something I'm missing or perhaps a setting I need to adjust? As this is a tool I use daily, I'm more than happy to troubleshoot and open a pull request, but before I start investigating, I figured I should first see if there's an easy fix.

Thanks!

[lostintangent]

Hmm, that's a good question. I didn't make any changes that would have impacted this, but it's possible that the VS Code WebView changed? Let me take a quick look, and see if I can figure anything out. Stay tuned!

// CC @egamma in case he's aware of anything that might have changed here

[stephancasas]

Thanks! My own config/extension setup hasn't changed, but I'll check in the interim with a fresh VSCode install to see if perhaps there's a conflict with another extension that I'm not seeing.

[egamma]

//CCing @deepak1556 @connor4312 for electron and debug insights.

@stephancasas can you please provide steps for how to reproduce the issue for someone that isn't familiar with the CodeSwing extension.

[stephancasas]

@egamma, after installing the extension, run the CodeSwing: New Swing... activity from the command palette:

Then, choose one of the pre-defined templates. Here, I'm using the HTML/CSS/JS template:

Next, use either the toolbar shortcut or the command palette to show developer tools, and use the context selector to choose the CodeSwing document/iframe component:

---

That last step is where the trouble begins. Traditionally, the inspector would immediately focus on the CodeSwing doc, and remain focused. However, as the CodeSwing doc is saved/updated, focus is lost, and the context of the console/devtools returns to the top scope.

Indeed, if we add some console.log() statements to script.js, and save/execute (with the preserve log option enabled), we can observe that the log messages originate from a different context each time.

[connor4312]

This is assuredly due to the move to iframe based webviews. I don't see functionality in electron's public API to open the DevTools pre-scoped to an existing target.

Btw, the way we're assessing for the new Live Preview extension is using the Edge DevTools, which provide a remote browser preview in their VS Code extension. @codepo8 is the lead for that team. Maybe we can build infrastructure that's reusable for codeswing? (cc @andreamah -- do you know who will be taking over the Live Preview extension after your internship ends?)

[andreamah]

(cc @andreamah -- do you know who will be taking over the Live Preview extension after your internship ends?)

@connor4312 I believe that the vscode team as a whole will be maintaining the extension.

[codepo8]

I am talking to a few people and it seems the live extension will stay with VS Code, but we may take on others, like the old preview extension.

On Mon, Jul 26, 2021 at 5:59 PM Andrea Mah @.***> wrote:

(cc @andreamah https://github.com/andreamah -- do you know who will be taking over the Live Preview extension after your internship ends?)

@connor4312 https://github.com/connor4312 I believe that the vscode team as a whole will be maintaining the extension.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/lostintangent/codeswing/issues/50#issuecomment-886826774, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAADJRC5ESFS75VED6ZA4KDTZWA6TANCNFSM5A7J6VSA .

[deepak1556]

Yup the current apis from electron only target to the top-level document, however we maybe able to target a particular frame if electron connects to https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/render_frame_devtools_agent_host.h. Created https://github.com/microsoft/vscode/issues/129437 to check feasibility in debt week.

[mjbvz]

We changed the behavior of Developer: Open webview developer tools when we moved to use standard iframes to host the webview. The command is intended to be used by developers who are building webview extension and we believe that using a single unified developer tools makes sense for that use case: https://github.com/microsoft/vscode/issues/129437#issuecomment-897889739

It doesn't seem like we can easily go back to the old behavior. I think connecting the edge dev tools sounds like a better approach for this use case, as presumably you could also then hide all the webview implementation details from users so that they just see their code