css - Chrome Web 检查器 - 左侧的 CSS 面板

Question

我一直在研究自定义 Chrome Web Inspector(特别是 here 和 here)，以便将 Elements 面板的 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\样式表/Custom.css

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

• Ubuntu( Chrome ):~/.config/chromium/Default/User\样式表/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;
}