Overriding console methods throws

[ChipZhang]

Since userjs is unusual environment, react devtools browser extensions fails to inspect react code running in such environments.
I try to use the standalone method:

1. start a local react devtools server (npx react-devtools)
2. connect to this server in the script targeting unusual environment (the script will be bundled using webpack):

import {initialize, connectToDevTools} from 'react-devtools-core/backend';
initialize();
connectToDevTools({host: 'localhost', port: 8097, useHttps: false});

This method works well for script running in a normal web page, in violentmonkey or in webext extensions. But fails for Tampermonkey.

The error is like:

TypeError: Cannot set property error of [object Object] which has only a getter

After hours of research, I figured out this is cause by the code here. The code tries to overwrite built-in console.error with custom handling function.

It seems console.xxx in Tampermonkey environment is read only, thus those errors.

[7nik]

Have you tried vite-plugin-monkey? It seems to support React dev tools.

[ChipZhang]

I've found out that the browser extension just DO work.
It's my fault. I just believed it won't work and didn't give it a try before.

But still there are problems:

1. The extension version may report lots of false positive warnings/errors, e.g.:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

The same code won't report those warnings/errors in other environment, e.g.: ViomentMonkey + standlone devtools.

2. The standalone version may solve the first problem, but it fails to work in TamperMonkey due to the reasons described in OP.

[derjanb]

It seems console.xxx in Tampermonkey environment is read only, thus those errors.

Will be fixed at the next beta version.