Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Articles by Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

What's New In DevTools (Chrome 72)

Visualize performance metrics, highlight text nodes, copy the JS path to a node, and Audits panel updates.

What's New In DevTools (Chrome 71)

Highlight DOM nodes from Live expressions, store nodes as global variables, and more.

What's New In DevTools (Chrome 70)

Live Expressions in the Console, highlight DOM nodes during Eager Evaluation, and more.

Accessibility Reference

A comprehensive reference of accessibility features in Chrome DevTools.

Optimize Website Speed With Chrome DevTools

Learn how to use Chrome DevTools to find ways to make your websites load faster.

What's New In DevTools (Chrome 68)

Eager evaluation, argument hints, function autocompletion, Lighthouse 3.0, and more.

What's New In DevTools (Chrome 67)

Search across network headers, copy requests as fetch, audit pages using desktop conditions, and much more.

Save Changes To Disk With Workspaces

Learn how to save changes made within DevTools to disk.

Get Started With The Console

Learn how to view messages and run JavaScript in the Console.

What's New In DevTools (Chrome 66)

Blackboxing in the Network panel, auto-adjust zooming in Device Mode, and more.

Lighthouse 2.8 Updates

New perf and SEO audits, perf as the first section in reports, and more.

Using DevTools Features Without Opening DevTools

Use Puppeteer to launch Chromium with DevTools features enabled.

What's New In DevTools (Chrome 65)

Local Overrides, accessibility tools, performance and SEO audits, and more.

Sources Panel Overview

View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.

Lighthouse 2.7 Updates

New SEO audits and manual accessibility audits, and updates to the WebP audit.

What's New In DevTools (Chrome 63)

Multi-client remote debugging, push notifications with custom data, and Workspaces 2.0.

Get Started With Workbox For npm Script

Learn how to make an npm-script-based app work offline by adding Workbox to it.

Lighthouse 2.6 Updates

New performance audits, a rehaul of the accessibility score, report UX improvements, and bug fixes.

What's New In DevTools (Chrome 64)

Performance Monitor, Console Sidebar, and Console groupings.

Get Started With Workbox For Gulp

Learn how to make a gulp-based app work offline by adding Workbox to it.

Get Started With Workbox For Webpack

Learn how to make a webpack-based app work offline by adding Workbox to it.

What's New In DevTools (Chrome 62)

Top-level await operators in the Console, new screenshot workflows, CSS Grid highlighting, and more.

What's New In DevTools (Chrome 61)

New features and changes coming to DevTools in Chrome 61.

CSS Reference

Discover new workflows for viewing and changing CSS in Chrome DevTools.

Get Started With Viewing And Changing CSS

Learn how to use Chrome DevTools to view and change a page's CSS.

What's New In DevTools (Chrome 60)

New features and changes coming to DevTools in Chrome 60.

Performance Analysis Reference

A reference on all the ways to record and analyze performance in Chrome DevTools.

What's New In DevTools (Chrome 59)

New features and changes coming to DevTools in Chrome 59.

Get Started With Analyzing Runtime Performance

Learn how to evaluate runtime performance in Chrome DevTools.

What's New In DevTools (Chrome 58)

New features and changes coming to DevTools in Chrome 58.

Pause Your Code With Breakpoints

Learn about all the ways you can pause your code in Chrome DevTools.

UI Reference

A reference on how to access and use common parts of the DevTools UI, and change the UI's appearance.

Get Started with Analyzing Network Performance in Chrome DevTools

Get started analyzing network performance.

Get Started with Debugging JavaScript in Chrome DevTools

Learn how to use Chrome DevTools to find and fix JavaScript bugs.

JavaScript Debugging Reference

Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.

Network Issues Guide

Learn how to detect network issues in the Network panel of Chrome DevTools.

Chrome DevTools: JavaScript CPU Profiling in Chrome 58

"Record JavaScript CPU Profile" has been changed in Chrome 58.

DevTools Digest, October 2016

New Console features, updates on the context selector bug, and the new UC Browser user agent.

DevTools Digest, September 2016: Perf Roundup

Perf tooling improvements in DevTools over the last few Chrome releases.

DevTools Digest, August 2016

What happened to the Resources panel, new features, and community activity.

Debug Progressive Web Apps

Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.

DevTools Digest: DevTools in 2016 and Beyond

Big themes and trends for DevTools in 2016 and beyond.

Improving Scroll Performance with Passive Event Listeners

New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.

Inspect animations

Inspect and modify animations with the Chrome DevTools Animation Inspector.

Console API Reference

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

Find and Fix Web App Performance Issues

This codelab will help you learn to identify and fix web app performance bottlenecks.

Understand Security Issues

Use the Security Panel to ensure that all resources on your site are protected with HTTPS.

Why HTTPS Matters

You should always protect all of your websites with HTTPS, even if they don’t handle sensitive communications. HTTPS provides critical security and data integrity both for your websites and for the people that entrust your websites with their personal information.

Run Snippets Of Code From Any Page

Snippets are small scripts that you can author and execute within the Sources panel of Chrome DevTools. You can access and run them from any page. When you run a snippet, it executes from the context of the currently open page.

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 Use the Timeline Tool

Use the Chrome DevTools Timeline panel to record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.

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 different ways: Response, Animation, Idle, Load.

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.

Get Started with Remote Debugging Android Devices

Remote debug live content on an Android device from a Windows, Mac, or Linux computer.

Simulate Mobile Devices with Device Mode in Chrome DevTools

Use virtual devices in Chrome's Device Mode to build mobile-first websites.

Network Analysis Reference

A comprehensive reference of Chrome DevTools Network panel features.

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.

Diagnose Forced Synchronous Layouts

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

Edit Styles

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

Fix Memory Problems

Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.

How to step through your code

By executing code one line or one function at a time, you can observe changes in the data and in the page to understand exactly what is happening.

Inspect and Delete Cookies

Inspect and delete cookies from the Application panel.

Inspect and Edit Pages and Styles

Inspect and edit the HTML and CSS of your pages.

Inspect and Manage Storage, Databases, and Caches

Inspect and manage storage, databases, and caches from the Application panel.

Inspect Resources

Organize resources by frame, domain, type, or other criteria.

Make JavaScript Look Pretty

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

Measure Resource Loading Times

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

Speed Up JavaScript Execution

Identify expensive functions using the Chrome DevTools CPU Profiler.

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.