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

X’s Community Notes Fails To Stem US Election Misinformation – Report

Hate speech non-profit that defeated Elon Musk's lawsuit, warns X's Community Notes is failing to…

1 day ago

Google Fined More Than World’s GDP By Russia

Good luck. Russia demands Google pay a fine worth more than the world's total GDP,…

1 day ago

Spotify, Paramount Sign Up To Use Google Cloud ARM Chips

Google Cloud signs up Spotify, Paramount Global as early customers of its first ARM-based cloud…

2 days ago

Meta Warns Of Accelerating AI Infrastructure Costs

Facebook parent Meta warns of 'significant acceleration' in expenditures on AI infrastructure as revenue, profits…

2 days ago

AI Helps Boost Microsoft Cloud Revenues By 33 Percent

Microsoft says Azure cloud revenues up 33 percent for September quarter as capital expenditures surge…

2 days ago