Debug React components + Inertia in VScode

Hey everyone! I'm struggling to setup a step debugger in the frontend of my Laravel app with Inertia + React + Vite running in Laravel Sail, which is running in WSL2 under Windows 10 OS.

I have already set up XDebug with some port mappings configuration, but I also need to setup a debugger to my frontend. I tried some configurations on my VScode but none of this appear to make sense.

Here is my environment summary:

Laravel version: 9.19
Sail version: 1.0.1
Vite version: 3.0.0
React version: 17.0.2

Can anyone help me?

Thanks in advance :D

Sinnbeck

3 years ago

Best Answer

Level 102

To debug js, simply put the word debugger somewhere in your js code

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

You debug it in the browser, not vscode. Once you get used to it, you can set breakpoints manually in the browser

2 likes

souhaibd

2 years ago

Level 1

@Sinnbeck That was very helpful. Thanks a lot!

Please or to participate in this conversation.