Come segnalare un bug corretto del browser

Comunicare ai fornitori di browser i problemi rilevati nel loro browser è parte integrante del miglioramento della piattaforma web.

Pete LePage
Robert Nyman

È stato segnalato un bug valido, ma è necessario un po' di lavoro. Il tuo obiettivo dovrebbe essere semplificare al massimo il compito dei tecnici dei browser di trovare cosa non va, raggiungere la causa principale e, soprattutto, trovare un modo per risolvere il problema. I bug che progrediscono rapidamente tendono a essere facili da riprodurre con un comportamento previsto chiaro.

Verificare che si tratti di un bug

Il primo passaggio consiste nel capire qual è 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 verifica l'interruzione e qual è il comportamento previsto.

Funziona in un altro browser?

Il comportamento diverso tra i browser viene generalmente considerato prioritario come problema di interoperabilità, soprattutto quando il browser contenente il bug è quello diverso. Prova a eseguire il test sulle versioni più recenti di Chrome, Firefox, Safari e Edge, eventualmente utilizzando uno strumento come BrowserStack.

Se possibile, controlla che la pagina non abbia un comportamento diverso intenzionale a causa dello sniffing dell'agente utente. In Chrome DevTools, prova a impostare la stringa User-Agent su un altro browser.

Il problema si è verificato in una release recente?

In passato ha funzionato come previsto, ma ha smesso di funzionare in una release recente del browser? È possibile intervenire su queste regressioni molto più rapidamente, soprattutto se fornisci un numero di versione in cui ha funzionato e una versione in cui non è riuscito. Puoi utilizzare strumenti come BrowserStack per controllare le versioni precedenti dei browser. Utilizza strumenti come lo strumento bisect-builds (per Chromium) per cercare la modifica.

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

Altre persone hanno riscontrato lo stesso problema?

Se riscontri problemi, è probabile che anche altri sviluppatori li stiano riscontrando. Per prima cosa, prova a cercare il bug su Stack Overflow. In questo modo potresti tradurre un problema astratto in un'API non funzionante specifica e trovare una soluzione temporanea fino alla correzione del bug.

È già stato segnalato?

Una volta che hai un'idea di che cosa si tratta, è il momento di verificare se il bug è già stato segnalato cercandolo nel database dei bug del browser.

Se trovi un bug esistente che descrive il problema, aggiungi il tuo supporto con una segnalazione, un preferito o un commento. 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 di tipo "+1", poiché i tracker dei bug solitamente inviano email per ogni commento.

Segnala il bug

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

Creare un caso di test ridotto al minimo

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

Ecco alcuni suggerimenti per ridurre al minimo un caso 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 da ciò che sai essere non necessario) finché il bug non scompare.
  • Utilizza il controllo delle versioni per salvare il tuo lavoro e annullare le operazioni che vanno male.

Ospitare uno scenario di test minimizzato

Se stai cercando un buon posto per ospitare il tuo caso di test minimizzato, esistono diversi posti disponibili:

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 ridotto il caso di test a icona, puoi segnalare il bug. Vai al sito di monitoraggio dei bug corretto e crea un nuovo problema.

Aggiungi descrizioni e passaggi chiari per la replica

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.

Poi, fornisci i passaggi dettagliati necessari per riprodurre il problema. È qui che entra in gioco il caso 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 e 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 report di bug su MDN.

(Facoltativo) Aggiungi uno screenshot o uno screencast del problema

Sebbene non sia obbligatorio, spesso è utile aggiungere uno screenshot o uno screencast del problema. Questa opzione è particolarmente utile quando si verificano bug dopo diversi passaggi o attività insolite. Gli screencast e gli screenshot possono spesso dimostrare meglio cosa è successo ai tecnici dei browser.

Includi i dettagli dell'ambiente

Alcuni bug sono riproducibili solo su determinati sistemi operativi o solo su tipi specifici di display (ad esempio a basso DPI o ad alto DPI). 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 al bug. In genere, durante l'indagine, i tecnici potrebbero avere altre domande. Se hanno difficoltà a riprodurre il problema, potrebbero contattarti.