diff --git a/API.md b/API.md index 82b7777f..3ac3a0eb 100644 --- a/API.md +++ b/API.md @@ -319,6 +319,7 @@ Initialize the store with actions and listening for storage events | [options.captureMetrics] | Boolean | | Enables Onyx benchmarking and exposes the get/print/reset functions | | [options.shouldSyncMultipleInstances] | Boolean | | Auto synchronize storage events between multiple instances of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop) | | [options.debugSetState] | Boolean | | Enables debugging setState() calls to connected components. | +| [options.enableDevTools] | Boolean | | Enables debugging using Redux DevTools extension. | **Example** ```js diff --git a/README.md b/README.md index f1f34d1c..4ce8a2c2 100644 --- a/README.md +++ b/README.md @@ -321,8 +321,18 @@ Sample output of `Onyx.printMetrics()` # Debug mode +## Using debugSetState + It can be useful to log why Onyx is calling `setState()` on a particular React component so that we can understand which key changed, what changed about the value, and the connected component that ultimately rendered as a result. When used correctly this can help isolate problem areas and unnecessary renders in the code. To enable this feature, pass `debugSetState: true` to the config and grep JS console logs for `[Onyx-Debug]`. +## Using Redux DevTools extension + +It can be useful to check the order of writes to the storage and it's state at a specific point in time. + +First, install Redux DevTools through your favorite browser ([Edge](https://microsoftedge.microsoft.com/addons/detail/redux-devtools/nnkgneoiohoecpdiaponcejilbhhikei), [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/)) + +Then, you can enable this type of debugging by passing `enableDevTools: true` to `Onyx.init({...})`. + # Development `react-native` bundles source using the `metro` bundler. `metro` does not follow symlinks, so we can't use `npm link` to