Your code uses browser APIs scheduled for removal. When browsers drop support, your site breaks. Fix them now.

What's happening

Browsers deprecate APIs when better alternatives exist or the API poses security risks. Deprecated APIs work for a grace period but eventually get removed. Lighthouse monitors Chrome's deprecation warnings to catch these early.

Chrome logs a warning when JavaScript calls a deprecated API. Lighthouse collects these warnings and fails the audit. Legacy DOM methods, outdated security APIs, and obsolete media features are common culprits.

Diagnose

Check DevTools Console

1. Open DevTools (F12) and go to the Console tab.
2. Look for yellow warnings mentioning "deprecated."
3. Click the warning to see the source location.

Typical deprecation warnings look like:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.storage' instead.
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated.
[Deprecation] 'document.domain' setter is deprecated.

Run Lighthouse

The Lighthouse "Uses deprecated APIs" audit lists each deprecation with:

• The deprecated API or feature.
• The source file and line number.
• Links to documentation about the replacement.

Search your codebase

Search your code for flagged APIs:

grep -r "webkitStorageInfo" --include="*.js" src/
grep -r "document.domain" --include="*.js" src/

Fix

1. Identify the modern replacement

Each deprecated API has a replacement. Use these fixes for common deprecations:

document.domain setter:

// Deprecated: relaxing same-origin policy
document.domain = 'example.com'

// Modern: use postMessage for cross-origin communication
window.parent.postMessage(data, 'https://example.com')

Synchronous XMLHttpRequest:

// Deprecated: blocks main thread
const xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false) // sync = false is deprecated

// Modern: use async fetch or XHR
async function fetchData() {
  const response = await fetch('/api')
  const data = await response.json()
  return data
}

webkitStorageInfo:

// Deprecated: webkit-prefixed storage API
// window.webkitStorageInfo.queryUsageAndQuota(...)

// Modern: Storage API
async function getStorage() {
  const estimate = await navigator.storage.estimate()
  console.log(`Using ${estimate.usage} of ${estimate.quota} bytes`)
}

Event.path:

// Deprecated: non-standard event property
const path = event.path || (event.composedPath && event.composedPath())

// Modern: use composedPath()
const modernPath = event.composedPath()

KeyboardEvent.keyCode:

// Deprecated: numeric key codes
if (event.keyCode === 13) { /* Enter */ }

// Modern: use key property
if (event.key === 'Enter') { /* Enter */ }

2. Handle third-party dependencies

If deprecation warnings come from third-party scripts:

# Check if the issue is from node_modules
# Lighthouse shows source file paths in the audit

# Option 1: Update the dependency
npm update problematic-package

# Option 2: Find an alternative package
npm uninstall old-package
npm install modern-alternative

# Option 3: If it's a CDN script, check for newer versions

3. Polyfill during transition

Polyfill the API to suppress warnings while you plan the migration if you can't replace it immediately.

// Temporary polyfill for Event.path
if (!Event.prototype.composedPath) {
  Event.prototype.composedPath = function () {
    const path = []
    let el = this.target
    while (el) {
      path.push(el)
      el = el.parentElement
    }
    path.push(document, window)
    return path
  }
}

Polyfills mask the problem but don't solve it. Plan a proper migration. Never rely on polyfills long-term.

Verify the fix

1. Clear browser cache and reload the page.
2. Open DevTools Console and confirm no deprecation warnings appear.
3. Run Lighthouse and verify "Avoids deprecated APIs" audit passes.
4. Test affected functionality with the new APIs.
5. If you updated dependencies, run your test suite.

Common mistakes

• Ignoring third-party scripts: Deprecation warnings from analytics, widgets, or ads fail the audit. Update vendors or find alternatives.
• Only fixing in development: Production bundles use different code paths. Test with production builds.
• Using deprecated APIs in feature detection: Checking if (window.webkitStorageInfo) can trigger deprecation warnings.
• Assuming deprecation means broken: Deprecated APIs work until they don't. They will break in a future browser update.
• Not checking polyfill sources: Some polyfill libraries use deprecated APIs. Audit your dependencies.

Test your entire site

Different pages load different scripts. A full site scan catches deprecations across all your JavaScript.