Skip to content

Commit

Permalink
chore: add CONTRIBUTING.md note on using React Developer Tools (#6263)
Browse files Browse the repository at this point in the history
* Add instruction on how to use the React Developer Tools.

* Update CONTRIBUTING.md
  • Loading branch information
kraenhansen authored Sep 26, 2024
1 parent df47e20 commit 0a55190
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ This repository includes a few recommended plugins for your convenience:
- ESLint extension highlights possible issues in your code following our common eslint configuration.
- ANTLR4 grammar support extension helps to work with the `bson-transpilers` package that is implemented with the help of antlr (.g and .g4 files).

## Enabling DevTools
## Enabling Chrome DevTools

To enable the Chrome DevTools for the Electron renderer processes, click "Settings" under "MongoDB Compass Dev Local" in the top menu (or press <kbd>⌘</kbd> + <kbd>,</kbd>) and click "Enable DevTools" followed by "Save", which will enable a "Toggle DevTools" item in the "View" top menu. Click this to toggle the DevTools panel (or press <kbd>⌥</kbd> + <kbd>⌘</kbd> + <kbd>I</kbd>).

Expand Down Expand Up @@ -149,3 +149,7 @@ The root cause is native modules compiled for a different version of the runtime
This means that if you e.g., start Compass application locally it will recompile all native modules to work in Electron runtime, if you would try to run tests for `@mongodb-js/connection-storage` library right after that, tests would fail due to `keytar` library not being compatible with Node.js environment that the tests are running in.

If you run into this issue, make sure that native modules are rebuilt for whatever runtime you are planning to use at the moment. To help with that we provide two npm scripts: `npm run electron-rebuild` will recompile native modules to work with Electron and `npm run node-rebuild` will recompile them to work with Node.js.

### The React Developer Tools extension is not working?

To inspect the React component hierarchies in the Chrome DevTools panel, use the [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), which is already installed when running a local development build. For a reason, yet to be determined, you must reload (<kbd>⌘</kbd> + <kbd>R</kbd>) the DevTools window to see the "⚛️ Components" and "⚛️ Profiler" tabs.

0 comments on commit 0a55190

Please sign in to comment.