css - Chrome Web Inspector - 左侧的 CSS 面板

Question

我一直在考虑自定义 Chrome Web Inspector（特别是此处和此处），以将元素面板的 CSS 部分移到左侧，将 HTML 放在右侧，但我并不高兴。

有没有人设法得到这样的工作，或者看到它的任何例子？

这是我想要得到的快速截图。

编辑：我使用18.0.1025.33 beta-m的是 Chrome 版本，以防万一有任何特定于版本的愚蠢:)

Answer 1

不知道您可以在 Chrome 中设置 Web 检查器的样式：P，这里有一些 CSS，您可以将其添加到您Custom.css的 Chrome 目录中的样式表中，以呈现所需的结果：

Custom.css

---

#elements-content {
    left: 325px !important;
    right: 0 !important;
}

#elements-sidebar {
    left: 0 !important;
    right:auto !important;
    left:0 !important;
    border-right: 1px solid #404040 !important;
}

#elements-content[style] { /* to target the inline style */
   right:0 !important;
   left:325px !important;
}

从您提供的链接之一，这里是Custom.css样式表所在的位置：

• Mac：~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

• PC：C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

• Ubuntu (Chromium)：~/.config/chromium/Default/User\ StyleSheets/Custom.css

编辑：截图

---

这是一个可以在您的 Chrome 版本上运行的固定版本，在 17.xxxx 版本上尝试过

CSS

#elements-content,
.scripts-views-container {
    left: 325px !important;
    right: 0 !important;
}

.split-view-sidebar-right  {
    float:right !important;
    right:auto !important;
    left:0 !important;
    width:325px !important;
}

.split-view-sidebar-left  {
    float:left !important;
    left:auto !important;
    right:0 !important;
}

.split-view-sidebar-left {
    border-right: 1px solid rgb(64%, 64%, 64%) !important;
}

.split-view-sidebar-left.maximized {
    border-left: none !important;
}

.split-view-sidebar-right {
    border-right: 1px solid rgb(64%, 64%, 64%) !important;
}

.split-view-sidebar-right.maximized {
    border-left: none !important;
}