[react-devtools-extensions] "Reload and start profiling" button is missing on non-Chrome browsers

[EliteMasterEric]

React version: v17.0.1

Steps To Reproduce

1. Open the React Developer Tools extension on Chrome and navigate to the Profiler tab. Note the presence of the "Reload and start profiling" button.
2. Open the React Developer Tools extension on Firefox and navigate to the Profiler tab. Note the absence of this button.

The current behavior

The button is currently not present on Firefox.

The expected behavior

The button should be present and function as expected on Firefox.

Notes

It is frustrating and un-intuitive that certain browsers lack useful functionality. As it stands, I cannot diagnose lag that appears when starting up a React app on Firefox.

I see that there is code to explicitly disable the button on certain platforms. In order for this issue to be resolved, the required functionality must be reproduced on other platforms.

[bvaughn]

This is not a bug. The browser APIs required to support this functionality are not available in Firefox.

I understand your frustration, but there is not, to my knowledge, any way to work around this issue.

[EliteMasterEric]

Hey @bvaughn, I apologize if I came off as frustrated earlier.

I have done some more thorough investigation into the app in order to determine the answers to the following:

• Exactly which Chrome APIs are present, which are absent in other browsers, that allow this feature to function?
• Is the Firefox developer team aware of this feature deficiency? An issue can be made on the Bugzilla Feature tracker, a link can be posted here, and this issue can be left open pending the implementation of the necessary APIs.

I did some more digging, and deduced the Reload and Start Profiling functionality is implemented in three parts:

• Make a note in local storage that the current page should be profiled the next time it loads.
• Use the Chrome DevTools API to trigger a page reload by referencing the inspected window and executing some JavaScript on it. This appears to be the API required to support this functionality.
• When the page loads, perform a check. If the aforementioned note is enabled, start profiling as the page is loading.

The following line is the one performing the actual reload functionality:

react/packages/react-devtools-extensions/src/main.js

Line 105 in 3c21aa8

chrome.devtools.inspectedWindow.eval('window.location.reload();');

After additional research, I found the following articles in the Firefox documentation, which indicates that the necessary APIs have already been implemented:

• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools#limitations_of_the_devtools_apis

It appears that Firefox does contain the appropriate API to execute arbitrary JavaScript on the inspected window to reload the page (the limitation of Firefox is that the options argument is not currently supported, but this is not relevant to this application). As far as I can discern, the functionality to begin profiling as the page loads is not dependent on any browser-specific functionality.

Thus, I am under the impression that the required functionality should be supported in Firefox 55+ as well as Edge 79+. If I am missing something, please let me know.

[bvaughn]

Use the Chrome DevTools API to trigger a page reload by referencing the inspected window and executing some JavaScript on it. This appears to be the API required to support this functionality.

No. The API/functionality that's not supported by Firefox is synchronous XMLHttpRequest requests:

react/packages/react-devtools-extensions/src/injectGlobalHook.js

Lines 70 to 87 in 269dd6e

	// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
	if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
	const rendererURL = chrome.runtime.getURL('build/renderer.js');
	let rendererCode;
	// We need to inject in time to catch the initial mount.
	// This means we need to synchronously read the renderer code itself,
	// and synchronously inject it into the page.
	// There are very few ways to actually do this.
	// This seems to be the best approach.
	const request = new XMLHttpRequest();
	request.addEventListener('load', function() {
	rendererCode = this.responseText;
	});
	request.open('GET', rendererURL, false);
	request.send();
	injectCode(rendererCode);
	}

This functionality isn't even always available on Chrome (see "sync-xhr" and #20879).

And it's something Chrome has considered dropping support for entirely. (I've seen vague references to this online.)

I've spoken with @dotproto (Chrome Extensions dev advocate at Google) about this use case though and he agreed that it was an acceptable solution, given the constraints. (Sorry for the ping here, Simeon. Didn't want to represent your stance without giving you a chance to disagree though.)