Come segnalare un bug corretto del browser

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

Pete LePage
Robert Nyman

Segnalare un buon bug non è difficile, ma richiede un po' di lavoro. L'obiettivo è riuscire a trovare facilmente ciò che non funziona, a raggiungere la causa principale e, soprattutto, a trovare un modo per risolverlo. I bug che progrediscono rapidamente tendono a essere facili da riprodurre, con un chiaro comportamento previsto.

Verifica che si tratti di un bug

Il primo passaggio consiste nell'individuare il comportamento "corretto".

Qual è il comportamento corretto?

Controlla la documentazione dell'API pertinente su MDN o prova a trovare le specifiche correlate. Queste informazioni possono aiutarti a decidere quale API è effettivamente danneggiata, dove non funziona e qual è il comportamento previsto.

Funziona su un browser diverso?

I comportamenti diversi da un browser all'altro hanno in genere una priorità più alta come problema di interoperabilità, soprattutto quando il browser contenente il bug è quello strano. Prova a eseguire un test sulle versioni più recenti di Chrome, Firefox, Safari ed Edge, utilizzando eventualmente uno strumento come BrowserStack.

Se possibile, controlla 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.

Il problema si è verificato in una recente uscita?

Ha funzionato come previsto in passato, ma ha funzionato come previsto in una recente release del browser? Tali "regressioni" possono essere risolte molto più rapidamente, in particolare se fornisci un numero di versione in cui ha funzionato e una versione in cui non funziona. Strumenti come BrowserStack consentono di controllare facilmente le versioni precedenti del browser, mentre lo strumento Bisect-Builds (per Chromium) consente di cercare la modifica in modo molto efficiente.

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

Altri stanno riscontrando lo stesso problema?

Se riscontri problemi, ci sono buone probabilità che lo siano anche gli altri sviluppatori. 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à stata segnalata?

Quando hai un'idea di cosa sia il bug, è il momento di verificare se il bug è 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 a Speciali, 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 il bug influisce sul tuo sito web. Evita di aggiungere commenti in stile "+1", poiché i tracker di bug in genere inviano un'email per ogni commento.

Segnala il bug

Se il bug non è mai stato segnalato, è il momento di comunicarlo al fornitore del browser.

Crea uno scenario di test ridotto a icona

Mozilla ha un ottimo articolo su come creare uno scenario di test ridotto al minimo. Per riassumere una storia lunga, mentre una descrizione del problema è un ottimo inizio, niente meglio fornire una demo collegata nel bug che mostra il problema. Per massimizzare le possibilità di avanzamento rapido, l'esempio deve contenere il codice minimo possibile necessario per dimostrare il problema. Un esempio di codice minimo è la cosa principale che puoi fare per aumentare le probabilità che il bug venga risolto.

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 a livello locale. Questa operazione potrebbe richiedere un server HTTPS attivo se l'URL utilizza HTTPS.
  • Testa i file locali sulle build più recenti del maggior numero possibile di browser.
  • Cerca di condensare tutto in un unico file.
  • Rimuovi il codice (a partire da cose che sai essere inutili) finché il bug non scompare.
  • Usa il controllo della versione per salvare il tuo lavoro e annullare gli errori.

Hosting di uno scenario di test minimizzato

Se stai cercando un posto idoneo per ospitare il tuo scenario di test minimizzato, esistono diverse posizioni valide:

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

Presentazione del problema

Dopo aver ridotto al minimo lo scenario di test, puoi segnalare il bug. Vai al sito corretto per il monitoraggio dei bug e crea un nuovo problema.

Fornisci una descrizione chiara e i passaggi necessari per riprodurre il problema.

Innanzitutto, fornisci una descrizione chiara per aiutare i tecnici a capire 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.

Quindi, fornisci i passaggi dettagliati necessari per riprodurre il problema. È qui che entra in gioco lo scenario di test minimizzato.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

Infine, descrivi il risultato atteso ed 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 ulteriori informazioni, consulta le linee guida per la scrittura delle segnalazioni di bug su MDN.

Bonus: aggiungi uno screenshot o uno screencast del problema

Sebbene non sia obbligatorio, in alcuni casi può essere utile aggiungere uno screenshot o uno screencast del problema. Ciò è particolarmente utile nei casi in cui la riproduzione dei bug richieda passaggi strani. Poter vedere cosa succede in uno screencast o in uno screenshot spesso può essere utile.

Includi i dettagli dell'ambiente

Alcuni bug sono riproducibili solo su determinati sistemi operativi o solo su tipi di display specifici (ad esempio, con dpi bassi o dpi alti). Assicurati di includere i dettagli di eventuali ambienti di test che hai utilizzato.

Invia il bug

Infine, invia il bug. Poi, ricordati di tenere d'occhio la tua email per eventuali risposte al bug. In genere, durante le indagini e durante la correzione del bug, i tecnici potrebbero avere ulteriori domande o, se hanno difficoltà a riprodurre il problema, potrebbero contattarti.