Using the Google Chrome debugger is a great way to quickly adjust some CSS variables before you bake them in your CSS/SCSS etc file.
It works great, and CSS has been less painful since the inception of such tools (I've used FireBug in Mozilla Firefox back in the day).
But don't worry, I have a simple solution for you!
You cannot use the Inspect on such elements, because your mouse needs to leave the hovered element which will cause the state to change and you won't be able to observe your changes.
And yes, I've tried the :hover state toggle, but it doesn't work, it's useless and I don't know why it exists.
It's quite simple:
- Open Chrome Dev tools (mine is in the same window on the bottom)
- Go to Console tab
debugger- but don't hit enter just yet
- Hover on the desired element and then hit enter
This will trigger the debugger which freezes your browser window and nothing will move. Now you can edit whatever you want and that element won't move until you resume the debugger.