Browser Extensions Development (Chrome & Edge) · Lektion

Logging, Fehlerberichte und Diagnostik

Bauen Sie eine Schicht für Logging und Fehlerberichte auf, damit Sie Probleme in Extensions diagnostizieren können, die auf den Geräten realer Nutzer ausgeführt werden.

Logging, Fehlerberichte und Diagnostik ist eine kostenlose Browser Extensions Development (Chrome & Edge)-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Browser Extensions Development (Chrome & Edge)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

You Cannot Watch Every Console

Once your extension ships, you cannot open dev tools on every user's browser. A deliberate logging and error-reporting strategy is how you learn what is going wrong in the wild.

A Central Log Function

Wrap logging in one function so you can change behavior in a single place, add timestamps, and silence output in production.

function log(level, msg) {
  console[level]('[MyExt] ' + new Date().toISOString() + ' ' + msg)
}

Log Levels

Use distinct levels so you can filter noise. Common ones: debug, info, warn, and error.

log('warn', 'Quota nearly full')
log('error', 'Sync failed')

Catching Uncaught Errors

Add a global error handler in each context to capture exceptions you did not anticipate.

self.addEventListener('error', (e) => {
  log('error', e.message + ' @ ' + e.filename)
})

Catching Rejected Promises

Unhandled promise rejections are a common silent failure. Listen for unhandledrejection too.

self.addEventListener('unhandledrejection', (e) => {
  log('error', 'Unhandled: ' + e.reason)
})

Persisting a Log Ring Buffer

Keep the last N log entries in storage so users can export them when reporting a bug. Cap the size to avoid filling the quota.

async function persist(entry) {
  const { logs = [] } = await chrome.storage.local.get('logs')
  logs.push(entry)
  if (logs.length > 200) logs.shift()
  await chrome.storage.local.set({ logs })
}

Letting Users Export Logs

Add an options-page button that dumps stored logs to a downloadable file, making support requests far more useful.

const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' })
const url = URL.createObjectURL(blob)
chrome.downloads.download({ url, filename: 'myext-logs.json' })

Remote Error Reporting

For aggregate insight, POST anonymized error reports to your own endpoint. Always make this opt-in and strip personal data.

fetch('https://errors.example.com', {
  method: 'POST',
  body: JSON.stringify({ msg, version })
})

Respecting Privacy

Never log page contents, URLs with tokens, or anything sensitive. Disclose any remote reporting in your privacy policy and store listing.

Silencing Logs in Production

Gate verbose logging behind a debug flag so release builds stay quiet and fast, while you can flip it on when investigating.

const DEBUG = false
function debug(msg) { if (DEBUG) log('debug', msg) }

Correlating Across Contexts

Tag each log with its source (popup, content, worker) so you can trace a bug that spans contexts and messaging.

log('info', '[worker] received PING')

Quick Check

Test your diagnostics knowledge.

Recap

You built a diagnostics layer:

Central log function with levels
Global error and unhandledrejection handlers
A capped log buffer in storage with export
Opt-in, privacy-safe remote reporting
A debug flag and per-context tagging

Good diagnostics turn mysterious field bugs into fixable reports.

Häufig gestellte Fragen

Ist die Lektion „Logging, Fehlerberichte und Diagnostik“ kostenlos?

Ja — der vollständige Text von „Logging, Fehlerberichte und Diagnostik“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Browser Extensions Development (Chrome & Edge)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Logging, Fehlerberichte und Diagnostik“?

Bauen Sie eine Schicht für Logging und Fehlerberichte auf, damit Sie Probleme in Extensions diagnostizieren können, die auf den Geräten realer Nutzer ausgeführt werden. Du übst Browser Extensions Development (Chrome & Edge) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Browser Extensions Development (Chrome & Edge) zu starten?

Keine Vorkenntnisse erforderlich. Browser Extensions Development (Chrome & Edge) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Logging, Fehlerberichte und Diagnostik“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Browser Extensions Development (Chrome & Edge)-Lektion Code schreiben und ausführen?

Ja. Jede Browser Extensions Development (Chrome & Edge)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Browser Extensions Development (Chrome & Edge)