Google Improves Chrome DevTools for Developers

By Todd R. Weiss  |  Posted 2013-08-07

Google Improves Chrome DevTools for Developers

Google's Chrome DevTools toolset for developers was just updated with three new tools that will make it easier for developers to write their code and produce their products.

The additions were unveiled in an Aug. 5 post by Vsevolod Vlasov, a DevTools software engineer, on The Chromium Blog. The new features are meant to "improve your authoring experience more than ever before," he wrote.

The tools include Workspaces, which allow developers to live-edit source files within DevTools with bidirectional disk persistence; CSS preprocessor mapping; and Snippets, which let developers create, edit, save and execute custom JavaScript snippets, wrote Vlasov.

"Within Workspaces you can load complete local filesystem folders (including back-end files such as scripts and build/deployment files) into the DevTools editor and map these to network resources," he wrote. "This enables you to author and tweak your scripts and styles, instantly see those changes reflected in the browser and have them transparently persist to disk—no more switching back and forth between browser and editor. The editor now supports syntax highlighting for a number of languages including PHP, Python, Java, CSS, HTML and of course JavaScript."

The use of CSS preprocessors such as Sass will now be easier because users will no longer have to switch to another program and refresh Chrome as they do presently, he wrote. That improvement comes from CSS preprocessor mapping. "CSS preprocessor mapping enables live-editing of these sources directly within the Sources panel," wrote Vlasov. "To see it in action, just map the .scss file, then Ctrl-click on a property or value to jump to the variable, mixin or function that defined it. Support for other pre-processors such as Less, Stylus and Compass is in the works."

More details on the improved process can be found in the DevTools css-preprocessor documentation, he wrote.

The new Snippets tool will be useful for developers who often find that they want to be able to save smaller scripts, bookmarklets and utilities so they can always have them available while debugging in the browser, wrote Vlasov. "Snippets is a new DevTools feature that makes it possible. It allows you to create, store and run JavaScript within the Sources tab. It gives you a multi-line console with syntax-highlight and persistence, making it convenient for prototyping code that is more than a one-liner. There's also a community-curated repository of snippets for developers that contains useful snippets such as color pickers, CSS prettyfiers, logging helpers and much more."

Google Improves Chrome DevTools for Developers

Google is always working on new and improved tools for developers of their products.

In July, Google released a new Dart Software Development Kit and Editor in beta to help developers create their code more quickly. The company also began experimenting with a new network protocol, called QUIC (Quick UDP Internet Connections), that could help speed up network connections in the future.

The new Dart SDK and Editor is in its first beta release and contains performance and productivity improvements aimed at helping developers automate their code creation, produce smaller JavaScript code and deploy Dart Web apps. The release notes for the new editor are now available, and the latest version of the Dart Editor can be downloaded at

In June, Google unveiled a new Cloud Playground environment where developers can quickly try out ideas on a whim, without having to commit to setting up a local development environment that's safe for testing coding experiments outside the production infrastructure. The new Cloud Playground is presently limited to supporting Python 2.7 App Engine apps.

Earlier in June, Google opened its Google Maps Engine API to developers so they can build consumer and business applications that incorporate the features and flexibility of Google Maps. By using the Maps API, developers can now use Google's cloud infrastructure to add their data on top of a Google Map and share that custom mash-up with consumers, employees or other users. The maps can then be shared internally by companies or organizations or be published on the Web.

Google also recently created a new Mobile Backend Starter that lets developers focus on building and selling their apps by automating the back end of apps development. The Mobile Backend Starter works with Google App Engine. The Mobile Backend Starter was first announced at the Google I/O 2013 Developers Conference, where it was the topic of the "From Nothing to Nirvana in Minutes: Cloud Backend for Your Android Application" presentation.

In January, Google announced that it was moving its Google Cloud Platform (GCP) over to the GitHub collaborative development environment to make it easier for software developers to contribute and continue the evolution of GCP. The GCP program has been growing since Google unveiled a new partner program in July 2012 to help business clients discover all of Google's available cloud services. GitHub is a rapidly growing collaborative software development platform for public and private code sharing and hosting.

Rocket Fuel