How to debug webview code?

tomjs / vite-plugin-vscode

用 vue/react 来开发 vscode extension webview ，支持 esm 和 cjs。Use vue/react to develop vscode extension webview, supporting esm and cjs.

MIT License

36 stars 5 forks source link

How to debug webview code? #18

Open hellozyemlya opened 1 day ago

hellozyemlya commented 1 day ago

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 commented 16 hours ago

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 commented 11 hours ago

@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 commented 1 hour ago

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