Google Enhances Chrome Developer Tools

Google has updated its Chrome DevTools toolset for developers after the search giant added three new tools.

Google said the additions will make it easier for developers to write their code and produce their products.

Developer Update

The additions were unveiled in an 5 August 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.

Debugging Tool

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 colour pickers, CSS prettyfiers, logging helpers and much more.”