Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Web Updates (2015)

Google Cast for Chrome on Android

Chrome on Android now allows mobile sites to present to Google Cast devices using the Presentation API and the Cast Web SDK.

Read more

Tags: news audio video media secondscreen

Getting Started with Progressive Web Apps

Learn how to get started building Progressive Web Apps

Read more

Tags: progressive-web-apps serviceworker

Security Panel Debuts in Chrome DevTools

Learn all about the new Security Panel in Chrome DevTools.

Read more

Tags: devtools update

Introducing Background Sync

Background sync is a new web API that lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent.

Read more

Tags: serviceworker

Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling

Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().

Read more

Tags: news audio video media webrtc getusermedia

DevTools Digest (CDS Edition): A Glimpse into the Future and RAIL Profiling

Learn how DevTools is going mobile first with a new, streamlined Device Mode that’s always on. Use the color buttons to quickly add colors to your selectors and find out what’s coming to DevTools soon.

Read more

Tags: devtools digest update

Instant Loading Web Apps with an Application Shell Architecture

Application shell architecture is a method of building progressive web apps today, taking advantage of a range of technologies.

Read more

Tags: app-shell serviceworker

DevTools Digest: Efficient Element Edits, Service Worker Debugging, and Material Design Shades

Use the DOM panel’s new context menu to efficiently edit nodes. Debug services workers directly via the Resources panel. Choose from all of the Material Design shades in the colorpicker. Blackbox JS libraries more easily.

Read more

Tags: devtools digest update

Web Animations Resources

Resources and more for the Web Animations API

Read more

Tags: webanimations

Understanding when and how Touch to Search is triggered

Read more

Tags: news touch search

Notification requireInteraction - A Smoother Notification UX on Desktop

Notifications on desktop will be automatically dismissed after a short period of time.

Read more

Tags: notifications

Detecting If a Web App Is Launched from the Home Screen

Detecting if a web app is launched from the home screen

Read more

Tags: news addtohomescreen

Adding a Splash Screen for Installed Web Apps in Chrome 47

Chrome 47 introduces a splash screen to web apps added to the home screen

Read more

Tags: news splashscreen addtohomescreen

DevTools Digest: Tab Reordering, Console is #2 and Framework Event Listeners

Re-order DevTools tabs which ever way suits you best and see exactly where framework events were bound.

Read more

Tags: devtools digest update

Input Device Capabilities

A simpler method to rationalize your mouse and touch logic for when there is no PointerEvents

Read more

Tags: input news

Choose Cameras, Microphones and Speakers from Your Web App

The MediaDevices interface gives access to input and output devices available to the browser including cameras, microphones and speakers.

Read more

Tags: news audio video media webrtc getusermedia

The EME Logger Extension

EME Logger is a Chrome extension that logs Encrypted Media Extensions (EME) events and calls to the DevTools console.

Read more

Tags: news audio video media eme

Updates to the Service Worker Cache API

Chrome 46 brought new methods to caches, as does Chrome 47, and probably 48. It never stops.

Read more

Tags: news serviceworker cache

History API: Scroll Restoration

An update to the History API to prevent unsightly scroll jumping.

Read more

Tags: news history

Automating Resource Selection with Client Hints

Image optimization is hard and automation is the key to success.

Read more

Tags: news performance clienthints

Rolling out Public Key Pinning with HPKP Reporting

Chrome 46 ships with a feature called HPKP reporting, which can help you roll out a stricter form of SSL for your site.

Read more

Tags: news security hpkp

Tab Discarding in Chrome: A Memory-Saving Experiment

Reducing Chrome's memory footprint is one of the team's top priorities this year.

Read more

Tags: news performance update

Using the web app manifest to specify a site wide theme colour

Set a theme-color in the manifest and have it available to all pages on your site when launched from the home screen.

Read more

Tags: news webapp manifest

Using the web app manifest to create a solid color loading screen

Improve your perceived loading performance for web apps launched from the home screen.

Read more

Tags: news manifest webapp

Using requestIdleCallback

requestIdleCallback is new performance API for scheduling work when the browser is idle.

Read more

Tags: news performance update

The larger-than advanced Network Panel filter, and a few others

Did you know that the filter in the Network panel supports a few nifty custom search labels?

Read more

Tags: devtools

DevTools Digest: Aggregated Timeline Details, Color Palettes and More

Find out which third-party scripts cause perf issues with the Aggregated Details in Timeline, how to choose consistent colors with the new color palette and much more.

Read more

Tags: devtools digest update

Simple keyboard tricks to use in the Styles Pane

Learn how to effectively navigate the Styles Pane with a few useful keyboard tricks.

Read more

Tags: devtools

