Emulate Authenticators and Debug WebAuthn in Chrome DevTools

By Fawaz Mohammad

Software Development Intern working on Chrome Web Identity and DevTools

By Jecelyn Yeen

Developer advocate working on Chrome DevTools at Google

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 tools > WebAuthn to open the 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.

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.

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

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.

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.

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.

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.

Remove a virtual authenticator

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

Feedback