My Favourite New Feature of Chrome 27’s Dev Tools

Google Chrome 27 came out last week. If you follow me on twitter, you might have seen this:

I have a blog post brewing about a new Chrome feature. It’s gonna be REALLY boring to 99.9% of you, but I’m gonna write it any way HAHAHAHA

— Jeshua Maxey (@jeshuamaxey) May 29, 2013

 

This is that blog post.

So What’s New?

Well, as it happens, quite a lot. I’m not here to write about all the updates. A great many of them I haven’t investigated myself, though I must say they all sound rather lovely. A very good round up of them can be found courtesy of sitepoint.

The one I do want to talk about is perhaps one of the more subtle introductions to the developer’s tools. I build a lot of stuff for the web in my spare time, mostly for kicks. I’m the kind of person who’s likes to be as efficient as possible. I’ll commit lots of keyboard shortcuts to memory if I think it’ll save me cumulative seconds down the line.

Below is a screenshot of how I’d typically develop a web project in Chrome. I take up the full screen with my browser and the pop out developer tools. This is fine, it works well, but if I want to change the size of my browser window, perhaps to inspect the effect of some media queries, I’d find myself having to resize two windows to make the most of my display, and then resize them both back to get back to where I started.

BEFORE: The left hand screenshot shows the browser resized to develop for smaller screens. The right hand side shows the proportions I work at for desktop web development

I hated doing this. I really hated doing this. It annoyed me far more than it should have, but it did. Imagine my glee to discover that Chrome 27 supports docking the dev tools, not in that incredibly unhelpful, lower portion of the window way, but to the right, where I’ve always had my tools. Now, upon resizing, the tools expand to take up the maximum possible space.

AFTER: The left hand screenshot shows the browser resized to develop for smaller screens. The right hand side shows the proportions I work at for desktop web development

If you haven’t already clocked it, there’s one more very cool consequence of this update. You can now pop Chrome into fullscreen on Mac and view dev tools alongside the browser window without having to swipe between desktops. This is fantastic! Granted there are rumours that Apple will be adding support for fullscreen in multiple displays in the next OSX update which will be a huge boon to power users, but in the meantime, this is pretty cool I think.

So that’s what go me all excited and what really prompted this post, BUT I thought I’d have a dig around the dev tools and see if there was anything else in the update I’d missed, or just missed in my general laziness to not plunder the options before now. What I found was that the view in the second screenshot with the split list (default in Chrome 27) is a toggle-able option, which suggests it may have existed before this update. I wish I’d found that earlier; it affords far greater navigation. There’s also an experiment to allow ‘smart braces’ in the text editor (and an experiment to use a code mirror editor), something that I think will speed up prototyping inline JavaScript a fair bit, provided it’s relatively stable.

That’s your lot. There goes my Summer resolution to develop in Firefox Oh 27 is the last Webkit based Chrome browser. Blink is next. Exciting times!

PS: If you’re curious about the screenshots, they’re of my Arduino presentation in mid development (alas still not finished). You can read more about that project here.