Come segnalare un bug corretto del browser

Indicare ai fornitori di browser eventuali problemi riscontrati è parte integrante del miglioramento della piattaforma web.

Presentare un bug non è difficile, ma richiede un po' di lavoro. L'obiettivo è aiutare a trovare facilmente il problema, a raggiungere la causa principale e, soprattutto, a trovare un modo per risolverlo. I bug che fanno progressi rapidi tendono a essere facilmente riprodotti con un comportamento previsto chiaro.

Verifica che si tratti di un bug

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

Qual è il comportamento corretto?

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

Funziona con un altro browser?

Un comportamento diverso da un browser ha generalmente una priorità maggiore come problema di interoperabilità, soprattutto quando il browser contenente il bug è quello strano. 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 è trattato di un problema in una release recente?

Ha funzionato come previsto in passato, ma non è andato a buon fine in una versione recente del browser? Queste "regressioni" possono essere eseguite molto più rapidamente, soprattutto se fornisci un numero di versione in cui ha funzionato e una versione in cui ha avuto esito negativo. Strumenti come BrowserStack possono facilitare il controllo delle vecchie versioni del browser e lo strumento biset-builds (per Chromium) consente di cercare la modifica in modo molto efficiente.

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

Altre persone stanno riscontrando lo stesso problema?

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

È già stata segnalata in precedenza?

Una volta capito il bug, è il momento di controllare se il bug è già stato segnalato cercando 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, è possibile aggiungersi all'elenco Cc e ricevere aggiornamenti quando il bug cambia.

Se decidi di commentare il bug, includi informazioni su come il bug può interessare il tuo sito web. Evita di aggiungere commenti di stile "+1", perché i tracker dei bug in genere inviano un'email per ogni commento.

Segnala il bug

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

Creare uno scenario di test ridotto

Mozilla ha un ottimo articolo su come creare uno scenario di test ridotto. Per farla breve, sebbene una descrizione del problema sia un ottimo punto di partenza, non c'è niente di meglio di una demo collegata nel bug che mostra il problema. Per massimizzare le possibilità di avanzamento veloce, l'esempio deve contenere il codice minimo necessario per dimostrare il problema. Un esempio minimo di codice è la prima cosa 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. Ciò potrebbe richiedere un server HTTPS attivo se l'URL utilizza HTTPS.
  • Testa i file locali sulle ultime build del maggior numero possibile di browser.
  • Prova a condensare tutto in un file.
  • Rimuovi il codice (a partire da ciò che sai che non è necessario) finché il bug non scompare.
  • Usa il controllo della versione per salvare il lavoro e annullare eventuali errori.

Hosting di uno scenario di test minimizzato

Se stai cercando un buon posto per ospitare il tuo scenario di test minimizzato, ci sono diverse buone posizioni disponibili:

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

Presentazione del problema in corso...

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

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

Innanzitutto, fornisci una descrizione chiara per aiutare gli ingegneri a capire rapidamente qual è il problema e 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 previsto 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 di segnalazioni di bug su MDN.

Bonus: aggiungi uno screenshot o lo 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 potrebbe richiedere dei passaggi strani. Essere in grado di vedere cosa succede in uno screencast o in uno screenshot può essere utile.

Includi dettagli sull'ambiente

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

Invia il bug

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