Hide some devtools tabs in chrome

Question

How can I hide following tabs in Chorme devtools?

I know that I can reorder them, but I'd like to minimize extra interface part for some competition.

AFAIK you can only reorder in the top (main) row by dragging. — wOxxOm, Nov 23 '17 at 10:32

score 4 · Answer 1 · answered Nov 23 '17 at 10:37

4

There is no solution to this. You can't hide certain tabs in chrome devtools.

answered Nov 23 '17 at 10:37

HexaCrop

3,863
2
23
50

score 4 · Answer 2 · edited Apr 30 '21 at 14:26

4

2021 update

You can use Microsoft Edge (witch is basically a reskin of chrome atm). It has the exact same debugger and devtools. There a close button will appear every time you mouseover a tab in the devtools menu. Just like this:

If you later wish to bring closed tabs back up, go to Settings -> Preferences -> click Restore defaults and refresh

edited Apr 30 '21 at 14:26

Qwertiy

19,681
15
61
128

answered Apr 30 '21 at 06:29

Aleksander Dorkov

51
1
3

Just to note: restoring defaults will erase all snippents. Ensure to back them up if needed. – Qwertiy Apr 30 '21 at 14:27

score 3 · Answer 3 · answered Jun 19 '18 at 14:22

This is certainly possible! But it isn't trivial. You need to create (or find and download from the Chrome Store) a Chrome Extension that themes DevTools. If you create one, one option is to find the elements by inspecting DevTools with DevTools itself and then use CSS to override.

This great answer to another question on the same topic was extremely helpful to me: Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

Kishan Oza · Answer 4 · 2017-11-23T10:45:14.407

It is simply not possible. we cant control how this options are appearing util and unless we are not sundar pichai :)

you can go to chrome://flags/#enable-devtools-experiments enable this flag(restart the chrome after enable it) and have some customization option like following(try and Enjoy !!:))

Accessibility Inspection


Allow custom UI themes


Empty sourcemap auto-stepping


Live SASS


Persistence 2.0


Source diff


Timeline: event initiators


Timeline: multiple main views

score 1 · Answer 5 · answered Jul 02 '21 at 14:37

As mentioned in this answer, you can delete one or more tools from DevTools at new Edge browser. To restore some of them back click on the menu icon ... at the right corner of the DevTools then select > More tools > [Your desired tool]

Tested on Version 91.0.864.59 (Official build) (64-bit)

score -4 · Answer 6 · edited Nov 12 '19 at 13:32

-4

If you want to prevent opening dev-tools tabs. Use this code :

window.oncontextmenu = function () {
    return false
}
document.onkeydown = function (e) {
    if (window.event.keyCode === 123 || e.button === 2) {
        // 123 is key code for F12 key block and 2 is button code for right click
        return false
    }
}

edited Nov 12 '19 at 13:32

ush189

1,342
6
22
30

answered Nov 12 '19 at 12:00

Prince Yadav

1
1

2

Op only wanted to hide certain tabs, not the whole dev-tools tab. – PJProudhon Nov 12 '19 at 12:30
Absolutely not the thing I've asked about. I want open devtools be working area for competitors, but I want to give them as much screen space as possible by removing controls that they definitely won't need to use. And I want to do it on specific computer I fully control, not from web page. PS: Your code won't disable devtools. It's impossible to disable devtools from the page. – Qwertiy Nov 12 '19 at 12:31

Hide some devtools tabs in chrome

6 Answers6