Question

I’ve been looking into customising the Chrome Web Inspector (here and here in particular) in an effort to move the CSS part of the Elements panel to the left, with the HTML on the right but I’ve had no joy.

Has anyone managed to get something like this working, or seen any examples of it?

Here’s a quick hacked-up screenshot of what I’m trying to get.

Edit: I’m using version 18.0.1025.33 beta-m of Chrome, just in case there’s any version-specific silliness 🙂

Answer 1

Didn’t know you can style the web inspector in Chrome :P, here is some CSS that you can add to your Custom.css stylesheet found in your Chrome directory that will render the desired result:

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

From one of the links you provided, here are where the Custom.css stylesheet is located:

• 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

Edit: screenshot

---

Here is a fixed version that should work on your version of Chrome, tried it on version 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;
}