Debugging why a UI component renders / behaves correctly in one environment but not in other environment

I have created a javascript+html+css UI component in codesandbox.com which behaves / renders correctly on some mouse events. But same rendering behaviour does not happen when I integrate the UI component in application running on my local machine.

So, I want to capture and compare change in CSS properties of component’s html tags, when interact with them with mouse.

In codesandbox, I can take screen snapshot of chrome dev tools to capture change in CSS properties of component’s specific HTML tag when I interact with it using mouse, as the number of CSS properties listed is small.

But in my local app, it shows huge number of CSS properties to fit all in same window. I need to scroll to view them all. So, when I mouse over to those html tags of UI component, CSS properties do change, but they span across scroll bar and I cannot take screenshot to capture them all. Neither I can scroll and take screen shot as scrolling simply changes mouse event.

How do I do this? How people usually capture change in CSS properties (or all CSS properties, not just changes) on some events? Is there any other recommended way to debug this scenario?