[DevTools Bug]: inspecting pseudo-elements in Firefox gives error `Permission denied to access property "__reactFiber$sofadm08s2"`

[fspin]

Website or app

https://wk82tp.csb.app/

Repro steps

1. Go to the Sandbox link in Firefox (129.0.2), with React DevTools (5.3.1)
2. Open the inspector.
3. Select the ::after pseudo-element next to the <h1>.

More Info

I add a screenshot of the issue.

This is happening from a while. Of course, is not a big issue, because if I close the error on the main screen, I can keep working. And until now I wasn't using much of pseudo-elements.

But now, I'm working on a new feature in our app, where I'm relying hardly on ::after en ::before pseudo elements. And it is quite annoying.

This is happening since DevTools 4.28.4. Until v4.27.8 I didn't had problems. On this version (4.27.8) the error is shown only when opening the tab "(React) Components" in the inspector... which kind of make sense, right?.

What doesn't make sense (to me) is that I got this error when inspecting the pseudo-element in the basic firefox inspector (trying to apply css properties on it).

How often does this bug happen?

Every time

[nkalpakis21]

built an app to get paid for this PR https://www.n0va-io.com/discover/facebook/react

[rafaelfndev]

Same here, the problems occurs with all pseudo elements. Looks that this problem is caused by React Dev Tools Extension on Firefox. When I disabled, the error goes out. I think the error needs to fixed in React Dev Tools Extension, not in React itself.

With React Dev Tools Extension enabled:

Disabling extension:

After disable the pseudo code works: