Browser Extensions Development (Chrome & Edge) · Ders

Günlükleme, Hata Raporlama ve Tanılama

Gerçek kullanıcıların makinelerinde çalışan uzantılardaki sorunları tanılayabilmek için bir günlükleme ve hata raporlama katmanı oluşturun.

Günlükleme, Hata Raporlama ve Tanılama, CoddyKit'te ücretsiz bir Browser Extensions Development (Chrome & Edge) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Browser Extensions Development (Chrome & Edge) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Günlükleme, Hata Raporlama ve Tanılama” dersi ücretsiz mi?

Evet — “Günlükleme, Hata Raporlama ve Tanılama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Browser Extensions Development (Chrome & Edge) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.

“Günlükleme, Hata Raporlama ve Tanılama” dersinde ne öğreneceğim?

Gerçek kullanıcıların makinelerinde çalışan uzantılardaki sorunları tanılayabilmek için bir günlükleme ve hata raporlama katmanı oluşturun. Browser Extensions Development (Chrome & Edge) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Browser Extensions Development (Chrome & Edge) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Browser Extensions Development (Chrome & Edge), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Günlükleme, Hata Raporlama ve Tanılama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Browser Extensions Development (Chrome & Edge) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Browser Extensions Development (Chrome & Edge) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Browser Extensions Development (Chrome & Edge) Sayfasına Dön