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

Apple, Google Mobile Ecosystems Should Be Investigated, CMA Told

CMA receives 'provisional recommendation' from independent inquiry that Apple,Google mobile ecosystem needs investigation

1 day ago

Australia Rejects Elon Musk Claim About Social Media Ban For Under-16s

Government minister flatly rejects Elon Musk's “unsurprising” allegation that Australian government seeks control of Internet…

2 days ago

Northvolt Files For Bankruptcy Protection In US

Northvolt files for Chapter 11 bankruptcy protection in the United States, and CEO and co-founder…

2 days ago

UK’s CMA Readies Cloud Sector “Behavioural” Remedies – Report

Targetting AWS, Microsoft? British competition regulator soon to announce “behavioural” remedies for cloud sector

2 days ago

Former Policy Boss At X, Nick Pickles, Joins Sam Altman Venture

Move to Elon Musk rival. Former senior executive at X joins Sam Altman's venture formerly…

2 days ago

Bitcoin Rises Above $96,000 Amid Trump Optimism

Bitcoin price rises towards $100,000, amid investor optimism of friendlier US regulatory landscape under Donald…

2 days ago