How do Select preview iframe as current target document in vscode developer tools ? is it possible

[hachimetsu]

Hi everyone,

I frequently use Codespaces and the VSCode preview feature for my development work. I'm looking to debug an preview iframe, and I wanted to know if there is a way to select the iframe as a target document, similar to the feature available in Firefox.

Does VSCode preview have this capability? If not, are there any extensions or workarounds that could help me achieve this?

Any guidance or suggestions would be greatly appreciated!

Thank you!

Screencast.from.2024-08-15.09-49-52.webm

[theReynald]

Hi hachimetsu.

Visual Studio Code does not have built-in support for selecting an iframe as a target document for debugging purposes but according to copilot, you can use the Microsoft Edge Tools extension to achieve similar functionality. This extension allows you to inspect and debug iframes within your web applications.

Here are the steps to set it up:

1. Install the Microsoft Edge Tools extension: You can search for the "Microsoft Edge Tools" extension in the marketplace and install it.
2. Attach to a target: Use the Microsoft Edge Tools: Attach to a target command to attach the debugger to your web application.
3. Focus on Targets View: Use the Microsoft Edge Tools: Focus on Targets View command to focus on the targets view, where you can select the iframe you want to debug.
4. View Documentation: If you need more information on how to use the Microsoft Edge Tools extension, you can view the documentation.

By following these steps, you should be able to inspect and debug iframes within your web applications using the Microsoft Edge Tools extension in Visual Studio Code.

Let me know if this helps.

[hachimetsu]

I always use cloud IDEs like Codespace and Gitpod with VS Code, so I don't think that's feasible for me

[olguzzar]

Hi @hachimetsu, I have a couple of questions about your workflow. When you say you usually use Codespaces with VS Code, are you doing so in the browser? If so, you can use the built-in browser dev tools for what you are trying to do. If you are using it in the desktop version of VS Code, then the Microsoft Edge Tools extension could be helpful for you, as Reynald outlined above.
And what do you mean by "VS Code Preview"? Do you mean the Live Preview extension?

As a note, this forum is for extension authors who are developing their own VS Code extensions. I'm happy to help you with your issue here if you provide some more information, but will close this discussion as off-topic once resolved.