![Fawaz Mohammad](https://web.dev/images/authors/fawazm.jpg) Fawaz Mohammad [GitHub](https://github.com/fawazmohammad) ![Jecelyn Yeen](https://web.dev/images/authors/jecelynyeen.jpg) Jecelyn Yeen [X](https://twitter.com/jecfish) [GitHub](https://github.com/jecfish) [Bluesky](https://bsky.app/profile/jec.fish) [Homepage](https://jec.fish/) ![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

Use the **WebAuthn** panel to create and interact with software-based virtual
authenticators.

## Overview

The **WebAuthn** panel lets you add, rename, and remove authenticators. Register credentials, which are like users, to an authenticator and monitor **IDs** , **User Handles** and **Sign Counts** as you test.

## Open the WebAuthn panel

1. Visit a page that uses WebAuthn, such as our [demo page](https://try-webauthn.appspot.com) (please login to access the page).
2. [Open DevTools](https://developer.chrome.com/docs/devtools/open).
3. Open the **Command menu** by pressing:
   - macOS: <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>
   - Windows, Linux, ChromeOS: <kbd>Control</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>
4. Start typing `webauthn`, select **Show WebAuthn** , and press <kbd>Enter</kbd>.

Alternatively, in the top right corner, click **More Options** ![More](https://developer.chrome.com/static/docs/devtools/webauthn/image/more-3775331e721da.png) \> **More tools** \> **WebAuthn** to open the **WebAuthn** panel.

![WebAuthn panel](https://developer.chrome.com/static/docs/devtools/webauthn/image/webauthn-tab-78a1bc6540bc9.png)

## Enable the virtual authenticator environment

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

![Enable virtual authenticator environment](https://developer.chrome.com/static/docs/devtools/webauthn/image/enable-virtual-authentica-683cd60113652.png)

## Add a virtual authenticator

To add a new virtual authenticator:

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

   1. [**Protocol**](https://w3c.github.io/webauthn/): `ctap2` (Client to Authenticator Protocol) or `u2f` (Universal 2nd Factor)
   2. [**Transport**](https://w3c.github.io/webauthn/#dom-publickeycredentialdescriptor-transports): `usb`, `nfc`, `ble`, or `internal`
   3. [**Supports resident keys**](https://w3c.github.io/webauthn/#dom-authenticatorselectioncriteria-requireresidentkey)
   4. [**Supports user verification**](https://w3c.github.io/webauthn/#enumdef-userverificationrequirement)
   5. [**Supports large blob**](https://fidoalliance.org/specs/fido-v2.1-ps-20210615/fido-client-to-authenticator-protocol-v2.1-ps-20210615.html#sctn-largeBlobKey-extension), available only for `ctap2` protocol with resident keys support

   For example:

   ![Adding a new virtual authenticator.](https://developer.chrome.com/static/docs/devtools/webauthn/image/adding-new-virtual-authe-b2810f60698f6.png)
2. Click the **Add** button.

3. You can now see a section with your newly-created authenticator.
   ![Authenticator](https://developer.chrome.com/static/docs/devtools/webauthn/image/authenticator-ed9154a945eaf.png)

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

![No credentials](https://developer.chrome.com/static/docs/devtools/webauthn/image/no-credentials-0b8720f65d127.png)

### Register a new credential

To register a new credential, you need to have a web page that uses WebAuthn, for example, our [demo
page](https://try-webauthn.appspot.com).

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

![View credentials](https://developer.chrome.com/static/docs/devtools/webauthn/image/view-credentials-058608b2a1ad5.png)

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](https://developer.chrome.com/static/docs/devtools/webauthn/image/export-remove-credentia-961c317ba160b.png)

## 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](https://developer.chrome.com/static/docs/devtools/webauthn/image/rename-authenticator-680d847c2a7ba.png)

## 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](https://developer.chrome.com/static/docs/devtools/webauthn/image/set-active-authenticator-678d8cbd9fdcd.png)

## Remove a virtual authenticator

To remove a virtual authenticator, click its **Remove** button.

![Remove authenticator](https://developer.chrome.com/static/docs/devtools/webauthn/image/remove-authenticator-c30d855c11e5e.png)