Anyone got any good tips on observing and debugging react, and other JS in the browser?
It’s been a while, and I struggled to successfully watch a variable to see what value it was getting. I tried some videos on YouTube and installed the React-Dev tools, but still didn’t get as far as I’d like.
Thanks for any hints, tips, tricks and links!
Commenting to get the notification on replies to this question as it will be something I will encounter soon as my company is switching to React as default for new development.
So far I’ve had much more luck, switching to Firefox Dev Edition, and using breakpoints instead of watched values. Once I found a good line to break on, I was able to answer way more questions and see the values of the properties I was after.
Still keen to learn more tips and tricks from others if anyone knows things! And links to where to learn more.
I was going to suggest the extension for React-Dev tools, to be able to peek into the virtual DOM, but you already got that covered. Another thing I’ve heard is that people use data attributes with unique values as selectors for automation since IDs and classes get automatically generated by React and aren’t very useful and meaningful in UI automation.
I guess you probably used this but I do remember this video to be really good. I watched it 3 years ago and I think I need a refresh since some of the lessons I forgot.
@alan - Makes some really super nice things in this course which apply to any JS application from my point of view.
As for React in general I would recommend as an extra step to maybe view a short youtube video on how React works. There are a lot of them unfortunatelly and some do not provide a lot of value. Try to find some that are less than 1 hour long and explain a bit the structure of React and how state works.
I will try to find the one I watched 3 years ago and post it
I’ve actually done this, and clearly need to watch it again. Because it’s awesome.
I think replay dot io is the tool you might need. I found them while doing research for my own project! Check them out and hopefully they help!
Thank you for sharing, this tool looks very promising I’ll take a closer look. It seems very powerful, but also very expensive. 