0

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 :)

Community
  • 1
  • 1
Joe
  • 15,669
  • 4
  • 48
  • 83

1 Answers1

2

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

enter image description here

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;
}
Joe
  • 15,669
  • 4
  • 48
  • 83
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • Almost - http://img638.imageshack.us/img638/117/webinspectoralmost.png The elements panel is correct, but the styles are still hugging the right hand side like a teddy bear :/ – Joe Feb 16 '12 at 15:17
  • @Joe what version of Chrome are you using? – Andres I Perez Feb 16 '12 at 15:34
  • 18.0.1025.33 beta-m - it just updated itself a couple of days ago, but it's running off the beta branch. – Joe Feb 16 '12 at 15:38
  • @Joe yeah, will test when i get home, i'm still rocking Chrome 14 here at work for testing purposes, but looked at the latest css file used in the beta version and they changed all the classes. Just need to change the ids to point to the current classes being used to make it work. – Andres I Perez Feb 16 '12 at 18:07
  • Awesome, cheers. I couldn't find the right files when I had a dig around to try and find the classes, good job finding them :P Whereabouts are they? :) – Joe Feb 16 '12 at 18:09
  • @Joe you can dig around in the [trunk](http://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-end) files of the web inspector, i'm searching around in the current [css](http://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-end/inspector.css) and the [sidebarpane.js](http://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-end/SidebarPane.js) file. – Andres I Perez Feb 16 '12 at 18:16
  • @Joe Updated my answer with a fixed version that should work with your version of Chrome. – Andres I Perez Feb 16 '12 at 20:48
  • I've just got back home, so I'll check it in the morning when I get back in :) – Joe Feb 16 '12 at 20:52
  • Works like a charm :) Cheers. Can't award the bounty for 3 hours, but it's on the way – Joe Feb 17 '12 at 09:14
  • Added an extra line to get the script panel too, but all working great :) Thanks a lot – Joe Feb 17 '12 at 12:58
  • @Joe Great, thansks o much, hope this helps future users as well. – Andres I Perez Feb 17 '12 at 13:10