How to debug webview code?

[hellozyemlya]

First of all, many thanks for extension, it works as described and very well.

Question is - how I can connect debugger to resulting iframe and actually debug webview typescript code with build in vs code debugger or any other debugger?
Thanks in advance.

[tomgao365]

Hi @hellozyemlya , now you can try v3.10+.
During development, support standalone development tool applications for react and vue, enabled by default.

• react: inject <script src="http://localhost:8097"></script>, support react-devtools
• vue: inject <script src="http://localhost:8098"></script>, support vue-devtools

[hellozyemlya]

@tomgao365 wow, that is cool, many thanks. Not exactly what I wanted\asked for, but will be helpful(I really struggled a lot once, where failed with slow react rendering... it forced me to mock out all vs code api and run webview directly in browser).

But is there some vite plugin or other way that will expose port connectable\attachable via regular debugger, like vs code one build in, or jetbrains webstorm?

Regardless, having react-devtools is super cool!

[tomgao365]

@hellozyemlya 😂 Sorry, I haven't studied this type of debugger. You can only see if there are other Vite plugins that support it.

[hellozyemlya]

@tomgao365 no problems. I realized that this is probably a question for VS Code team itself. I guess you can close this issue if you want.