Blogs

What’s New in Chrome 30

Craig Buckler
Share

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.