Chrome Web Inspector - 左侧的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：〜/资源库/应用程序\支持/谷歌/铬/默认/用户\ 样式表/ Custom.css

• PC：C：\用户\ YourUsername \应用程序数据\本地\谷歌\镀铬\用户 数据\ DEFAULT \用户\样式表Custom.css

• 的Ubuntu（铬）：〜/的.config /铬/默认/用户\ 样式表/自定义。 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; 
}