What’s New in Chrome 30

I’ve stopped reporting every browser release. A once monumental occasion has been reduced to “meh … nothing to see here”. That said, a number of interesting new features have appeared in Chrome as it leaves its 20s and enters middle-age. You probably have Chrome 30 installed — if not, click the menu icon followed by About Google Chrome or head to google.com/chrome/.

Workspaces

Workspaces allow live editing of source files directly within the Developer Tools. The system maps disk files to those served by your local web server so you can save changes from the sources panel or instantly refresh when external file updates are made.

To use Workspaces:

  1. Open the Developer Tools and click the setting cog in the bottom right corner.
  2. Click Workspace followed by Add folder.
  3. Browse to a folder where source files are located, hit Select and Allow when prompted.
  4. Set one or more server URLs and folder paths which map to that location. (Alternatively, navigate to a page, open the sources panel, right-click a file and select Map to a Network Resource.)

You can now browse to the local URL, launch the Developer Tools sources panel, open a file, edit it and hit Ctrl+S to save it back to the local file system. Experimental support for the SASS CSS pre-processor is available with LESS, Stylus and Compass coming soon.

See also: How to Edit Source Files Directly in Chrome.

JavaScript Snippets

Useful code snippets can be saved and executed directly in the browser:

  1. Navigate to the Sources panel in Developer Tools.
  2. Open the Snippets tab (you may need to expand or lock the left-hand pane).
  3. Right-click the left pane, select New and enter a snippet name.
  4. Edit your snippet, save with Ctrl+S and run using Ctrl+Enter.

code snippets

Android Updates

While there’s little excitement in Chrome on the desktop, the Android edition looks more impressive.

First, WebGL is enabled by default. This is important and brings HTML5-based mobile games a few steps closer to reality. Developers can also use:

A new tab switcher can be accessed by dragging the address bar downward. In addition, you can switch tabs by swiping the bar to the left or right. That’s good — I was finding it increasingly difficult to tap on tabs in Chrome!

The menu is also ‘draggable’ — rather than tapping the menu button followed by the option, drag your finger down and select the item you need. Zooming is easier with a new gesture: double-tap the page then swipe up or down to change magnification.

Miscellaneous Updates

A few new and improved features are lurking in the lesser-used regions of Chrome…

  • A new image right-click/long-tap option allows you to Search Google for this image.
  • The Omnibox now gives higher precedence to previously-typed URLs.
  • Performance improvements have been implemented for querySelector and querySelectorAll.
  • Site-specific localStorage and sessionStorage limits have been raised from 5Mb to 10Mb.
  • All form controls can receive focus with a mouse click. Previously, it was only permitted on text boxes and select fields.
  • A revised Bookmarks Bar design (although I can’t see much difference).
  • The pop-up blocker actually stops pop-ups rather than hiding them.
  • The website settings control allows you to download files from a site without asking first:
    website privacy
  • Finally, there’s a slightly bizarre retro offline page!…
    offline page

Chrome 30 is a great update. I can’t imagine abandoning my IDE just yet, but that day is coming closer.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Aurelio De Rosa

    Hello Craig. Just a side note to your article: the Vibration API is available under a flag in this new Chrome version, not by default.

    • Anonymous

      Thanks Aurelio – it looks like I missed that point.

  • Anonymous

    A simple bookmark sidebar – like in every other browser – that lets you organize your bookmarks would be VERY useful. To my big surprise this billions-dollar company is not able to get the most simple things done in their browser. That’s really disturbing.

  • Marcellino van Hecke

    Some very nice features I haven’t noticed yet. One of the main things in the next release I’m looking forward to is the homescreen (https://developers.google.com/chrome/mobile/docs/installtohomescreen) for on mobile phones just like the iOS.

  • mohsen

    chrome is great.

  • ralph.m

    I hate it when things you don’t want are forced on you, though. There’s a new Apps bookmark in the toolbar, and there doesn’t seem to be any way to remove it. Very frustrating, as I don’t want it there. :-(

  • Rolfst

    In the developer tools you can now enable default overrides when starting developer tools. Really useful for mobile development

  • Tjorriemorrie

    And still the bookmarks panel can’t be pinned?

  • Joan

    Internet Explorer needs to catch up.

  • Anonymous

    still they dont support RSS natively ;/

  • craqgerbil

    So…. How does this refresh when files are externally modified thing work? Can not seem to get that to work.

  • Anonymous

    JS Snippets are welcome!

  • Dave

    Was just playing with the JS Snippets today. One thing to be aware of is that the global scope is not cleared after the snippet has run. So if you have a global variable, run the snippet, delete the variable and then run the snippet again, the variable will still be set. It caught me out anyway.