Chrome 41 Beta: New ES6 Features and Improved DevTools for Service Workers and Web Animations
Thursday, January 22, 2015
Today’s Chrome Beta channel release includes new Javascript ES6 features and improved workflows for debugging Service Workers and Web Animations. Unless otherwise noted, changes described below apply to Chrome for Android, Windows, Mac, Linux, and Chrome OS.
Template Literals, introduced in this release, aims to solve these problems. Its basic form adds string formatting into Javascript by providing syntactic sugar for concatenating strings, variables, and the results of functions. Specifically, expressions can be embedded directly into strings when using the backtick operator (`).
var name = "John";
var message = `Hello, ${name}!`; // Expected result: "Hello John!"
Any code contained within the braces and preceded by the dollar sign will automatically be evaluated and inserted into place.
var message = `1 + 1 = ${1 + 1}!`; // Expected result: "1 + 1 = 2!"
Besides accepting multi-line strings, Template Literals also introduces the concept of tagged templates which are useful for escaping HTML to prevent XSS attacks and when internationalizing a site.
In Chrome 40 we shipped Service Workers, enabling developers to make their sites load faster and work offline by intercepting network requests to deliver programmatic or cached responses. Until now, developers had to inspect their Service Worker’s cache manually by printing out its contents to the console, making debugging slow. Today’s Beta includes a new section in DevTools for viewing Service Worker caches which can be found by inspecting a Service Worker on chrome://serviceworker-internals.
As always, visit chromestatus.com/features for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates.
`Posted by ${"Erik Arvidsson"}, Software Engineer`
ES6 Template Literals
There are many pitfalls of working with strings on the modern web. The Javascript we know today lacks basic string formatting features, doesn’t support multi-line strings, and makes it difficult to protect users from XSS attacks when inserting user-generated content into pages.Template Literals, introduced in this release, aims to solve these problems. Its basic form adds string formatting into Javascript by providing syntactic sugar for concatenating strings, variables, and the results of functions. Specifically, expressions can be embedded directly into strings when using the backtick operator (`).
var name = "John";
var message = `Hello, ${name}!`; // Expected result: "Hello John!"
Any code contained within the braces and preceded by the dollar sign will automatically be evaluated and inserted into place.
var message = `1 + 1 = ${1 + 1}!`; // Expected result: "1 + 1 = 2!"
Besides accepting multi-line strings, Template Literals also introduces the concept of tagged templates which are useful for escaping HTML to prevent XSS attacks and when internationalizing a site.
New features in Chrome Developer Tools
Chrome 36 added Web Animations, unifying several of the animation APIs on the web. This release makes visual debugging easier by allowing developers to slow down playback of their animations on the fly within DevTools.In Chrome 40 we shipped Service Workers, enabling developers to make their sites load faster and work offline by intercepting network requests to deliver programmatic or cached responses. Until now, developers had to inspect their Service Worker’s cache manually by printing out its contents to the console, making debugging slow. Today’s Beta includes a new section in DevTools for viewing Service Worker caches which can be found by inspecting a Service Worker on chrome://serviceworker-internals.
Other updates in this release
- ES6 Lexical Declarations cause variables declared with the 'let' keyword to be scoped to their containing block instead of being hoisted to the top of their containing function, giving developers more control over Javascript's tricky scoping rules.
- The new CSS value image-rendering: pixelated allows scaled images to appear to be composed of very large pixels, trading smooth results for faster image scaling.
- CSS Media Queries now support any-pointer and any-hover, which function similarly to pointer and hover but can be triggered by any input device, not only the primary one.
- The Web Audio API now allows developers to temporarily suspend an AudioContext when it’s not in use, improving power consumption. StereoPannerNode is also now supported, enabling left-right panning of an incoming audio stream while maintaining equal power.
- HTTPS sites that have certificate chains using SHA-1 that are valid past January 1st, 2017 will be treated as “affirmatively insecure” in Chrome UI from this release onwards as part of our plan to gradually sunset SHA-1.
- Update February 13th: The new CSS values mix-blend-mode and isolation provide control over how an HTML or SVG element blends with the content behind it.
As always, visit chromestatus.com/features for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates.
`Posted by ${"Erik Arvidsson"}, Software Engineer`