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.”

Page: 1 2

Todd R. Weiss

Freelance Technology Reporter for TechWeekEurope and eWeek

Recent Posts

Amazon Workers In North Carolina Reject Unionisation

Workers at Amazon warehouse near Raleigh vote against joining union, as company continues to challenge…

12 hours ago

China President Xi Meets With Top Tech Leaders

High-profile meeting with tech leaders seen as signal China is boosting tech sector after years…

13 hours ago

South Korea To Buy 10,000 GPUs For National AI Hub

South Korea hopes to gain leg up in international AI race with infusion of private…

13 hours ago

BYD, Geely, Great Wall Add DeepSeek AI To EVs

Chinese electric vehicle giants rush to incorporate DeepSeek AI tech to cars after it creates…

14 hours ago

South Korea Suspends DeepSeek From App Stores

South Korean data authority suspends Chinese AI start-up DeepSeek from Apple, Google app stores while…

14 hours ago

Google Puts ‘Profits Over Privacy’ With Tracking Change

Privacy advocates criticise Google over decision to allow companies to track users via digital fingerprints,…

15 hours ago