├── .gitignore
├── extension
├── devtools.html
├── load.html
├── bootstrap.js
├── load.js
├── manifest.json
└── third_party
│ └── require.js
├── yarn.lock
├── package.json
├── README.md
├── tsconfig.json
├── LICENSE
└── src
└── perf.tsx
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | /extension/out
3 | node_modules
--------------------------------------------------------------------------------
/extension/devtools.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/extension/load.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/extension/bootstrap.js:
--------------------------------------------------------------------------------
1 | chrome.devtools.panels.create("React Perf",
2 | '', // should be an icon image
3 | 'load.html',
4 | function(panel) {
5 | console.log('Started React Perf');
6 | }
7 | );
--------------------------------------------------------------------------------
/extension/load.js:
--------------------------------------------------------------------------------
1 | require.config({
2 | paths: {
3 | 'react': './third_party/react',
4 | 'react-dom': './third_party/react-dom',
5 | }
6 | });
7 |
8 | requirejs(['react', 'react-dom', "../out/perf"], function (React, ReactDOM, perf) {
9 | const root = document.getElementById('root');
10 | ReactDOM.render(React.createElement(perf.PerfProvider), root)
11 | });
--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 |
4 | "name": "React Perf Tools",
5 | "description": "Perf prototype",
6 | "version": "1.0",
7 | "devtools_page": "devtools.html",
8 |
9 | "permissions": [
10 | "file:///*",
11 | "http://*/*",
12 | "https://*/*"
13 | ],
14 | "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
15 | }
--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | "@types/react@^15.0.27":
6 | version "15.0.27"
7 | resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.27.tgz#d64ad424aa24a101fd50cdeae6eab3d53e65513d"
8 |
9 | typescript@^2.3.4:
10 | version "2.3.4"
11 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42"
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-perf-tool",
3 | "version": "0.1.0",
4 | "description": "Chrome DevTools extension for analyzing React app performance issues",
5 | "main": " ",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "ts": "./node_modules/.bin/tsc -p .",
9 | "ts:watch": "yarn ts -- -w"
10 | },
11 | "author": "",
12 | "license": "Apache-2.0",
13 | "devDependencies": {
14 | "@types/react": "^15.0.27",
15 | "typescript": "^2.3.4"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Perf Tool
2 |
3 | A Chrome DevTools extension to analyze the performance of your React app.
4 |
5 | After reading [React's 15.4 release notes](https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline), I learned that React already performance instrumentation using the [window.performance API](https://developer.mozilla.org/en-US/docs/Web/API/Window/performance). This tool essentially provides a different view on the performance data already collected by React.
6 |
7 | These are the types of questions that can be answered by this tool:
8 | * Which components are taking the longest time on load?
9 | * Insight: Defer loading certain components (e.g. don't render content below the fold right away).
10 | * What's taking the most time after certain user actions (e.g. scrolling a list-type view, clicking on a new route)?
11 | * Insight: Identify which components to write `shouldComponentUpdate` logic for.
12 | * How many component instances are there at a given moment?
13 | * Insight: Unmount unused component instances
14 |
15 | Note: This is a **proof-of-concept** and may have bugs.
16 |
17 | ## Demo
18 |
19 | 
20 |
21 |
22 | ## Running it locally
23 |
24 | 1. Install modules: `yarn` / `npm install` (devDependency used for type checking)
25 | 2. Compile Typescript file: `yarn ts`
26 | 3. Go to chrome://extensions - click "Load unpacked extensions" - select `react-perf-tool/extension`
27 | 4. We'll use sound-redux a nice open-source SoundCloud client written in React.
28 | - Clone my forked version of sound-redux (only recent versions of React have the performance instrumentation): `git clone https://github.com/wwwillchen/sound-redux`
29 | - Install modules: `yarn` / `npm install`
30 | - You'll need to modify one line in React so the performance measurements can be captured by the extension:
31 | In `node_modules/react-dom/lib/ReactDebugTool.js`: comment out the line: `performance.clearMeasures(measurementName);`
32 | - Start the dev server for sound-redux: `yarn start`
33 |
34 | 5. Go to http://localhost:8080/?react_perf (you need the query param for React to measure performance timings)
35 | 6. Open Chrome DevTools and select the "React Perf" tab.
36 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Basic Options */
4 | "target": "es2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
5 | "module": "umd", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
6 | // "lib": [], /* Specify library files to be included in the compilation: */
7 | // "allowJs": true, /* Allow javascript files to be compiled. */
8 | // "checkJs": true, /* Report errors in .js files. */
9 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
11 | // "sourceMap": true, /* Generates corresponding '.map' file. */
12 | // "outFile": "./extension/index.js", /* Concatenate and emit output to single file. */
13 | "outDir": "./extension/out", /* Redirect output structure to the directory. */
14 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
15 | // "removeComments": true, /* Do not emit comments to output. */
16 | // "noEmit": true, /* Do not emit outputs. */
17 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
18 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
19 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
20 |
21 | /* Strict Type-Checking Options */
22 | "strict": true, /* Enable all strict type-checking options. */
23 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
24 | // "strictNullChecks": true, /* Enable strict null checks. */
25 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
26 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
27 |
28 | /* Additional Checks */
29 | // "noUnusedLocals": true, /* Report errors on unused locals. */
30 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
31 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
32 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
33 |
34 | /* Module Resolution Options */
35 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
36 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
37 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
38 | "rootDirs": ["src"], /* List of root folders whose combined content represents the structure of the project at runtime. */
39 | "typeRoots": ["../node_modules/@types"] /* List of folders to include type definitions from. */
40 | // "types": [], /* Type declaration files to be included in compilation. */
41 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
42 |
43 | /* Source Map Options */
44 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
45 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
46 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
47 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
48 |
49 | /* Experimental Options */
50 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
51 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
52 | }
53 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/src/perf.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | declare const chrome: any;
4 |
5 | let previousMeasures: PerformanceMeasure[] = [];
6 |
7 | interface ComponentPerformanceIndex {
8 | [key: string]: {
9 | mount: {
10 | timeSpent: number[];
11 | };
12 | unmount: {
13 | timeSpent: number[];
14 | };
15 | update: {
16 | timeSpent: number[];
17 | };
18 | render: {
19 | timeSpent: number[];
20 | };
21 | };
22 | }
23 |
24 | function readReactPerformanceData(
25 | measures: PerformanceMeasure[]
26 | ): ComponentPerformanceIndex {
27 | const index: ComponentPerformanceIndex = {};
28 | for (const measure of measures) {
29 | const [componentName, phase] = measure.name.split(" ");
30 | if (!index[componentName]) {
31 | index[componentName] = {
32 | mount: {
33 | timeSpent: []
34 | },
35 | unmount: {
36 | timeSpent: []
37 | },
38 | update: {
39 | timeSpent: []
40 | },
41 | render: {
42 | timeSpent: []
43 | },
44 | };
45 | }
46 | if (phase === "[mount]") {
47 | index[componentName].mount.timeSpent.push(measure.duration);
48 | }
49 | if (phase === "[unmount]") {
50 | index[componentName].unmount.timeSpent.push(measure.duration);
51 | }
52 | if (phase === "[update]") {
53 | index[componentName].update.timeSpent.push(measure.duration);
54 | }
55 | if (phase === "[render]") {
56 | index[componentName].render.timeSpent.push(measure.duration);
57 | }
58 | }
59 | return index;
60 | }
61 |
62 | interface ComponentTimeIndex {
63 | [key: string]: number;
64 | }
65 |
66 | type ComponentTotalTimes = {
67 | name: string;
68 | totalTime: number;
69 | }[];
70 |
71 | function sum(nums: number[]): number {
72 | return Math.round(Number(nums.reduce((acc, v) => (acc += v), 0).toFixed(2)));
73 | }
74 |
75 | function average(nums: number[]): string {
76 | if (nums.length === 0) {
77 | return '-';
78 | }
79 | return (nums.reduce((acc, v) => (acc += v), 0) / nums.length).toFixed(1);
80 | }
81 |
82 | function mapData(index: ComponentPerformanceIndex): ComponentPerf[] {
83 | const componentByTotalTime: ComponentTimeIndex = {};
84 | for (let componentName in index) {
85 | componentByTotalTime[componentName] =
86 | componentByTotalTime[componentName] || 0;
87 | componentByTotalTime[componentName] += sum(
88 | index[componentName].mount.timeSpent
89 | );
90 | componentByTotalTime[componentName] += sum(
91 | index[componentName].unmount.timeSpent
92 | );
93 | componentByTotalTime[componentName] += sum(
94 | index[componentName].update.timeSpent
95 | );
96 | }
97 | const components: ComponentTotalTimes = Object.keys(
98 | componentByTotalTime
99 | ).reduce((acc: ComponentTotalTimes, key) => {
100 | acc.push({ name: key, totalTime: componentByTotalTime[key] });
101 | return acc;
102 | }, []);
103 | const allComponentsTotalTime: number = components.reduce(
104 | (acc, component) => (acc += component.totalTime),
105 | 0
106 | );
107 |
108 | const percent = (num: number): string => Math.round(num * 100) + "%";
109 |
110 | const r = components.sort((a, b) => b.totalTime - a.totalTime);
111 | return r.map(c => ({
112 | componentName: c.name,
113 | totalTimeSpent: c.totalTime,
114 | numberOfInstances:
115 | index[c.name].mount.timeSpent.length -
116 | index[c.name].unmount.timeSpent.length,
117 | percentTimeSpent: percent(c.totalTime / allComponentsTotalTime),
118 | render: mapTiming(index[c.name].render.timeSpent),
119 | mount: mapTiming(index[c.name].mount.timeSpent),
120 | update: mapTiming(index[c.name].update.timeSpent),
121 | unmount: mapTiming(index[c.name].unmount.timeSpent)
122 | }));
123 |
124 | function mapTiming(nums: number[]): PerfTiming {
125 | return {
126 | averageTimeSpentMs: average(nums),
127 | numberOfTimes: nums.length,
128 | totalTimeSpentMs: sum(nums)
129 | };
130 | }
131 | }
132 |
133 | interface PerfProviderState {
134 | data: ComponentPerf[];
135 | totalTime: number;
136 | pendingEventCount: number;
137 | }
138 |
139 | const containerStyle = {
140 | fontFamily: `"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
141 | zIndex: 999,
142 | position: "fixed",
143 | bottom: 0,
144 | right: 0,
145 | width: "100%",
146 | backgroundColor: "white",
147 | overflowY: "auto",
148 | fontSize: 12,
149 | height: "100%",
150 | };
151 |
152 | export class PerfProvider extends React.Component {
153 | constructor(props: any) {
154 | super(props);
155 | this.state = {
156 | data: [],
157 | totalTime: 0,
158 | pendingEventCount: 0,
159 | };
160 | }
161 |
162 | componentDidMount() {
163 | setInterval(() => {
164 | chrome.devtools.inspectedWindow.eval(
165 | "performance.getEntriesByType('measure').length",
166 | function(result: string, exception: Error) {
167 | if (exception) {
168 | console.error("exception", exception);
169 | return;
170 | }
171 | innerEvents(JSON.parse(result));
172 | }
173 | );
174 | }, 2000);
175 |
176 | const innerEvents = (eventCount: number) => {
177 | this.setState({
178 | pendingEventCount: eventCount
179 | });
180 | if (this.state.data.length === 0) {
181 | this.flush();
182 | }
183 | };
184 | }
185 |
186 | private flush = () => {
187 | chrome.devtools.inspectedWindow.eval(
188 | "JSON.stringify(performance.getEntriesByType('measure'))",
189 | function(result: string, exception: Error) {
190 | if (exception) {
191 | console.error("exception", exception);
192 | return;
193 | }
194 | innerFlush(JSON.parse(result));
195 | }
196 | );
197 | const innerFlush = (result: PerformanceMeasure[]) => {
198 | previousMeasures = previousMeasures.concat(result);
199 | const data = mapData(readReactPerformanceData(previousMeasures));
200 | this.setState({
201 | data,
202 | totalTime: data.reduce((acc, comp) => acc + comp.totalTimeSpent, 0)
203 | });
204 | chrome.devtools.inspectedWindow.eval(
205 | "JSON.stringify(performance.clearMeasures())"
206 | );
207 | };
208 | }
209 |
210 | private clear = () => {
211 | previousMeasures = [];
212 | this.setState({
213 | data: mapData(readReactPerformanceData(previousMeasures)),
214 | totalTime: 0
215 | });
216 | chrome.devtools.inspectedWindow.eval(
217 | "JSON.stringify(performance.clearMeasures())"
218 | );
219 | }
220 |
221 | private reload = () => {
222 | this.clear();
223 | chrome.devtools.inspectedWindow.reload();
224 | }
225 |
226 | render() {
227 | const toolbarStyle = {
228 | border: "1px solid #dadada",
229 | paddingTop: 2,
230 | paddingBottom: 2
231 | };
232 | const toolbarDividerStyle = {
233 | backgroundColor: "#ccc",
234 | width: 1,
235 | margin: "0 4px",
236 | height: 12,
237 | display: "inline-block"
238 | };
239 |
240 | const buttonStyle = {
241 | backgroundColor: "#3B78E7",
242 | color: "white",
243 | padding: "1px 12px",
244 | border: "1px solid rgba(0, 0, 0, 0.14)"
245 | };
246 |
247 | return (
248 |