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.
news audio video media secondscreen cast
Getting Started with Progressive Web Apps
Learn how to get started building Progressive Web Apps
progressive-web-apps serviceworker
Security Panel Debuts in Chrome DevTools
Learn all about the new Security Panel in Chrome DevTools.
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.
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().
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.
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.
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.
Web Animations Resources
Resources and more for the Web Animations API
Manage the Triggering of Touch to Search
Understanding when and how Touch to Search is triggered
Notification requireInteraction - A Smoother Notification UX on Desktop
Notifications on desktop will be automatically dismissed after a short period of time.
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.
Input Device Capabilities
A simpler method to rationalize your mouse and touch logic for when there is no PointerEvents
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.
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.
Updates to the Service Worker Cache API
Chrome 46 brought new methods to caches, as does Chrome 47, and probably 48. It never stops.
History API: Scroll Restoration
An update to the History API to prevent unsightly scroll jumping.
Tab Discarding in Chrome: A Memory-Saving Experiment
Reducing Chrome's memory footprint is one of the team's top priorities this year.
Automating Resource Selection with Client Hints
Image optimization is hard and automation is the key to success.
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.
Using the web app manifest to specify a site wide theme color
Set a theme-color in the manifest and have it available to all pages on your site when launched from the home screen.
Using requestIdleCallback
requestIdleCallback is new performance API for scheduling work when the browser is idle.
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?
Simple keyboard tricks to use in the Styles Pane
Learn how to effectively navigate the Styles Pane with a few useful keyboard tricks.
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.
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.
Using poster images on plugin content
Chrome can now add custom poster images to object elements to improve perceived loading performance of plugins such as Flash.
Easily duplicate DOM nodes
You can easily change the DOM without having to edit the HTML as a giant string.
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.
Five tricks to use in the Console Panel
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.
Improved DOM breadcrumbs
Did you know the Elements Panel has a Breadcrumb trail?
Live-edit CSS in Sources
Did you know you can live edit CSS in Sources and have it update the page in real-time?
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.
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.
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.
news audio video media mediastream mediastreamtrack getusermedia rtcpeerconnection webrtc
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.
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
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.
news audio video android media notifications
Inspect and trigger CSS media queries
The Device Mode has a media query inspector built-in that allows for easier responsive design.
Shortcut to select the next occurrence
In the Sources Panel editor, you can select the next occurrence with Cmd + D.
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.
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.
Quickly cycle through the DevTools panels
You can use Cmd+] (or Cmd+[) to cycle through the panels in the DevTools.
Print out a quick stack trace from the Console
You can use console.trace() to get a quick and easy stack trace to better understand code execution flow.
Who inspects the inspector?
Did you know you can inspect your DevTools with 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.
Project wide search with optional file scope
Learn the secret commands to search like a pro in DevTools.
Network color groups
Learn about which colors match to which resource type to easy identify resources.
Preview JavaScript values inline while debugging
Learn how to preview the values of JavaScript variables in DevTools while debugging.
Quickly edit/view resources from the Elements panel
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.
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!
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.
news webpush notifications data
Some UI and feature enhancements to the Color Picker tool
Alt + Click to expand all child nodes
Better Incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
Command click to add multiple cursors in the Sources Panel
Learn how to to multi-cursor editing in the DevTools sources panel.
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).
Quick-edit element tags
You can double click on the opening tag name of a node in the Elements Panel to edit it.
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]).
Reveal in Elements panel
Reveal DOM nodes in the Elements panel from the Console.
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.
The currently selected DOM node
Learn the quick console shortcut to get the currently selected DOM node.
The easing editor
Select an easing CSS property to get a visual animated preview for how it behaves.
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.
Unfinished network requests
You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).
Use keyboard to navigate through callstack
How to set a breakpoint and navigate through the call stack with keyboard shortcuts.
Get and debug event listeners
Get and debug event listeners in DevTools with these console commands.
Automatically pause on any exception
In the DevTools, you can automatically pause on any exception (especially useful for uncaught exceptions).
Quickly change CSS values
Quickly change CSS values with the keyboard or mousewheel
Autocomplete for bracket notation
Did you know you can autocomplete bracket notation in the Sources panel?
Replay a network request in cURL
Learn how to debug a network request from the command line.
View and change your DOM breakpoints
How to view and change your DOM breakpoints with the Breakpoints pane in 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.
Film strips in Network panel
Visually navigate the network panel and view captured screenshots during page load
Triggering of pseudo classes
Learn how to trigger pseudo classes such as :active to properly debug your CSS.
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.
Port forwarding
DevTools port forwarding enables even localhost URLs to work on 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.
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.
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
Go to a line number at a specific column
Learn how to jump to specific line numbers in the Sources panel.
Easily jump to event listeners
Learn how to show the function definition of a registered event listener on any node.
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.
news video flash shaka-player eme mse hardware-decoding codecs
Granular statement highlights
See the exact executed statement with granular highlighting.
Local Modifications
Local modifications lets you see what changes have been made (via DevTools) to certain source files.
Hard reload
With DevTools opened, click and hold the reload button to see more options.
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).
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.
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.
Predefined snippets
How to run predefined snippets of code on any web page.
Quick-edit element tags
You can double click on the opening tag name of a node in the Elements Panel to edit it.
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).
Reveal in Elements panel
Reveal DOM nodes in the Elements panel from the Console.
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.
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]).
Command click to add multiple cursors in the Sources Panel
Learn how to to multi-cursor editing in the DevTools sources panel.
Better Incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
The currently selected DOM node
Learn the quick console shortcut to get the currently selected DOM node.
Alt + Click to expand all child nodes
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.
Unfinished network requests
You can use the Is:running Advanced Network Filter to see unfinished network requests (e.g. running requests).
The easing editor
Select an easing CSS property to get a visual animated preview for how it behaves.
Autocapitalize for mobile
Another text entry frustration for users is being removed.
Cut and Copy Commands
The support for cut and copy commands allows you to programmatically cut and copy selected text to the users clipboard
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
Permissions API for the Web
The Permissions API gives you a central place to check the permission status of an API.
Simplified Concepts in Web Animations Naming
In response to developer feedback, some upcoming features of Web Animations are being renamed.
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.
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.
Push Notifications on the Open Web
Push Messaging and Notifications are Landing in Chrome 42.
news webpush notifications serviceworker
Introduction to fetch()
The fetch() API is landing in the window object and is looking to replace XHRs
Creating semantic sites with Web Components and JSON-LD
Add schema.org markup to your components and make them search engine friendly.
Offline-first, fast, with the sw-precache module
Add service worker-powered offline capabilities to your site with the sw-precache module.
news serviceworker offline cache performance
Getting Literal With ES6 Template Strings
Template String literals with embedded expressions. We've been waiting for this for ages. Literally
news es6 javascript ecmascript
Chrome Dev Summit 2014: Let's build some apps with Polymer!
Building apps, the Polymer way.
news webcomponents polymer chromedevsummit
What the Virtual Viewport?
The virtual viewport separates layout and viewing of the viewport.
image-rendering: pixelated
Pixelation of the nation. Now in Chrome 41
news css pixelated image-rendering
Chrome Dev Summit 2014: Polymer - State of the Union
The state of the Polymer Union.
news webcomponents polymer chromedevsummit
Chrome Dev Summit 2014: The Applied Science of Runtime Performance
The story of building the Chrome Dev Summit site.
