Skip to content

Commit cb3fb42

Browse files
author
Brian Vaughn
authored
Patch console to append component stacks (#348)
* Patch console.warn and console.error to auto-append owners-only component stacks. This setting is enabled by default and will work for React Native even if no front-end DevTools shell is being used. The setting can be disabled via a new, persisted user preference though.
1 parent 0f2fb5b commit cb3fb42

24 files changed

+1083
-255
lines changed

flow-typed/npm/react-test-renderer_v16.x.x.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ declare module 'react-test-renderer' {
6666
options?: TestRendererOptions
6767
): ReactTestRenderer;
6868

69-
declare function act(callback: () => void): Thenable;
69+
declare function act(callback: () => ?Thenable): Thenable;
7070
}
7171

7272
declare module 'react-test-renderer/shallow' {

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,18 +138,18 @@
138138
"opener": "^1.5.1",
139139
"prettier": "^1.16.4",
140140
"prop-types": "^15.6.2",
141-
"react": "^0.0.0-50b50c26f",
141+
"react": "^0.0.0-424099da6",
142142
"react-15": "npm:react@^15",
143143
"react-color": "^2.11.7",
144-
"react-dom": "^0.0.0-50b50c26f",
144+
"react-dom": "^0.0.0-424099da6",
145145
"react-dom-15": "npm:react-dom@^15",
146-
"react-is": "^0.0.0-50b50c26f",
147-
"react-test-renderer": "^0.0.0-50b50c26f",
146+
"react-is": "0.0.0-424099da6",
147+
"react-test-renderer": "^0.0.0-424099da6",
148148
"react-virtualized-auto-sizer": "^1.0.2",
149149
"react-window": "./vendor/react-window",
150150
"request-promise": "^4.2.4",
151151
"rimraf": "^2.6.3",
152-
"scheduler": "^0.0.0-50b50c26f",
152+
"scheduler": "^0.0.0-424099da6",
153153
"semver": "^5.5.1",
154154
"serve-static": "^1.14.1",
155155
"style-loader": "^0.23.1",

packages/react-devtools-core/src/standalone.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from 'react-dom';
1010
import Bridge from 'src/bridge';
1111
import Store from 'src/devtools/store';
12-
import { getSavedComponentFilters } from 'src/utils';
12+
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
1313
import { Server } from 'ws';
1414
import { existsSync, readFileSync } from 'fs';
1515
import { installHook } from 'src/hook';
@@ -241,12 +241,16 @@ function startServer(port?: number = 8097) {
241241
// because they are generally stored in localStorage within the context of the extension.
242242
// Because of this it relies on the extension to pass filters, so include them wth the response here.
243243
// This will ensure that saved filters are shared across different web pages.
244-
const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
245-
getSavedComponentFilters()
246-
)};`;
244+
const savedPreferencesString = `
245+
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
246+
getSavedComponentFilters()
247+
)};
248+
window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
249+
getAppendComponentStack()
250+
)};`;
247251

248252
response.end(
249-
savedFiltersString +
253+
savedPreferencesString +
250254
'\n;' +
251255
backendFile.toString() +
252256
'\n;' +

shells/browser/shared/src/main.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Bridge from 'src/bridge';
66
import Store from 'src/devtools/store';
77
import inject from './inject';
88
import { createViewElementSource, getBrowserTheme } from './utils';
9-
import { getSavedComponentFilters } from 'src/utils';
9+
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
1010
import {
1111
localStorageGetItem,
1212
localStorageRemoveItem,
@@ -22,16 +22,23 @@ let panelCreated = false;
2222
// The renderer interface can't read saved component filters directly,
2323
// because they are stored in localStorage within the context of the extension.
2424
// Instead it relies on the extension to pass filters through.
25-
function initializeSavedComponentFilters() {
25+
function syncSavedPreferences() {
2626
const componentFilters = getSavedComponentFilters();
2727
chrome.devtools.inspectedWindow.eval(
2828
`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
2929
componentFilters
3030
)};`
3131
);
32+
33+
const appendComponentStack = getAppendComponentStack();
34+
chrome.devtools.inspectedWindow.eval(
35+
`window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
36+
appendComponentStack
37+
)};`
38+
);
3239
}
3340

34-
initializeSavedComponentFilters();
41+
syncSavedPreferences();
3542

3643
function createPanelIfReactLoaded() {
3744
if (panelCreated) {
@@ -286,7 +293,7 @@ function createPanelIfReactLoaded() {
286293
chrome.devtools.network.onNavigated.addListener(function onNavigated() {
287294
// Re-initialize saved filters on navigation,
288295
// since global values stored on window get reset in this case.
289-
initializeSavedComponentFilters();
296+
syncSavedPreferences();
290297

291298
// It's easiest to recreate the DevTools panel (to clean up potential stale state).
292299
// We can revisit this in the future as a small optimization.
@@ -302,7 +309,7 @@ function createPanelIfReactLoaded() {
302309

303310
// Load (or reload) the DevTools extension when the user navigates to a new page.
304311
function checkPageForReact() {
305-
initializeSavedComponentFilters();
312+
syncSavedPreferences();
306313
createPanelIfReactLoaded();
307314
}
308315

shells/dev/src/devtools.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { installHook } from 'src/hook';
88
import { initDevTools } from 'src/devtools';
99
import Store from 'src/devtools/store';
1010
import DevTools from 'src/devtools/views/DevTools';
11-
import { getSavedComponentFilters } from 'src/utils';
11+
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
1212

1313
const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
1414

@@ -18,6 +18,7 @@ const { contentDocument, contentWindow } = iframe;
1818
// because they are stored in localStorage within the context of the extension.
1919
// Instead it relies on the extension to pass filters through.
2020
contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getSavedComponentFilters();
21+
contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = getAppendComponentStack();
2122

2223
installHook(contentWindow);
2324

0 commit comments

Comments
 (0)