Logging, segnalazione degli errori e diagnostica
Costruite un livello di logging e segnalazione degli errori per diagnosticare i problemi nelle estensioni eseguite sui dispositivi degli utenti reali.
Logging, segnalazione degli errori e diagnostica è una lezione Browser Extensions Development (Chrome & Edge) gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Browser Extensions Development (Chrome & Edge), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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
errorandunhandledrejectionhandlers - 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.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Logging, segnalazione degli errori e diagnostica» è gratuita?
Sì — il testo completo di «Logging, segnalazione degli errori e diagnostica» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Browser Extensions Development (Chrome & Edge), passa a CoddyKit PRO. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Cosa imparerò in «Logging, segnalazione degli errori e diagnostica»?
Costruite un livello di logging e segnalazione degli errori per diagnosticare i problemi nelle estensioni eseguite sui dispositivi degli utenti reali. Eserciti Browser Extensions Development (Chrome & Edge) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Browser Extensions Development (Chrome & Edge)?
Non è richiesta alcuna esperienza precedente. Browser Extensions Development (Chrome & Edge) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Logging, segnalazione degli errori e diagnostica»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Browser Extensions Development (Chrome & Edge)?
Sì. Ogni lezione Browser Extensions Development (Chrome & Edge) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Debug dei componenti dell'estensione
- Scrittura di unit test per le estensioni
- Strategie di ottimizzazione delle prestazioni
- Logging, segnalazione degli errori e diagnostica