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.

Wellesz

AFAIK you can only reorder in the top (main) row by dragging. – Labor

Answer 1

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

Saundra

Answer 2

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

Peruke

Just to note: restoring defaults will erase all snippents. Ensure to back them up if needed. – Wellesz

Answer 3

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

Warmblooded

Answer 4

Right-click the tab you want to hide, then "Move to bottom". It'll disappear from the main tabs panel. You can find the "bottom" tabs by pressing Esc key. As for 2023.09 it only works for native tabs (e.g. I can't move the AdBlock tab)

Gemagemara

Cool idea! Seems like it was not the case in 2017. Anyway, can't close it there. It stays in the bottom. – Wellesz

Answer 5

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

Intelligentsia

Answer 6

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)

Baa

Answer 7

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
    }
}

Objectivism

Op only wanted to hide certain tabs, not the whole dev-tools tab. – Dowell

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. – Wellesz