Come segnalare un bug corretto del browser

Informare i fornitori di browser dei problemi riscontrati nel loro browser è parte integrante del miglioramento della piattaforma web.

Pete LePage
Robert Nyman

La segnalazione di un bug richiede un po' di lavoro. Il tuo obiettivo dovrebbe essere quello di rendere il più semplice possibile per gli ingegneri del browser trovare ciò che non funziona, risalire alla causa principale e, soprattutto, trovare un modo per risolvere il problema. I bug che vengono risolti rapidamente tendono a essere facili da riprodurre e hanno un comportamento previsto chiaro.

Verifica che si tratti di un bug

Il primo passaggio consiste nel capire quale dovrebbe essere il comportamento "corretto".

Qual è il comportamento corretto?

Consulta la documentazione dell'API pertinente su MDN o prova a trovare le specifiche correlate. Queste informazioni possono aiutarti a decidere quale API è effettivamente interrotta, dove si trova l'interruzione e qual è il comportamento previsto.

Funziona in un altro browser?

In genere, il comportamento che varia tra i browser ha una priorità più alta come problema di interoperabilità, soprattutto quando il browser contenente il bug è l'unico a presentarlo. Prova a eseguire il test sulle ultime versioni di Chrome, Firefox, Safari ed Edge, possibilmente utilizzando uno strumento come BrowserStack.

Se possibile, verifica che la pagina non si comporti intenzionalmente in modo diverso a causa dello sniffing dello user agent. In Chrome DevTools, prova a impostare la stringa User-Agent su un altro browser.

Si è verificato un problema in una release recente?

In passato funzionava come previsto, ma ha smesso di funzionare in una release recente del browser? Queste regressioni possono essere risolte molto più rapidamente, soprattutto se fornisci un numero di versione in cui il problema non si verificava e un numero di versione in cui si è verificato. Puoi utilizzare strumenti come BrowserStack per controllare le versioni precedenti del browser. Utilizza strumenti come lo strumento bisect-builds (per Chromium) per cercare la modifica.

Se un problema è una regressione e può essere riprodotto, la causa principale di solito può essere trovata e risolta rapidamente.

Altri utenti riscontrano lo stesso problema?

Se riscontri problemi, è molto probabile che anche altri sviluppatori li stiano riscontrando. Innanzitutto, prova a cercare il bug su Stack Overflow. Questo potrebbe aiutarti a tradurre un problema astratto in un'API specifica non funzionante e a trovare una soluzione alternativa a breve termine fino alla correzione del bug.

È già stato segnalato?

Una volta che hai un'idea di quale sia il bug, è il momento di verificare se è già stato segnalato eseguendo una ricerca nel database dei bug del browser.

Se trovi un bug esistente che descrive il problema, aggiungi il tuo supporto aggiungendo una stella, aggiungendo ai preferiti o commentando il bug. Inoltre, su molti siti puoi aggiungerti all'elenco CC e ricevere aggiornamenti quando il bug cambia.

Se decidi di commentare il bug, includi informazioni su come influisce sul tuo sito web. Evita di aggiungere commenti del tipo "+1", poiché i tracker di bug in genere inviano email per ogni commento.

Segnala il bug

Se il bug non è stato segnalato in precedenza, è il momento di informare il fornitore del browser.

Crea uno scenario di test ridotto al minimo

Mozilla ha un ottimo articolo su come creare uno scenario di test ridotto al minimo. In breve, anche se una descrizione del problema è un ottimo punto di partenza, non c'è niente di meglio che fornire un link a una demo nel bug che mostri il problema. Per massimizzare le possibilità di un rapido avanzamento, l'esempio deve contenere il codice minimo possibile necessario per dimostrare il problema. Un esempio di codice minimo è la cosa più importante che puoi fare per aumentare le probabilità che il bug venga corretto.

Ecco alcuni suggerimenti per ridurre al minimo uno scenario di test:

  • Scarica la pagina web, aggiungi <base href="https://original.url"> e verifica che il bug esista localmente. Potrebbe essere necessario un server HTTPS attivo se l'URL utilizza HTTPS.
  • Testa i file locali sulle build più recenti del maggior numero possibile di browser.
  • Prova a condensare tutto in un unico file.
  • Rimuovi il codice (iniziando con gli elementi che sai essere non necessari) finché il bug non scompare.
  • Utilizza il controllo della versione per salvare il tuo lavoro e annullare le operazioni che non vanno a buon fine.

Ospita uno scenario di test minimizzato

Se stai cercando un buon posto per ospitare lo scenario di test minimizzato, sono disponibili diverse opzioni:

Tieni presente che molti di questi siti mostrano i contenuti in un iframe, il che potrebbe causare un comportamento diverso di funzionalità o bug.

Segnala il problema

Una volta ottenuto lo scenario di test ridotto, puoi segnalare il bug. Vai al sito di monitoraggio dei bug appropriato e crea un nuovo problema.

Aggiungi descrizioni chiare e passaggi per replicare il problema

Innanzitutto, fornisci una descrizione chiara per aiutare gli ingegneri a comprendere rapidamente qual è il problema e a classificarlo.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

Successivamente, fornisci i passaggi dettagliati necessari per riprodurre il problema e descrivi il risultato previsto e quello effettivo.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Per saperne di più, consulta le linee guida per la scrittura di segnalazioni di bug su MDN.

Bonus: aggiungi uno screenshot o uno screencast del problema

Anche se non è obbligatorio, spesso è utile aggiungere uno screenshot o uno screencast del problema. Ciò è particolarmente utile quando i bug si verificano dopo diversi passaggi o attività insolite. Gli screencast e gli screenshot spesso possono mostrare meglio agli ingegneri del browser cosa è successo.

Includi i dettagli dell'ambiente

Alcuni bug sono riproducibili solo su determinati sistemi operativi o solo su tipi specifici di display (ad esempio, con DPI basso o alto). Assicurati di includere i dettagli di tutti gli ambienti di test che hai utilizzato.

Invia il bug

Infine, invia il bug. Tieni d'occhio la tua email per eventuali risposte relative al bug. In genere, durante l'indagine, gli ingegneri potrebbero avere ulteriori domande. Se hanno difficoltà a riprodurre il problema, potrebbero contattarti.