在 chrome 中隐藏一些 devtools 选项卡答案

【问题标题】：Hide some devtools tabs in chrome在 chrome 中隐藏一些 devtools 选项卡
【发布时间】：2018-05-07 06:26:27
【问题描述】：

如何在 Chorme devtools 中隐藏以下标签？

我知道我可以对它们重新排序，但我想尽量减少额外的接口部分以进行一些竞争。

【问题讨论】：

AFAIK 您只能通过拖动在顶（主）行重新排序。

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

没有办法解决这个问题。您无法在 chrome devtools 中隐藏某些选项卡。

【讨论】：

【解决方案2】：

这当然是可能的！但这不是微不足道的。您需要创建（或从 Chrome 商店找到并下载）一个以 DevTools 为主题的 Chrome 扩展。如果您创建一个，一种选择是通过使用 DevTools 本身检查 DevTools 来查找元素，然后使用 CSS 覆盖。

对同一主题的另一个问题的这个很好的回答对我非常有帮助：Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

【讨论】：

【解决方案3】：

2021 年更新

您可以使用 Microsoft Edge（witch 基本上是 chrome atm 的改版）。它具有完全相同的调试器和开发工具。每次将鼠标悬停在 devtools 菜单中的选项卡上时，都会出现一个关闭按钮。就像这样：

如果您稍后希望恢复关闭的标签页，请转到 Settings -> Preferences -> 点击 Restore defaults and refresh

【讨论】：

请注意：恢复默认值将删除所有片段。如果需要，请确保备份它们。

【解决方案4】：

这根本不可能。我们无法控制这些选项的显示方式，除非我们不是 sundar pichai :)

你可以去chrome://flags/#enable-devtools-experiments启用这个标志（restart the chrome after enable it）并有一些自定义选项，如以下（尝试并享受！！:)）

Accessibility Inspection


Allow custom UI themes


Empty sourcemap auto-stepping


Live SASS


Persistence 2.0


Source diff


Timeline: event initiators


Timeline: multiple main views

【讨论】：

【解决方案5】：

正如this 回答中提到的，您可以在新的 Edge 浏览器中从 DevTools 中删除一个或多个工具。要恢复其中的一些，请单击 DevTools 右上角的菜单图标 ...，然后选择 > More tools > [您想要的工具]

在版本 91.0.864.59（官方版本）（64 位）上测试

【讨论】：

【解决方案6】：

如果您想阻止打开开发工具选项卡。使用此代码：

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

【讨论】：

Op 只想隐藏某些选项卡，而不是整个开发工具选项卡。
绝对不是我问的问题。我希望开放式开发工具成为竞争对手的工作区域，但我想通过删除他们绝对不需要使用的控件来为他们提供尽可能多的屏幕空间。而且我想在我完全控制的特定计算机上执行此操作，而不是从网页上执行此操作。 PS：您的代码不会禁用开发工具。无法从页面禁用 devtools。