Make Chrome DevTools responsive with media queries

Please Note; Google Chrome DevTools has recently been updated meaning that the below techniques no longer work. I intend to fix this soon!

---

I recently discovered a new theme for my Chrome DevTools (Zero-Dark-Matrix) thanks to @aidanthreadgold.

Whilst experimenting with my development flow and how I use DevTools on a daily basis, I found in some situations I would use DevTools docked to the bottom of the screen, and others with it docked to the right.

There are benefits to both;

Dock to the bottom

The horizontal panel across the bottom gives you the ability to easily read long lines of code, full network information and access all of the toolbar tabs (Elements, Resources, Network, e.t.c.).

Dock to the right

The vertical panel gives you more room to view the application you’re working on, see a longer network and profiling timelines, and obviously more lines of code.


I found when using DevTools in the vertical panel that my most used tab: Console, was being dropped off of the toolbar first due to the width of the panel. This can be pretty inconvenient if you are regularly switching between tabs.

Making Chrome DevTools responsive

I wanted to do something to make DevTools responsive so I decided to edit the Custom.css theme file which is used to make it pretty, and add media queries so that I could specify which tabs are hidden, leaving only the most important tabs visible.

Note; This solution isn’t ideal for everyone, your development flow is important to get right, I like to tweak my tools to try and make them more useful to my particular work.

Prioritising Tabs

My tab list is as follows in order of priority; Console, Elements, Network, Sources (scripts), Resources, Timeline, Profiles,  Audits.

Finding the breakpoints

I used DevTools itself to inspect the toolbar and determine the breakpoints.

See my blog post: Inspecting the Inspector – How to Inspect Chrome DevTools, for more information.

The first tab to go was Audits, here’s the css I used;

/* When DevTools width is 624 pixels or less */
@media all and (max-width: 624px) and (min-width: 0px) {

    /* Hide the audits tab */
    #-webkit-web-inspector #toolbar .toolbar-item.audits {
        display: none !important;
    }
}

Most properties you set in Custom.css will need !important to override Chrome’s default css for DevTools.

I duplicated the css for each tab, working out the breakpoints at which the next tab needed to be hidden to come up with the most effective toolbar for me;

Note; This is relative to the particular theme I’m using and although the theme isn’t much different, the media queries may not work precisely for your theme. You can fiddle with the max-width values in the CSS to find the right breakpoints for your theme.

Caveats

The tabs don’t appear in the drop down menu to the right when they drop off, though you can still navigate left and right through all panels using the shortcut keys CMD + [ and CMD + ]

The CSS

Here’s my full Custom.css for making Chrome DevTools responsive , including the Zero-Dark-Matrix theme.

View on Github