Chrome Web Inspector - 左侧的CSS面板

Question

我一直在考虑自定义Chrome网络检查器（特别是here和here），以便将“元素”面板的CSS部分向左移动，并在对，但我没有快乐。

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

这是我正在努力获得的快速入侵screenshot。

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

Answer 1

我们不知道您可以在Chrome中设置网页检查器的样式：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 \ User Data \ Default \ User StyleSheets \ Custom.css

• Ubuntu（Chromium）：〜/ .config / chromium /默认/用户\ 样式表/ 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;
}