Sam is a Developer Advocate
Find And Fix Problems With The Chrome DevTools Issues Tab
Use the Issues Tab to find and fix problems with your website.
Prework
Before gathering performance metrics for a site audit, there are several checks you can do to identify easy fixes and areas for focus. Some of these checks are relatively subjective, but can identify problems that affect perceived performance.
Auditing Performance
Auditing your site or app will help you build a resilient, performant experience — and highlight quick wins that can be implemented with minimal sign-off. An audit also gives you a baseline for data-driven development. Did a change make things better? How does your site compare with competitors? You get metrics to prioritize effort, and concrete evidence to brag about once you've made improvements.
Use tools to measure performance
There are several core objectives for building a performant, resilient site with low data cost. For each objective, you need an audit.
Check site security
You won't be able to build a PWA without HTTPS. Serving your site over HTTPS is fundamental for security, and many APIs won't work without it. If you need to justify implementation costs, find out why HTTPS matters.
Next steps
Having completed a site audit, you should have accurate review data in a form that makes it easy for developers and other stakeholders to prioritize and justify changes.
Share the results
Once you've audited a site, make sure to package the results in a digestible form. Be sensitive to the people on the receiving end of your audit, structure your report carefully and present your data in terms of opportunities and solutions.
Take Photos and Control Camera Settings
Image Capture is an API to control camera settings and take photos.
Capture a MediaStream From a Canvas, Video or Audio Element
The captureStream() method makes it possible to capture a MediaStream from a canvas, video or audio element.
Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs!
Muted autoplay for video is supported on Android from Chrome 53. Previously, a video element required a user gesture to initiate playback.
ECDSA for WebRTC: Better Security, Better Privacy and Better Performance
From version 52, Chrome uses ECDSA by default — a much more efficient and secure algorithm for WebRTC certificate key generation. In addition, RTCCertificates can now be stored with IndexedDB.
Service Worker Caching, PlaybackRate and Blob URLs for Audio and Video on Chrome for Android
From version 52, Android Chrome uses the same media stack as desktop Chrome, rather than relying on the underlying platform implementation. This enables service worker media caching, variable playback rates, blob URLs on Android, MediaStream passing between APIs, and easier cross-platform debugging.
Multi-Device Content
Consider content as well as layout and graphic design when building for a range of users and devices.
Understanding Low Bandwidth and High Latency
It's important to understand what using your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help you.
Media Source API: Automatically Ensure Seamless Playback of Media Segments in Append Order
The Media Source API enables JavaScript to construct media streams for playback. From Chrome 50, it's possible to use SourceBuffer sequence mode to ensure media segments are automatically relocated in the timeline in the order they were appended, without gaps between them.
Record Audio and Video with MediaRecorder
The MediaRecorder API enables you to record audio and video from a web app. It's available now in Firefox and in Chrome for Android and desktop.
VP9 Is Now Available in WebRTC
From Chrome 48 on desktop and Android, VP9 will be an optional video codec for video calls using WebRTC.
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.
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().
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.
The EME Logger Extension
EME Logger is a Chrome extension that logs Encrypted Media Extensions (EME) events and calls to the DevTools console.
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.
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.
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.
Chrome Dev Summit: Open Web Platform Summary
The capabilities of the Open Web Platform is accelerating at a pace that has never been seen before. At the Chrome Dev Summit we talked about how we are working on improving Blink, Security and Media for the platform
Alpha transparency in Chrome video
WebM just added alpha transparency, and support for it has landed in Chrome 31.