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 è far sì che è facile trovare ciò che non funziona, raggiungere la causa principale e, soprattutto, trovare un per risolvere il problema. I bug che progrediscono rapidamente tendono a essere facili da riprodurre grazie a un chiaro comportamento previsto.

Verifica che si tratti di un bug

Il primo passo è capire qual è la risposta "corretta" comportamento degli utenti.

Qual è il comportamento corretto?

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

Funziona su un browser diverso?

Il comportamento diverso da un browser all'altro ha in genere una priorità più alta, di interoperabilità, soprattutto quando il browser contenente il bug è una strana. Prova a eseguire un test sulle ultime versioni di Chrome, Firefox, Safari e Edge, utilizzando eventualmente uno strumento come BrowserStack.

Se possibile, controlla che la pagina non si comporti intenzionalmente in modo diverso a causa di: 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" più rapidamente, specialmente se fornisci un il numero di versione in cui funzionava e una versione in cui non funzionava. Strumenti come BrowserStack può semplificare il controllo versioni del browser e 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 di solito può essere sono stati trovati e risolti 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 potrebbe esserti utile per trovare una soluzione alternativa a breve termine fino alla correzione del bug.

È già stata segnalata?

Una volta che hai un'idea del bug, è il momento di verificare se si tratta è già stata segnalata eseguendo una ricerca nel database dei bug del browser.

Se trovi un bug esistente che descrive il problema, aggiungi il tuo feedback aggiungendo il bug a Speciali, aggiungendolo ai preferiti o commentando il bug. Su molti siti, inoltre, 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 "+1" commenti in stile, come tracker di bug di solito inviano un'email per ogni commento.

Segnala il bug

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

Crea uno scenario di test ridotto a icona

Mozilla ha un ottimo articolo su come creare uno scenario di test ridotto a icona. Per creare un per farla breve, mentre una descrizione del problema è un ottimo inizio, fornendo una demo collegata nel bug che mostra problema. Per massimizzare le possibilità di progresso rapido, l'esempio deve contenere il codice minimo possibile necessario per dimostrare il problema. Un codice minimo è la cosa più importante che puoi fare per aumentare le probabilità che viene corretto.

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

  • Scarica la pagina web, aggiungi <base href="https://original.url"> e verificare che il bug esista a livello locale. 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.
  • Cerca di condensare tutto in un unico file.
  • Rimuovi il codice (iniziando con cose che sai essere inutili) fino a quando il bug scompare.
  • Usa il controllo delle versioni per salvare il tuo lavoro e annullare le operazioni eseguite sbagliato.

Hosting di uno scenario di test minimizzato

Se stai cercando un posto adatto per ospitare il tuo scenario di test minimizzato, sono disponibili diverse posizioni efficaci:

Tieni presente che molti di questi siti mostrano i contenuti in un iframe, potrebbero 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 gli ingegneri a capire rapidamente risolvere il problema e aiutarti 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 saperne di più, 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 lo screencast del problema. Ciò è particolarmente utile nei casi in cui potrebbero richiedere alcuni passaggi insoliti. Essere in grado di vedere cosa succede nelle uno screencast o uno screenshot spesso possono essere utili.

Includi i dettagli dell'ambiente

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

Invia il bug

Infine, invia il bug. Quindi, ricordati di tenere d'occhio la tua email per qualsiasi risposte al bug. In genere, durante le indagini e la correzione del bug, gli ingegneri possono avere altre domande o se hanno difficoltà riprodurre il problema, potrebbero contattarti.