New Release of Material Design Lite - 1.0.4

There is a new release of Material Design Lite, bringing a host of bug fixes and improvements to the build process.

Read more

Tags: news mdl release

Using poster images on plugin content

Chrome can now add custom poster images to object elements to improve percieved loading performance of plugins such as Flash.

Read more

Tags: news poster flash performance

Easily duplicate DOM nodes

You can easily change the DOM without having to edit the HTML as a giant string.

Read more

Tags: devtools

Edit HTML in the Console Panel

The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel.

Read more

Tags: devtools

Five tricks to use in the Console Panel

Read more

Tags: devtools

A new home for DevTools

We've moved into our shiny new home at developers.google.com/web/tools/chrome-devtools and have great new tutorials and tips for you.

Read more

Tags: devtools announcement

Improved DOM breadcrumbs

Did you know the Elements Panel has a Breadcrumb trail?

Read more

Tags: devtools

Live-edit CSS in Sources

Did you know you can live edit CSS in Sources and have it update the page in real-time?

Read more

Tags: devtools

DevTools Digest: Film strip and a new home for throttling

Discover the new film strip functionality and more in this first of many DevTools Digest updates.

Read more

Tags: devtools digest update

Interact with Bluetooth devices on the Web

A Web API has been added to Chrome that makes it possible for websites to discover and communicate with devices over the Bluetooth 4 wireless standard using GATT.

Read more

Tags: news iot webbluetooth physicalweb origintrials

Add a new custom device as a preset

Do you frequently emulate devices of a certain dimension? In DevTools Device Mode, you can add new device presets.

Read more

Tags: devtools

MediaStream Deprecations

The MediaStream API represents synchronized streams of audio or video. MediaStream.ended, MediaStream.label and MediaStream.stop() are being deprecated. Use MediaStream.active, MediaStreamTrack.label and MediaStreamTrack.stop() instead.

Read more

Tags: news audio video media mediastream mediastreamtrack getusermedia rtcpeerconnection webrtc

Media playback notifications for Chrome on Android

When audio or video is playing on a web page, a notification showing the page title and a play/pause button is displayed in the notification tray and on the lock screen. The notification can be used to pause/resume play or return to the page playing the media.

Read more

Tags: news audio video android media notifications

Measuring Performance in a Service Worker

If you can't measure the performance of your requests in a service worker, how can you say it improves performance? Now you can answer that question with recent changes in Chrome.

Read more

Tags: news performance serviceworker

Using rotationAngle and touchRadius

A small set of changes have landed in Chrome 45 that will make it easier for developers to build better touch based apps

Read more

Tags: news android touch

Inspect and trigger CSS media queries

The Device Mode has a media query inspector built-in that allows for easier responsive design.

Read more

Tags: devtools

Shortcut to select the next occurrence

In the Sources Panel editor, you can select the next occurrence with Cmd + D.

Read more

Tags: devtools

Select and execute a block of code in the Sources Panel

Use the shortcut Ctrl + Shift + E to run a block of highlighted code in the Sources Panel.

Read more

Tags: devtools

Set a breakpoint based on a certain condition

When you set a breakpoint, you can make it conditional based on the result of an expression.

Read more

Tags: devtools

Quickly cycle through the DevTools panels

You can use Cmd+] (or Cmd+[) to cycle through the panels in the DevTools.

Read more

Tags: devtools

You can use console.trace() to get a quick and easy stack trace to better understand code execution flow.

Read more

Tags: devtools

Who inspects the inspector?

Did you know you can inspect your DevTools with DevTools?

Read more

Tags: devtools

Trigger a pseudo class on an element

Ever tried to debug CSS hover effects but failed keeping the mouse on the element? Here's how to do it.

Read more

Tags: devtools

Project wide search with optional file scope

Learn the secret commands to search like a pro in DevTools.

Read more

Tags: devtools

Network colour groups

Learn about which colors match to which resource type to easy identify resources.

Read more

Tags: devtools

Preview JavaScript values inline while debugging

Learn how to preview the values of JavaScript variables in DevTools while debugging.

Read more

Tags: devtools

Quickly edit/view resources from the Elements panel

Read more

Tags: devtools

Media Source Extensions for Audio

Media Source Extensions (MSE) provide extended buffering and playback control for the HTML5 audio and video elements. While originally developed to facilitate Dynamic Adaptive Streaming over HTTP (DASH) based video players, MSE can be used for audio; specifically for gapless playback.

Read more

Tags: news audio codecs mse

Help users checkout faster with Autofill

Help users checkout faster with Autofill. We’ve found that by correctly using autocomplete attributes on your forms, users complete them up to 30% faster!

Read more

Tags: news forms autofill monetization mobile

Notifying you of Changes to Notifications

2 new API's have been added in Chrome 44 which makes using Notifications with push easier to work with and customize.

Read more

Tags: news webpush notifications data

Alt + Click to expand all child nodes

Read more

Tags: devtools

Better Incognito DevTools

Some appearance preferences are now persisted through to incognito windows.

Read more

Tags: devtools

Command click to add multiple cursors in the Sources Panel

Learn how to to multi-cursor editing in the DevTools sources panel.

Read more

Tags: devtools

Copy image as data URI

Right click on an image preview within the Resources Panel to copy it as a Data URI (base 64 encoded).

Read more

Tags: devtools

Quick-edit element tags

You can double click on the opening tag name of a node in the Elements Panel to edit it.

Read more

Tags: devtools

Quickly monitor events from the Console Panel

You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]).

