Chromium Blog: March 2019

Debugging Websites in Chrome for iOS

Monday, March 25, 2019

Debugging web pages displayed in Chrome for iOS has always required building the project from source because the release version of WKWebView does not support Safari Remote Debugging. To help bridge the gap of missing developer support, we added the chrome://inspect page in M73 to locally view JavaScript logs. While building Chrome for iOS from source is still the best way to fully debug web pages, we hope that this tool will make it easier to troubleshoot some problems. Background When building Chrome for iOS from source, Safari Web Inspector can be used to debug a web page rendered in Chrome. However, this takes a non-trivial amount of effort which includes setting up a Chromium checkout, installing a current version of Xcode, and waiting for the build to complete. Additionally, a Mac with enough disk space to hold the code and tools is required. This barrier to debugging has led to bugs being filed for specific website failures on Chrome for iOS.
These bugs can be difficult to diagnose as they are generally based on a single failure case. Chrome developers most likely don’t know the website application well enough to fully understand what is causing the bug. Often, the reporter has even spent time to build a dedicated test page to more precisely understand the issue. The lack of debugging tools require developers to come up with alternative methods in order to debug their websites. Of course, nothing is wrong with filing bugs, and we certainly don’t want to discourage it, but we do want to improve the web developer experience. In-app JavaScript Console Enable JavaScript log collection by navigating to chrome://inspect in Chrome for iOS and leaving that tab open to collect logs. In another tab, reproduce the case for which you are interested. Then switch back to the chrome://inspect tab to view the collected logs. (Log collection will stop if the chrome://inspect page closes or navigates and logs will be lost as they are not persisted.)

Posted by Mike Dougherty, Chrome Engineer on iOS

Chrome 74 beta: reducing unwanted motion, private class fields, and feature policy API

Friday, March 22, 2019

ChromeStatus.com CSS prefers-reduced-motion media query

Media Queries Level 5@media (prefers-reduced-motion: reduce) { button { animation: none; } } Move Ya! Or maybe, don't, if the user prefers-reduced-motion! Private class fields#class IncreasingCounter { #count = 0; get value() { console.log('Getting the current value!'); return this.#count; } increment() { this.#count++; } } Public and private class fields JavaScript API for feature policyFeature-Policy headerallow attribute on an iframe

allowedFeatures() returns a list of features allowed by the current domain.

allowsFeature() returns a boolean indicating whether a specific feature is allowed by either the current domain or by the specified domain.

getAllowlistForFeature() returns a list of domains used on the current page that allow a specified feature.

Introduction to Feature Policy Other features in this release sampleRate option for the AudioContext constructorSets the "sampleRate" to a particular valueAudioContext Intl.Localenow supports the Intl.Locale class

Parsing and manipulating the language, region, and script of a locale

Reading or writing the Unicode extension tags in a locale

Storing user locale preferences for this API in a serializable, standard format (rather than using a combination of language and the options object).

Signed exchange reporting for distributorsSigned Exchange Reporting for distributorsNetwork Error Logging TextEncoder encodeInto() methodnow supports TextEncoder.prototype.encodeInto()encode() Service worker: client.postMessage() is buffered until the document is ready.prevent messages from being delivered before the destination is readyclient.postMessage()

DOMContentLoaded event is fired.

onmessage is set.

startMessages() is called.

Specification compliance CSS transition eventstransitionruntransitionstarttransitionendtransitioncancelnow follows the specification RTCIceCandidate and RTCIceCandidateInitRTCIceCandidateRTCIceCandidateInitnow comply with the specificationRTCIceCandidate XHR falls back to UTF-8 when invalid encoding is specifiedoverrideMimeType()UTF-8 is used in conformance with the specificationNote: Deprecations and removals Remove PaymentAddress's languageCode propertyremoved from the Payment Request API Deprecate drive-by downloads in sandboxed iframesprevent downloads in sandboxed iframesallow-downloads-without-user-activation

Chrome Lite Pages - For a faster, leaner loading experience

Tuesday, March 12, 2019

Browsing the web with poor connectivity can be a frustrating, slow, and expensive experience.
Chrome on Android’s Data Saver feature helps by automatically optimizing web pages to make them load faster. When users are facing network or data constraints, Data Saver may reduce data use by up to 90% and load pages two times faster, and by making pages load faster, a larger fraction of pages actually finish loading on slow networks. Now, we are securely extending performance improvements beyond HTTP pages to HTTPS pages and providing direct feedback to the developers who want it.
To show users when a page has been optimized, Chrome now shows in the URL bar that a Lite version of the page is being displayed. Users can tap this indicator to see more information and to access an option to load the original version of the page. Chrome automatically disables Lite pages on a per-site or per-user basis when it detects that users frequently opt to load the original page.

How do Lite pages work?
We use built-in optimizations and Google servers to improve page loading. The specific optimization techniques depend on what region the user is in and on how the developer wrote and served that particular page. When Chrome optimizes an HTTPS page, only the URL is shared with Google; other information – cookies, login information, and personalized page content – is not shared with Google.
These optimizations are only applied when the loading experience would be painful to users. Specifically, they are applied when the network’s effective connection type is “2G” or “slow-2G,” or when Chrome estimates the page load will take more than 5 seconds to reach first contentful paint given current network conditions and device capabilities. Chrome applies these criteria equally to all pages. For all but the slowest sites, we expect this to affect a very small percentage of page loads.
What does this mean for developers?
To try out Lite pages on Chrome for Android, simply enable Data Saver from the settings menu and load a page on a very slow network.

If you’re using a faster network, set #force-effective-connection-type to any 2G option at chrome://flags. To prevent automatic disabling of the feature as a result of users opting out, enable #ignore-previews-blocklist.
We want developers to know when and why Lite pages are being shown, so starting with Chrome 72, you can implement intervention reports with the Reporting API, which detail when these optimizations are used.
Lite pages are only triggered for extremely slow sites, so we encourage developers to measure how well their pages are currently performing over slow networks. We recommend several tools to evaluate and improve a web page’s performance:

Lighthouse (part of Chrome DevTools) audits quality and performance.

PageSpeed Insights (part of the Chrome UX Report) indicates performance and suggests optimizations.

WebPageTest evaluates performance on a real device under various conditions.

In addition, web.dev is a guide for developers to learn about best practices for building fast and performant web experiences.
As we continue to improve this feature, we are providing an option to disable it on your site. Chrome will not show a Lite page if the original page’s main HTML response includes the ‘no-transform’ directive in the ‘cache-control’ header. If you use this option, please file a bug since we don’t intend for it ever to be necessary to opt out.
Posted by Ben Greenstein, Lite Pages Technical Lead and Nancy Gao, Product Manager, Chrome

Feb	MAR	Apr
	18
2021	2022	2023

Chromium Blog

Debugging Websites in Chrome for iOS

Chrome 74 beta: reducing unwanted motion, private class fields, and feature policy API

Chrome Lite Pages - For a faster, leaner loading experience

Labels

Archive

Feed