Chrome 67 on desktop has a new feature called Site Isolation enabled by default. This article explains what Site Isolation is all about, why it’s necessary, and why web developers should be aware of it. What is Site Isolation? The internet is for watching cat videos and managing cryptocurrency wallets, amongst other things — but you wouldn’t want fluffycats.example to have access to your precious

Browsers have been able to deal with files and directories for a long time. The File API provides features for representing file objects in web applications, as well as programmatically selecting them and accessing their data. The moment you look closer, though, all that glitters is not gold. The traditional way of dealing with files Opening files As a developer, you can open and read files via th

Before we start: If you're unsure of the difference between "site" and "origin", check out Understanding "same-site" and "same-origin". The Referer header is missing an R, due to an original misspelling in the spec. The Referrer-Policy header and referrer in JavaScript and the DOM are spelled correctly. Summary Browsers are evolving towards privacy-enhancing default referrer policies, to provide a

AppCache Removal Begins Chrome 85 starts a spec-mandated turn down of AppCache in Chrome. For details and instructions for managing the transition gracefully, see Preparing for AppCache removal. For information on a feature that will help you identify uses of this and other deprecated APIs, see Know your code health Intent to Remove | Chrome Platform Status | Chromium Bug Reject insecure SameSite=

function wait(milliseconds) { return new Promise(resolve => setTimeout(resolve, milliseconds)); } const stream = new ReadableStream({ async start(controller) { await wait(1000); controller.enqueue('This '); await wait(1000); controller.enqueue('is '); await wait(1000); controller.enqueue('a '); await wait(1000); controller.enqueue('slow '); await wait(1000); controller.enqueue('request.'); control

What is the File System Access API? The File System Access API enables developers to build powerful web apps that interact with files on the user's local device, such as IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows them to read or save changes directly to files and folders on the user's device. Beyond reading and writing files, the Fi

Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where you can: Create your own content and distribute it in all sorts of ways without being restricted to the network Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct Carry your site on your own USB or even host it on your own local network The

Multi-client support in the Audits panel You can now use the Audits panel in combination with other DevTools features like Request Blocking and Local Overrides. For example, suppose that your Audits panel report says that your page's performance score is 70 and one of your biggest performance opportunities is eliminating render-blocking resources. Figure 1. The initial Performance score. Figure 2.

Copy element's styles Right-click a node in the DOM Tree to copy that DOM node's CSS to your clipboard. Figure 1. Copy element styles. Thanks Adam Argyle and VisBug for the inspiration. Visualize layout shifts Supposing you're reading a news article on your favorite website. As you're reading the page, you keep losing your place because the content is jumping around. This problem is called layout

The original GitHub issue for "Aborting a fetch" was opened in 2015. Now, if I take 2015 away from 2017 (the current year), I get 2. This demonstrates a bug in maths, because 2015 was in fact "forever" ago. 2015 was when we first started exploring aborting ongoing fetches, and after 780 GitHub comments, a couple of false starts, and 5 pull requests, we finally have abortable fetch landing in brows

Browser vendors and web performance experts have been saying for the better part of the last decade that localStorage is slow, and web developers should stop using it. To be fair, the people saying this are not wrong. localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive. The problem is the localStorage AP

It's consistently fast, yo In my previous articles I talked about how WebAssembly allows you to bring the library ecosystem of C/C++ to the web. One app that makes extensive use of C/C++ libraries is squoosh, our web app that allows you compress images with a variety of codecs that have been compiled from C++ to WebAssembly. WebAssembly is a low-level virtual machine that runs the bytecode that is

Here's what's new in DevTools in Chrome 73. Video version of these release notes Logpoints Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls. To add a logpoint: Right-click the line number where you want to add the Logpoint. Figure 1. Adding a Logpoint Select Add logpoint. The Breakpoint Editor pops up. Figure 2. The Breakpoint Editor In the Brea

In Chrome 71, we've added support for: Displaying relative times is now part of the Intl API. Specifying which side of the text the underline should appear on for text that flows vertically. Requiring user activation before using the speech synthesis API. And there's plenty more! I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 71! Change log This covers only some of the

Input is coming to the Compositor This is the last of the 4 part blog series looking inside of Chrome; investigating how it handles our code to display a website. In the previous post, we looked at the rendering process and learned about the compositor. In this post, we'll look at how compositor is enabling smooth interaction when user input comes in. Input events from the browser's point of view

Signed HTTP Exchange (or "SXG") is a subset of the emerging technology called Web Packages, which enables publishers to safely make their content portable, i.e. available for redistribution by other parties, while still keeping the content’s integrity and attribution. Portable content has many benefits, from enabling faster content delivery to facilitating content sharing between users, and simple

Internet memes tagged "autoplay" found on Imgflip and Imgur. New behaviors As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit

New to DevTools in Chrome 68: Eager Evaluation. As you type expressions, the Console previews the result. Argument hints. As you type functions, the Console shows you the expected arguments for that function. Function autocompletion. After typing a function call such as document.querySelector('p'), the Console shows you the functions and properties that the return value supports. ES2017 keywords i

Let's talk about... architecture? I'm going to cover an important, but potentially misunderstood topic: The architecture that you use for your web app, and specifically, how your architectural decisions come into play when you're building a progressive web app. "Architecture" can sound vague, and it may not be immediately clear why this matters. Well, one way to think about architecture is to ask