From 56bf788e375edd28fae0b08e2177c928e5bed553 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Nov 2020 11:05:09 -0800 Subject: [PATCH] deps: Add `immutable-devtools` and document its simple setup. In a recent commit, we converted `state.narrows` from a plain object-as-map into an `Immutable.Map`. This will make it convenient to inspect its data in Chrome. --- docs/howto/debugging.md | 27 ++++++++++++++++ flow-typed/npm/immutable-devtools_vx.x.x.js | 35 +++++++++++++++++++++ package.json | 1 + src/boot/store.js | 12 +++++++ yarn.lock | 5 +++ 5 files changed, 80 insertions(+) create mode 100644 flow-typed/npm/immutable-devtools_vx.x.x.js diff --git a/docs/howto/debugging.md b/docs/howto/debugging.md index 5887243db54..b745910f424 100644 --- a/docs/howto/debugging.md +++ b/docs/howto/debugging.md @@ -14,6 +14,7 @@ A variety of tools are available to help us do that. * ... [with React DevTools](#react-devtools) * ... [with Reactotron](#reactotron) * ... [with redux-logger](#redux-logger) + * ... [with immutable-devtools](#immutable-devtools) * [Debugging the message list](#webview) in its WebView * ... on iOS, [with Safari developer tools](#webview-safari) * ... on Android, [with the Chrome Developer Tools](#webview-chrome) @@ -158,6 +159,32 @@ call to `createLogger` in `src/boot/middleware.js`. doc](https://github.com/evgenyrodionov/redux-logger#options). +
+ +## immutable-devtools: inspect Immutable.js objects in Chrome + +Some of the data in the Redux state is stored in Immutable.js data +structures. It's normally awkward to inspect these data structures; an +`Immutable.Map` object, for example, is full of properties like +`size`, `__altered`, `__hash`, and `__ownerID`, which you have to dig +around to get at a clear representation of the items contained. + +[`immutable-devtools`](https://github.com/andrewdavey/immutable-devtools) +fixes this problem in Google Chrome v47+ by installing a "custom +formatter". + +(Alternatively, we might have recommended a [Chrome +extension](https://github.com/mattzeunert/immutable-object-formatter-extension), +which `immutable-devtools` mentions in its setup doc. But using the +NPM package provides the formatter for `zulip-mobile` just as +effectively without making widespread changes in behavior when you +browse the Web.) + +To enable it, open Chrome Dev Tools and press F1 to open the settings. +In the "Console" section, tick "Enable custom formatters". If it isn't +working, please consult the project's issue tracker before opening an +issue in `zulip-mobile`. +
# Tools: Debugging the message list (in WebView) diff --git a/flow-typed/npm/immutable-devtools_vx.x.x.js b/flow-typed/npm/immutable-devtools_vx.x.x.js new file mode 100644 index 00000000000..e26a0ebc482 --- /dev/null +++ b/flow-typed/npm/immutable-devtools_vx.x.x.js @@ -0,0 +1,35 @@ +// flow-typed signature: 14523166b9c09a9ed88bca4845a653b1 +// flow-typed version: <>/immutable-devtools_v0.1.5/flow_v0.113.0 + +/** + * This is an autogenerated libdef stub for: + * + * 'immutable-devtools' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'immutable-devtools' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'immutable-devtools/dist' { + declare module.exports: any; +} + +// Filename aliases +declare module 'immutable-devtools/dist/index' { + declare module.exports: $Exports<'immutable-devtools/dist'>; +} +declare module 'immutable-devtools/dist/index.js' { + declare module.exports: $Exports<'immutable-devtools/dist'>; +} diff --git a/package.json b/package.json index fd1355c4f56..c9824884511 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "flow-bin": "^0.113.0", "flow-coverage-report": "^0.6.0", "flow-typed": "^2.4.0", + "immutable-devtools": "^0.1.5", "jest": "^26.4.1", "jest-cli": "^26.4.1", "jest-environment-jsdom": "^26.3.0", diff --git a/src/boot/store.js b/src/boot/store.js index 14ef49e6871..b30856a1ab1 100644 --- a/src/boot/store.js +++ b/src/boot/store.js @@ -17,6 +17,18 @@ import rootReducer from './reducers'; import ZulipAsyncStorage from './ZulipAsyncStorage'; import createMigration from '../redux-persist-migrate/index'; +if (process.env.NODE_ENV === 'development') { + // Chrome dev tools for Immutable. + // + // To enable, press F1 from the Chrome dev tools to open the + // settings. In the "Console" section, check "Enable custom + // formatters". + // + // eslint-disable-next-line import/no-extraneous-dependencies, global-require + const installDevTools = require('immutable-devtools'); + installDevTools(Immutable); +} + // AsyncStorage.clear(); // use to reset storage during development /** diff --git a/yarn.lock b/yarn.lock index d6968e972fa..2c44c16a2df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6026,6 +6026,11 @@ image-size@^0.6.0: resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2" integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA== +immutable-devtools@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/immutable-devtools/-/immutable-devtools-0.1.5.tgz#32a653c8ba8258bfed37680a860a3b5fa2675693" + integrity sha512-bgQP4q+RiD1Oolw8c0sfNrCpShQIEdqJIGmPPrcG6efyJrX00hNzzM1noe3FsQdDwj2eQqL8JEtukCrwFQbt/w== + immutable@^4.0.0-rc.12: version "4.0.0-rc.12" resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"