Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Emulate authenticators and debug WebAuthn

Published 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 here - webauthndemo.appspot.com/ (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, you will see a new section New authenticator.
Enable virtual authenticator environment

Add a virtual authenticator #

  1. On the New authenticator section, configure the options.
  2. Click on the Add button.
  3. You can now see a new section of 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 here - webauthndemo.appspot.com/.

  1. On the demo page, click on Register new credential to register a 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 button.

Export or remove a credential

Rename an authenticator #

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

Set the active authenticator #

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

Removing the currently active authenticator results in no authenticator being active.

To set an authenticator as the active authenticator, select the Active radio button of an authenticator.

Set active authenticator

Remove a virtual authenticator #

To remove a virtual authenticator, click the Remove button of the authenticator.

Remove authenticator

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.