Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

WebAuthn: Emulate authenticators

Published on Updated on

Use the WebAuthn tab in Chrome DevTools to create and interact with software-based virtual authenticators.

Open the WebAuthn tab

  1. Visit a page that uses WebAuthn, such as our demo page (please login to access the page).
  2. Open DevTools.
  3. Click More Options More > More tools > WebAuthn to open the WebAuthn tab.
WebAuthn tab

Enable the virtual authenticator environment

  1. On the WebAuthn tab, click to enable the checkbox Enable virtual authenticator environment.
  2. Once enabled, the New authenticator section appears.
Enable virtual authenticator environment

Add a virtual authenticator

To add a new virtual authenticator:

  1. In the New authenticator section, configure the following options:

    1. Protocol: ctap2 (Client to Authenticator Protocol) or u2f (Universal 2nd Factor)
    2. Transport: usb, nfc, ble, or internal
    3. Supports resident keys
    4. Supports user verification
    5. Supports large blob, available only for ctap2 protocol with resident keys support

    For example:

    Adding a new virtual authenticator.
  2. Click the Add button.

  3. You can now see a section with your newly-created authenticator. Authenticator

The Authenticator section includes a Credentials table. The table is empty until a credential is registered to the authenticator.

No credentials

Register a new credential

To register a new credential, you need to have a web page that uses WebAuthn, for example, our demo page.

  1. On the demo page, click Register new credential.
  2. A new credential is now added to the Credentials table in the WebAuthn tab.
View credentials

On the demo page, you can click the Authenticate button multiple times. Observe the Credentials table. The Sign Count of the credential will increase accordingly.

Export and remove credentials

You can export or remove a credential by clicking the Export or Remove buttons.

Export or remove a credential

Rename an authenticator

  1. To rename an authenticator, click the Edit button next to the authenticator's name.
  2. Edit the name, then click Enter to save the changes.
Rename an authenticator

Activate an authenticator

A newly created authenticator is set to active automatically. DevTools supports only one active virtual authenticator at any point of time.

To deactivate authentication, remove the currently active authenticator.

To activate an authenticator, select its Active radio button.

Set active authenticator

Remove a virtual authenticator

To remove a virtual authenticator, click its Remove button.

Remove authenticator

Updated on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.