Is there any tools to help find performance problems like React Developer Tools?

[bytrix]

React Developer Tools is only for react website, but not for chrome extenstions build with crxjs, does anyone knows solution?

[sohaibaumer]

Chrome DevTools with Extension Reloader if you want to avoid the hassle of manually disabling/enabling extensions.

[Toumash]

🎉I finally got the react-devtools to work with crxjs (after trying it 1-2 times a month for the past 5 months).
For those who will try the same path: react-devtools-core and react-devtools-inline does not work and wont work with manifest v3 due to the unsafe-eval CSP policy.

✨Full demo ▶ example

The following instruction works just fine and i can finally profile my app, so enjoy 😎

1. npm i -D react-devtools
2. Add "react-devtools": "react-devtools" to package.json
3. Go to your content script file src/content/index.tsx and place import 'react-devtools'; on the first line (before any react import)
4. Run npm run react-devtools - standalone devtools will open waiting for the connection
5. Run the extension
6. You will get error hook2.sub is not a function in the extension console
   
7. To fix this find installHook function in node_modules\react-devtools-core\dist\backend.js and remove its first line which prevents the hook.sub function being populated (because fast refresh module of crxjs does it the first time so devtools wont do it a second time):

  if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
    return null;
  }

8. Add "reoptimize": "vite optimize --force && vite", to package.json so that the file will be re-compiled (you can also edit the cached version directly by placing a breakpoint at the exception from 6, navigating up the stack and finding the installHook function in the .vte-deps file`)
9. Run npm run reoptimize
10. Run you app and happily use devtools.
11. Unfortunately it breaks the HMR functionality but cmon, its something! We have working Profiler + Components Tabs!!!!!
    

Bonus

Make it automatic!
Make it into a patch using https://github.com/ds300/patch-package. If you're using npm just use below instruction:

1. After changind the function add "postinstall": "patch-package" to your package.json

2. npm i -D patch-package

3. npx patch-package react-devtools-core to create a permament solution for other team members until it is fixed somehow by crxjs/react-devtools.

4. It created patches/react-devtools-core*.patch that you can apply with npx patch-package
   react-devtools-core+4.28.0.patch

5. If you want to reverse changes run the same command with --reverse

6. For my project i've added 2 more scripts in package.json:

    "react-devtools:patch": "patch-package --error-on-fail",
    "react-devtools:unpatch": "patch-package --reverse --error-on-fail"

For a fully working demo with pach and unpatch integrateg scripts see ✨Full demo

Notes

The root cause is probably something like the react-refresh injectIntoGlobalHook() runs before import react-devtools. I dont know how to run the import even before vites / vite-reacts runtime stuff, but the solution above works for now

[sheldhur]

Doesn't work if an extension with background service worker. Also should patch this part

// Install a global variable to allow patching console early (during injection).
// This provides React Native developers with components stacks even if they don't run DevTools.
if (location.protocol !== 'chrome-extension:') {
  installConsoleFunctionsToWindow();
  installHook(window);
  var hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  var savedComponentFilters = getDefaultComponentFilters();
}

It can be the reason why HMR breaks