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

Latest contributions from Meggin Kearney

Save Credentials from Forms

Sign in Users

Store Credentials

The Credential Management API

Text Alternatives for Images

Using the alt attribute to provide text alternatives for images

ARIA Labels and Relationships

Using ARIA labels to create accessible element descriptions

DOM Order Matters

The importance of the default DOM order

Introduction to ARIA

Introduction to ARIA and non-native HTML semantics

Semantics and Navigating Content

The role of semantics in page navigation

Accessible Styles

Using proper styling to improve accessibility

Hiding and Updating Content

Hiding content from assistive technology

Introduction to Focus

Overview of screen focus in accessibility

Introduction to Semantics

Introduction to semantics and assistive technology

The Accessibility Tree

Introduction to the Accessibility Tree

Using tabindex

Modifying the DOM order with tabindex

Accessibility

Improving accessibility for web pages

Console API Reference

Use the Console API to write information to the console, create JavaScript profiles, and start a debugging session.

Set Up CSS and JS Preprocessors

Learn how to set up CSS & JS preprocessors to help you code more efficiently.

Set Up Persistence with DevTools Workspaces

Set up persistent authoring in Chrome DevTools so you can both see your changes immediately and save those changes to disk.

How to Record Heap Snapshots

Learn how to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.

Measure Performance with the RAIL Model

RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in very different ways: Response, Animation, Idle, Load.

Memory Terminology

This section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.

Using the Console

Learn how to navigate the Chrome DevTools JavaScript Console.

Edit the DOM

The DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through DOM updates.

Keyboard Shortcuts Reference

A reference of all of the keyboard shortcuts in Chrome DevTools.

Edit Styles

Use the Styles pane in Chrome DevTools to inspect and modify the CSS styles associated to an element.

Diagnose and Log to Console

Console logging is a powerful way to inspect what your page or application does. Let's start with console.log() and explore other advanced usage.

Diagnose Forced Synchronous Layouts

Follow along with this interactive guide to learn how to use DevTools to diagnose forced synchronous layouts.

Evaluate Expressions

Explore the state of any item on your page from the DevTools console.

Speed Up JavaScript Execution

Identify expensive functions using the Chrome DevTools CPU Profiler.

Command Line API Reference

A reference of convenience functions available in the Chrome DevTools Console.

Measure Resource Loading Times

Measure the network performance of your web application using the Chrome DevTools Network panel.

Optimize Performance Under Varying Network Conditions

It’s easy to overlook the network conditions your users will face on mobile. Use DevTools to emulate different network conditions. Fix any load time issues and your users will thank you.

Access Local Servers

Host a site on a development machine web server, and then access the content from an Android device.

Analyze Runtime Performance

Users expect pages to be interactive and smooth. Each stage in the pixel pipeline represents an opportunity to introduce jank. Learn about tools and strategies to identify and fix common problems that slow down runtime performance.

Emulate Sensors: Geolocation and Accelerometer

Touch screens, GPS chips, and accelerometers can be difficult to test since most desktops don't have them. The Chrome DevTools sensor emulators reduce the overhead of testing by emulating common mobile device sensors.

Test Responsive and Device-specific Viewports

Chrome DevTools' Device Mode lets you mimic how your development site will look in production on a range of devices.

Make JavaScript Look Pretty

Transform your JavaScript into a more readable form by clicking the Pretty-Print icon in Chrome DevTools.

Inspect and Edit Pages and Styles

Inspect and edit the HTML and CSS of your pages.

Monitor Events

The Chrome DevTools Command Line API offers various ways to observe and inspect event listeners

Remote Debugging WebViews

Debug WebViews in your native Android apps using Chrome Developer Tools.

How to Use the Allocation Profiler Tool

Use the allocation profiler tool to find objects that aren't being properly garbage collected, and continue to retain memory.

Exception and Error Handling

Chrome DevTools provides tools to help you fix web pages throwing exceptions and debug errors in your JavaScript.

Compare Similar Data Objects

Compare similar data objects using the table() method.

Measure and count executions

Take advantage of the Console API to measure execution times and count statement executions.

Timeline Event Reference

The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.

Map Preprocessed Code to Source Code

Keep your client-side code readable and debuggable even after you've combined, minified or compiled it.

Emulate and Test Other Browsers

Your job doesn't end with ensuring your site runs great across Chrome and Android. Even though Device Mode can simulate a range of other devices like iPhones, we encourage you to check out other browsers solutions for emulation.

Set Up Browser Extensions

Out of the box, every desktop browser comes with a set of developer tools, you can extend and add to these with extensions or plugins for your browser.

Set Up Your Build Tools

Build your multi-device site from the ground up. Learn how to speed up development and create a fast loading site with a set of build process tools.

Set Up Command Line Shortcuts

Set up shortcuts for the command line tasks you use over and over again. If you find yourself typing the same thing in your command line repeatedly, this will alleviate that.

Set Up Your Editor

Your code editor is your main development tool; you use it to write and save lines of code. Write better code faster by learning your editor's shortcuts and installing key plugins.