Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more

Emulate Authenticators and Debug WebAuthn in Chrome DevTools

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

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.