Chrome Web Inspector - 左侧的 CSS 面板

Question

我一直在研究自定义 Chrome Web Inspector（特别是here 和here），以便将元素面板的 CSS 部分移到左侧，HTML 在右侧，但我'没有快乐。

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

这是我想要得到的内容的快速破解screenshot。

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

Answer 1

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

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