react/packages/react-devtools-shell
Ruslan Lesiutin ff6e05a705
chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869)
Stacked on https://github.com/facebook/react/pull/29856.

## Summary

By default, React DevTools will apply dimming with ANSI escape symbols,
so it works for both terminals and browser consoles.

For Firefox, which doesn't support ANSI escape symbols console stylings,
we fallback to css properties, like we used to do before.

## How did you test this change?

| Environment | Dark mode | Light mode |
|--------|--------|--------|
| Terminal | ![Screenshot 2024-06-12 at 19 39
46](https://github.com/facebook/react/assets/28902667/2d470eee-ec5f-4362-be7d-8d80c6c72d09)
| ![Screenshot 2024-06-12 at 19 39
09](https://github.com/facebook/react/assets/28902667/616f2c58-a251-406b-aee6-841e07d652ba)
|
| Fusebox console | ![Screenshot 2024-06-12 at 21 03
14](https://github.com/facebook/react/assets/28902667/6050f730-8e82-4aa1-acbc-7179aac3a8aa)
| ![Screenshot 2024-06-12 at 21 02
48](https://github.com/facebook/react/assets/28902667/6708b938-8a90-476f-a057-427963d58caa)
|
| Firefox console | ![Screenshot 2024-06-12 at 21 40
29](https://github.com/facebook/react/assets/28902667/4721084f-bbfa-438c-b61b-395da8ded590)
| ![Screenshot 2024-06-12 at 21 40
42](https://github.com/facebook/react/assets/28902667/72bbf001-2d3d-49e7-91c9-20a4f0914d4d)
|
| Chrome console | ![Screenshot 2024-06-12 at 21 43
09](https://github.com/facebook/react/assets/28902667/93c47881-a0dd-44f8-8dc2-8710149774e5)
| ![Screenshot 2024-06-12 at 21 43
00](https://github.com/facebook/react/assets/28902667/07ea4ff5-4322-4db9-9c12-4321d9577c9d)
|
2024-06-17 16:31:36 +01:00
..
src Remove Warning: prefix and toString on console Arguments (#29839) 2024-06-10 18:41:56 -04:00
constants.js chore[devtools]: upgrade to webpack v5 (#26887) 2023-06-14 13:15:52 +01:00
e2e-regression.html DevTools] e2e Regression Testing App (#24619) 2022-05-26 11:36:00 -04:00
e2e.html Refactored DevTools test shell for e2e (#22968) 2021-12-15 11:42:59 -05:00
index.html [DevTools] add perf regression test page in shell (#25078) 2023-01-04 17:31:13 -05:00
multi.html DevTools: Support mulitple DevTools instances per page (#22949) 2021-12-14 12:16:16 -05:00
package.json chore[devtools]: upgrade to webpack v5 (#26887) 2023-06-14 13:15:52 +01:00
perf-regression.html [DevTools] add perf regression test page in shell (#25078) 2023-01-04 17:31:13 -05:00
README.md Add details in READMEs for react-devtools local developement (#24148) 2022-03-24 10:04:12 -04:00
webpack-server.js chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869) 2024-06-17 16:31:36 +01:00

Harness for testing local changes to the react-devtools-inline and react-devtools-shared packages.

Development

This target should be run in parallel with the react-devtools-inline package. The first step then is to run that target following the instructions in the react-devtools-inline README's local development section.

The test harness can then be run as follows:

cd packages/react-devtools-shell

yarn start

Once you set both up, you can view the test harness with inlined devtools in browser at http://localhost:8080/