Skip to content

Commit

Permalink
Patch console to append component stacks (#348)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
Brian Vaughn authored Jul 17, 2019
1 parent 0f2fb5b commit cb3fb42
Show file tree
Hide file tree
Showing 24 changed files with 1,083 additions and 255 deletions.
2 changes: 1 addition & 1 deletion flow-typed/npm/react-test-renderer_v16.x.x.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ declare module 'react-test-renderer' {
options?: TestRendererOptions
): ReactTestRenderer;

declare function act(callback: () => void): Thenable;
declare function act(callback: () => ?Thenable): Thenable;
}

declare module 'react-test-renderer/shallow' {
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -138,18 +138,18 @@
"opener": "^1.5.1",
"prettier": "^1.16.4",
"prop-types": "^15.6.2",
"react": "^0.0.0-50b50c26f",
"react": "^0.0.0-424099da6",
"react-15": "npm:react@^15",
"react-color": "^2.11.7",
"react-dom": "^0.0.0-50b50c26f",
"react-dom": "^0.0.0-424099da6",
"react-dom-15": "npm:react-dom@^15",
"react-is": "^0.0.0-50b50c26f",
"react-test-renderer": "^0.0.0-50b50c26f",
"react-is": "0.0.0-424099da6",
"react-test-renderer": "^0.0.0-424099da6",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "./vendor/react-window",
"request-promise": "^4.2.4",
"rimraf": "^2.6.3",
"scheduler": "^0.0.0-50b50c26f",
"scheduler": "^0.0.0-424099da6",
"semver": "^5.5.1",
"serve-static": "^1.14.1",
"style-loader": "^0.23.1",
Expand Down
14 changes: 9 additions & 5 deletions packages/react-devtools-core/src/standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from 'react-dom';
import Bridge from 'src/bridge';
import Store from 'src/devtools/store';
import { getSavedComponentFilters } from 'src/utils';
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
import { Server } from 'ws';
import { existsSync, readFileSync } from 'fs';
import { installHook } from 'src/hook';
Expand Down Expand Up @@ -241,12 +241,16 @@ function startServer(port?: number = 8097) {
// because they are generally stored in localStorage within the context of the extension.
// Because of this it relies on the extension to pass filters, so include them wth the response here.
// This will ensure that saved filters are shared across different web pages.
const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
getSavedComponentFilters()
)};`;
const savedPreferencesString = `
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
getSavedComponentFilters()
)};
window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
getAppendComponentStack()
)};`;

response.end(
savedFiltersString +
savedPreferencesString +
'\n;' +
backendFile.toString() +
'\n;' +
Expand Down
17 changes: 12 additions & 5 deletions shells/browser/shared/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Bridge from 'src/bridge';
import Store from 'src/devtools/store';
import inject from './inject';
import { createViewElementSource, getBrowserTheme } from './utils';
import { getSavedComponentFilters } from 'src/utils';
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
import {
localStorageGetItem,
localStorageRemoveItem,
Expand All @@ -22,16 +22,23 @@ let panelCreated = false;
// The renderer interface can't read saved component filters directly,
// because they are stored in localStorage within the context of the extension.
// Instead it relies on the extension to pass filters through.
function initializeSavedComponentFilters() {
function syncSavedPreferences() {
const componentFilters = getSavedComponentFilters();
chrome.devtools.inspectedWindow.eval(
`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
componentFilters
)};`
);

const appendComponentStack = getAppendComponentStack();
chrome.devtools.inspectedWindow.eval(
`window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
appendComponentStack
)};`
);
}

initializeSavedComponentFilters();
syncSavedPreferences();

function createPanelIfReactLoaded() {
if (panelCreated) {
Expand Down Expand Up @@ -286,7 +293,7 @@ function createPanelIfReactLoaded() {
chrome.devtools.network.onNavigated.addListener(function onNavigated() {
// Re-initialize saved filters on navigation,
// since global values stored on window get reset in this case.
initializeSavedComponentFilters();
syncSavedPreferences();

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

// Load (or reload) the DevTools extension when the user navigates to a new page.
function checkPageForReact() {
initializeSavedComponentFilters();
syncSavedPreferences();
createPanelIfReactLoaded();
}

Expand Down
3 changes: 2 additions & 1 deletion shells/dev/src/devtools.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { installHook } from 'src/hook';
import { initDevTools } from 'src/devtools';
import Store from 'src/devtools/store';
import DevTools from 'src/devtools/views/DevTools';
import { getSavedComponentFilters } from 'src/utils';
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';

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

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

installHook(contentWindow);

Expand Down
Loading

0 comments on commit cb3fb42

Please sign in to comment.