CSS styles to make Chrome Devtools usable in Dock to Right mode (like Firebug in vertical mode)
Pull request Compare This branch is 7 commits ahead, 1 commit behind melat0nin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Custom.css
README.md

README.md

chrome-devtools-vertical

A Custom.css stylesheet for Chrome/Chromium which alters the layout of Devtools when docked to the right of the screen so that the code appears horizontally above the attributes pane, instead of next to it.

Alt text

Firebug allows this layout by default and it's very useful on widescreen monitors; Devtools doesn't yet have the option so this is intended as an interim solution.

Wait, how do I dock Devtools vertically in the first place?

The option to dock vertically is completely hidden away owing to a poor UI decision: to access it, you must long-press the Dock button on the very bottom-left corner of Devtools.

Installation:

Find your Chrome's user stylesheets directory:

  • Windows: C:\Users\{Your Username}\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
  • OSX: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
  • Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/

Replace the existing Custom.css file with this one, or add the styles in this file to the bottom of your existing Custom.css file (in case you've tweaked other things and want to retain your changes). No restart needed, changes are applied immediately