How to Use the WebAuthn Tab in Google Chrome DevTools to Emulate Authenticator Keys and Passkeys

Developing and testing passwordless authentication flows using WebAuthn and passkeys typically requires physical hardware tokens like YubiKeys or platform-specific biometric scanners (Touch ID or Windows Hello). When verifying edge cases—such as user presence timeouts, PIN verification, resident credentials, and device registration states—relying solely on physical devices introduces friction. Google Chrome provides a dedicated WebAuthn tab within DevTools that creates virtual software authenticators directly inside the browser session, allowing developers to emulate diverse credential configurations without extra hardware.

Enabling the WebAuthn Environment in Chrome DevTools

The WebAuthn tab is a specialized drawer utility within Chrome DevTools. Follow these steps to activate it:

1. Open Google Chrome and navigate to the web application or authentication endpoint you wish to test.
2. Press F12 (or Ctrl + Shift + I on Windows / Cmd + Option + I on macOS) to open DevTools.
3. Click the Customize and control DevTools menu (the three vertical dots in the top-right corner of DevTools).
4. Hover over More tools and select WebAuthn.
5. In the WebAuthn drawer that appears at the bottom of the interface, tick the checkbox next to Enable virtual authenticator environment.

Configuring Virtual Authenticator Attributes

Once the virtual environment is active, Chrome overrides the browser’s native WebAuthn API calls and routes all credential requests through your defined software authenticators:

Adding and Managing Virtual Passkeys

To simulate user registration and authentication flows:

1. Configure the desired authenticator options in the New authenticator form and click Add.
2. Your new virtual authenticator appears in the active authenticators list, highlighted with a green indicator.
3. Trigger a registration event on your web application (e.g. navigator.credentials.create()). The virtual authenticator intercepts the challenge, generates a public-private keypair, and stores the credential locally.
4. Inspect the Credentials table under the authenticator card to review the generated Credential ID, User Handle, Sign Count, and Private Key.

Testing Edge Cases and User Verification Failure

A primary benefit of the virtual WebAuthn environment is testing boundary conditions that are hard to replicate on physical devices:

• Simulating User Verification Failure: Untick the Supports User Verification box on the active authenticator to verify how your client-side code handles NotAllowedError exceptions.
• Modifying Sign Counters: Manually adjust the Sign Count integer in the credentials table to test your server’s clone-detection heuristics and replay-attack defenses.
• Testing Multi-Authenticator Scenarios: Click New authenticator again to add multiple devices simultaneously (e.g. one internal platform authenticator and one usb roaming key) to ensure your UI displays the correct credential picker.

Automating WebAuthn Testing via Puppeteer and WebDriver

Chrome’s virtual authenticator environment integrates directly with browser automation frameworks via the Chrome DevTools Protocol (CDP):

// Puppeteer automation example for WebAuthn
const client = await page.target().createCDPSession();
await client.send('WebAuthn.enable');
const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
  options: {
    protocol: 'ctap2',
    transport: 'internal',
    hasResidentKey: true,
    hasUserVerification: true,
    isUserVerified: true
  }
});

// Trigger WebAuthn flow in your web application
await page.click('#register-passkey-button');