Read more

Tags: devtools

Reveal in Elements panel

Reveal DOM nodes in the Elements panel from the Console.

Read more

Tags: devtools

See matching selectors

When you are viewing a selector in the Styles Pane, comma separated selector portions are colored differently depending on whether or not they match the selected DOM node.

Read more

Tags: devtools

Some UI and feature enhancements to the Colour Picker tool

Read more

Tags: devtools

The currently selected DOM node

Learn the quick console shortcut to get the currently selected DOM node.

Read more

Tags: devtools

The easing editor

Select an easing CSS property to get a visual animated preview for how it behaves.

Read more

Tags: devtools

Toggle the DevTools dock state with a keyboard shortcut

Use Cmd + Shift + D to toggle the DevTools dock state between the last two recently used states.

Read more

Tags: devtools

Unfinished network requests

You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).

Read more

Tags: devtools

Use keyboard to navigate through callstack

How to set a breakpoint and navigate through the call stack with keyboard shortcuts.

Read more

Tags: devtools

Get and debug event listeners

Get and debug event listeners in DevTools with these console commands.

Read more

Tags: devtools

Automatically pause on any exception

In the DevTools, you can automatically pause on any exception (especially useful for uncaught exceptions).

Read more

Tags: devtools

Quickly change CSS values

Quickly change CSS values with the keyboard or mousewheel

Read more

Tags: devtools

Autocomplete for bracket notation

Did you know you can autocomplete bracket notation in the Sources panel?

Read more

Tags: devtools

Replay a network request in cURL

Learn how to debug a network request from the command line.

Read more

Tags: devtools

View and change your DOM breakpoints

How to view and change your DOM breakpoints with the Breakpoints pane in DevTools.

Read more

Tags: devtools

Scroll elements into the viewport

If an element you're inspecting is out of view, here's how to bring it into the viewport.

Read more

Tags: devtools

Film strips in Network panel

Visually navigate the network panel and view captured screenshots during page load

Read more

Tags: devtools

Triggering of pseudo classes

Learn how to trigger pseudo classes such as :active to properly debug your CSS.

Read more

Tags: devtools

Expand CSS shorthand properties

In the styles pane, you can expand CSS shorthand properties like flex or padding and see the full range of properties which are defined for you.

Read more

Tags: devtools

Port forwarding

DevTools port forwarding enables even localhost URLs to work on mobile.

Read more

Tags: devtools mobile

Search DOM tree by CSS selector

When browsing the DOM with the Elements panel, try searching for nodes via CMD/Ctrl+F by their CSS selectors.

Read more

Tags: devtools

Get notified of JS errors while you type

If you get an error in the console panel, click it to reveal the line in the Sources Panel where an indication of the error pops up.

Read more

Tags: devtools

Easy timeline recording

Try undocking DevTools to a separate window so the record button is positioned closely to the portion of the page where you need to carry out an action

Read more

Tags: devtools

Go to a line number at a specific column

Learn how to jump to specific line numbers in the Sources panel.

Read more

Tags: devtools

Easily jump to event listeners

Learn how to show the function definition of a registered event listener on any node.

Read more

Tags: devtools

High performance video with hardware decoding

Hardware video support brings efficient decoding to plugins as well as HTML5 video. Flash users should switch from the old style Video to the StageVideo object.

Read more

Tags: news video flash shaka-player eme mse hardware-decoding codecs

Granular statement highlights

See the exact executed statement with granular highlighting.

Read more

Tags: devtools

Local Modifications

Local modifications lets you see what changes have been made (via DevTools) to certain source files.

Read more

Tags: devtools

Hard reload

With DevTools opened, click and hold the reload button to see more options.

Read more

Tags: devtools

Cycle through editing locations

Your cursor position history is preserved in the Sources Panel, allowing you to cycle through previous editing locations with Alt+(backwards) or Alt+(forwards).

Read more

