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 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:
- Open the Developer Tools and click the setting cog in the bottom right corner.
- Click Workspace followed by Add folder.
- Browse to a folder where source files are located, hit Select and Allow when prompted.
- 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.
Useful code snippets can be saved and executed directly in the browser:
- Navigate to the Sources panel in Developer Tools.
- Open the Snippets tab (you may need to expand or lock the left-hand pane).
- Right-click the left pane, select New and enter a snippet name.
- Edit your snippet, save with Ctrl+S and run using Ctrl+Enter.
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:
- the DeviceOrientation API to monitor accelerometer motion and rotation
- the Media Source Extensions API to generate video or audio streams for playback
- the Web Speech API to convert text to speech, and
- the Vibration API to give Android users a small tactile thrill!
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.
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
sessionStoragelimits 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:
- Finally, there’s a slightly bizarre retro offline page!…
Chrome 30 is a great update. I can’t imagine abandoning my IDE just yet, but that day is coming closer.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers