If you were to debug your React project's problem involved with unidentified and unwanted re-renders. How would you do it? (This video was titled Debugging with React App so I expected it to show a re-rendering problem ✌ )
Well, what if I have a backend where I want to debug that runs on 4000 port, and in my case I have a front end and when I click the signup button it goes to my back-end code and I want to debug there so in my launch.json file should change the "url" property to 4000 which is my backend?
The debugger is attached to a port (the one you defined in the settings, at the beginning of this video). If you have a frontend and a backend app, running on two separate ports, I'd probably say the easiest way is to launch two separate debuggers.
Okey I handled it what to do I defined my launch.json like this: { "version": "0.2.0", "configurations": [ { "name": "Launch Chrome", "request": "launch", "type": "chrome", "url": "localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["/**"], "program": "${workspaceFolder}\\backend\\src\\app.js" } ] } But when you want to debug the backend it wants you to change import syntax in files and add "type:module" to package.json. It was interesting to solve but it was solved. Maybe you may take another video about it because it might be pretty confusing for those who don't know how to do that.
Cool! So here as I can see it is assuming that on 3000 you already have the frontend running, and the debugger spins the backend using app.js as an entrypoint?
Is there a way we can use the native browser window instead of the built-in browser that opens up? It doesn't have my extensions and look different overall.
Hey! It should be possible to launch a specific browser, but it can be even easier to directly use the brower at that point. I made a video on how to use your own Chrome instance: ua-cam.com/video/t1aEXEvYzvM/v-deo.html
Thanks for the comment! Do you think a smaller app with just a couple of components was better to showcase the debugger? I didn't wont to oversimplify it, but maybe I made it too confusing. Let me know :D
Thanks man, I was looking for this and All I could see was 1 hour long videos
Thank you, I learnt something new and useful thing today as a developer.
Love to hear that!
just what I needed, short and succinct and got the job done - much appreciated!
I've been using log statement for 2 years. Now you just change my entire career xD
Thanks for this great tutorial
Thanks so much. You make it easy and look easy for us too lol
That's helped me a lot! Thank you, bro.
Excelent explanation, thanks very much for your video.
Are you the voice of "not what you think" videos on UA-cam? Very similar!
Unfortunately not, I wish I had a similar amount of subscribers though 😂
If you were to debug your React project's problem involved with unidentified and unwanted re-renders. How would you do it?
(This video was titled Debugging with React App so I expected it to show a re-rendering problem ✌ )
Do you have a repo for your code you using to demonstrate, I am very new to React and wish to follow your tutorial using your code
Hi, Nice video.
Not sure the debug point is not coming to vs code . Do we have special settings done ? Any help would be appreciated
Dude thank you!
thank you
Thanks! Vere helpful!
How about React Native? Are we still stuck with Flipper?
I have never tried but I think it should be possible to do pretty much the same, with a dedicated entry in launch.json
thank you very much
helped a lot
Perfect video
Nice one thanks
Well, what if I have a backend where I want to debug that runs on 4000 port, and in my case I have a front end and when I click the signup button it goes to my back-end code and I want to debug there so in my launch.json file should change the "url" property to 4000 which is my backend?
The debugger is attached to a port (the one you defined in the settings, at the beginning of this video).
If you have a frontend and a backend app, running on two separate ports, I'd probably say the easiest way is to launch two separate debuggers.
Okey I handled it what to do I defined my launch.json like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["/**"],
"program": "${workspaceFolder}\\backend\\src\\app.js"
}
]
}
But when you want to debug the backend it wants you to change import syntax in files and add "type:module" to package.json. It was interesting to solve but it was solved. Maybe you may take another video about it because it might be pretty confusing for those who don't know how to do that.
Cool! So here as I can see it is assuming that on 3000 you already have the frontend running, and the debugger spins the backend using app.js as an entrypoint?
yeap!
Thanks for sharing! I'll see if I can investigate more and make a video out of it :D
Is there a way we can use the native browser window instead of the built-in browser that opens up? It doesn't have my extensions and look different overall.
Hey! It should be possible to launch a specific browser, but it can be even easier to directly use the brower at that point. I made a video on how to use your own Chrome instance: ua-cam.com/video/t1aEXEvYzvM/v-deo.html
ah this helps 💪🏾💪🏾
How to debug react code in webstorm?
Gracias pibe
Thanks! How to make it in Firefox?
The debugger here is on vscode, should work on all browsers :)
U could have demonstrated this by simple code
Thanks for the comment! Do you think a smaller app with just a couple of components was better to showcase the debugger? I didn't wont to oversimplify it, but maybe I made it too confusing. Let me know :D
Yes that would have been better
thanks a lot