Tags: devtools

Copy the response of a network resource to your clipboard

In addition to copying the request/response headers of a network resource, you can also copy the response itself.

Read more

Tags: devtools

Perform a column selection by by dragging

You can make a column selection in the Sources Panel editor by holding Alt while dragging the mouse.

Read more

Tags: devtools

Predefined snippets

How to run predefined snippets of code on any web page.

Read more

Tags: devtools

Quick-edit element tags

You can double click on the opening tag name of a node in the Elements Panel to edit it.

Read more

Tags: devtools

Copy image as data URI

Right click on an image preview within the Resources Panel to copy it as a Data URI (base 64 encoded).

Read more

Tags: devtools

Reveal in Elements panel

Reveal DOM nodes in the Elements panel from the Console.

Read more

Tags: devtools

See matching selectors

When you are viewing a selector in the Styles Pane, comma separated selector portions are colored differently depending on whether or not they match the selected DOM node.

Read more

Tags: devtools

Quickly monitor events from the Console Panel

You can log all the events dispatched to an object using the Command Line API method monitorEvents(object [, events]).

Read more

Tags: devtools

Command click to add multiple cursors in the Sources Panel

Learn how to to multi-cursor editing in the DevTools sources panel.

Read more

Tags: devtools

Better Incognito DevTools

Some appearance preferences are now persisted through to incognito windows.

Read more

Tags: devtools

The currently selected DOM node

Learn the quick console shortcut to get the currently selected DOM node.

Read more

Tags: devtools

Alt + Click to expand all child nodes

Read more

Tags: devtools

Toggle the DevTools dock state with a keyboard shortcut

Use Cmd + Shift + D to toggle the DevTools dock state between the last two recently used states.

Read more

Tags: devtools

Unfinished network requests

You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).

Read more

Tags: devtools

The easing editor

Select an easing CSS property to get a visual animated preview for how it behaves.

Read more

Tags: devtools

Autocapitalize for mobile

Another text entry frustration for users is being removed.

Read more

Tags: news autocapitalize mobile

Cut and Copy Commands

The support for cut and copy commands allows you to programmatically cut and copy selected text to the users clipboard

Read more

Tags: news cutandcopy execcommand

DOM Attributes now on the prototype chain

Chrome is becoming in line with the spec. Check your sites if you are assuming the WebKit logic for attribute propagation

Read more

Tags: news dom

Permissions API for the Web

The Permissions API gives you a central place to check the permission status of an API.

Read more

Tags: news permissions

Simplified Concepts in Web Animations Naming

In response to developer feedback, some upcoming features of Web Animations are being renamed.

Read more

Tags: news webanimations

A new home for DevTools

We've moved into a shiny new home at developer.google.com/web have great new tutorials and tips for you.

Read more

Tags: devtools news outreach

DevTools Timeline: Now Providing the Full Story

We've upgraded the Timeline panel for Chrome DevTools to give developers more insight on their site’s runtime performance.

Read more

Tags: devtools timeline

Push Notifications on the Open Web

Push Messaging and Notifications are Landing in Chrome 42.

Read more

Tags: news webpush notifications serviceworker

Increasing Engagement with Web App Install Banners

Web App Manifest ✔︎, Service Worker ✔.Get ready for Web App Install banners

Read more

Tags: news addtohomescreen webapp install

Introduction to fetch()

The fetch() API is landing in the window object and is looking to replace XHRs

Read more

Tags: news fetch xhr

Creating semantic sites with Web Components and JSON-LD

Add schema.org markup to your components and make them search engine friendly.

Read more

Tags: news webcomponents json-ld

Offline-first, fast, with the sw-precache module

Add service worker-powered offline capabilities to your site with the sw-precache module.

Read more

Tags: news serviceworker offline cache performance

What the Virtual Viewport?

The virtual viewport separates layout and viewing of the viewport.

Read more

Tags: news virtualviewport

Chrome Dev Summit 2014: Let's build some apps with Polymer!

Building apps, the Polymer way.

Read more

Tags: news webcomponents polymer chromedevsummit

Getting Literal With ES6 Template Strings

Template String literals with embedded expressions. We've been waiting for this for ages. Literally

Read more

Tags: news es6 javascript ecmascript

image-rendering: pixelated

Pixelation of the nation. Now in Chrome 41

Read more

Tags: news css pixelated image-rendering

Chrome Dev Summit 2014: Polymer - State of the Union

The state of the Polymer Union.

Read more

Tags: news webcomponents polymer chromedevsummit

Chrome Dev Summit 2014: The Applied Science of Runtime Performance

The story of building the Chrome Dev Summit site.

Read more

Tags: news performance chromedevsummit frontend

Subscribe