[DevTools] Add settings to hide Profiler and Suspense tabs

[ivnnv]

Summary

Adds user-facing settings to optionally hide the Profiler and Suspense tabs in React DevTools. Many developers never use these panels, and hiding them reduces clutter in the browser DevTools tab bar.

• "Hide Profiler tab" checkbox in the Profiler settings panel (gear icon > Profiler tab)
• "Hide Suspense tab" checkbox in General settings
• Both default to shown (no breaking change)
• In the browser extension, panels are skipped at creation time via chrome.devtools.panels.create. A hint explains that changes take effect when DevTools is opened in a new tab or reopened.
• In standalone DevTools (showTabBar=true), the tabs are filtered immediately from the tab bar.

Test plan

• Load the unpacked extension in Chrome
• Open DevTools on any React page
• Open settings (gear icon), navigate to the Profiler tab, check "Hide Profiler tab"
• Close DevTools and reopen in a new tab. Verify the Profiler panel tab is gone.
• Uncheck the setting in Profiler settings (still accessible via the settings modal). Reopen DevTools and verify the tab returns.
• Repeat for "Hide Suspense tab" in General settings.
• Verify in-tab navigation (e.g. clicking links on the inspected page) does not break existing panels when hide settings are enabled.

[Nuccino92]

Code review

Found 1 issue:

1. Keyboard shortcuts (Ctrl+1/2/3) still navigate to hidden tabs. The handler uses allTabs (the full unfiltered array) instead of the filtered visibleTabs. When the Profiler tab is hidden, Ctrl+2 still calls selectTab('profiler'), which briefly activates the hidden tab before the useEffect in DevToolsNavigationTabBar redirects back to 'components'. The shortcuts should operate on the visible tab list so that Ctrl+2 maps to the second visible tab, not the second entry in the static allTabs array.

react/packages/react-devtools-shared/src/devtools/views/DevTools.js

Lines 298 to 314 in 1a6bfde

	switch (event.key) {
	case '1':
	selectTab(allTabs[0].id);
	event.preventDefault();
	event.stopPropagation();
	break;
	case '2':
	selectTab(allTabs[1].id);
	event.preventDefault();
	event.stopPropagation();
	break;
	case '3':
	if (allTabs.length > 2) {
	selectTab(allTabs[2].id);
	event.preventDefault();
	event.stopPropagation();
	}

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[ivnnv]

Agreed, fixed. Shortcuts now index into visibleTabs instead of allTabs.

[eps1lon]

This will just lead to developers accidentally hiding them or searching for them. Does dragging those tabs to the end not work for you?

[ivnnv]

Hey @eps1lon, thanks for checking this.
Both settings default to OFF, so I think there's little risk of accidentally hiding anything. A user would have to open the settings modal, find the checkbox, and actively enable it. And even then, the settings modal is always accessible to flip it back (or reinstalling the extension resets everything).

About dragging tabs to the end: thats a workaround yeah, but it doesn't fully help in practice for some cases like mines. With a few extensions installed (Redux DevTools being the obvious one since most React developers use it), the tab bar overflows into the >> chevron pretty quickly. The "Components" label alone is quite long.

This gets even worse for developers who need to zoom in or increase the DevTools font size for accessibility reasons like myself: At higher zoom levels the tab bar real estate shrinks significantly, and every hidden panel that isn't being used makes a real difference.

It's a small, opt-in feature that most people won't even notice exists. But for those who need it, whether for workflow preference or accessibility, it's a nice QoL improvement.

Let me know if there's a specific scenario you're worried about that I'm not covering here, happy to address it.