Como registrar um bom bug do navegador

Informar os fornecedores de navegadores sobre os problemas que você encontra é essencial para aprimorar a plataforma da Web.

Registrar um bom bug não é difícil, mas exige um pouco de trabalho. O objetivo é facilitar a descoberta do que está corrompido, o alcance da causa raiz e, o mais importante, encontrar uma maneira de corrigi-lo. Bugs que fazem progresso rápido tendem a ser fáceis de reproduzir com um comportamento esperado claro.

Verificar se é um bug

A primeira etapa é descobrir qual deve ser o comportamento "correto".

Qual é o comportamento correto?

Verifique os documentos da API relevantes no MDN ou tente encontrar especificações relacionadas. Essas informações podem ajudar você a decidir qual API está realmente corrompida, onde ela está corrompida e qual é o comportamento esperado.

Ele funciona em outro navegador?

O comportamento que difere entre navegadores geralmente tem prioridade maior como um problema de interoperabilidade, especialmente quando o navegador que contém o bug é diferente. Tente fazer o teste nas versões mais recentes do Chrome, Firefox, Safari e Edge, usando uma ferramenta como o BrowserStack.

Se possível, verifique se a página não está se comportando intencionalmente de maneira diferente devido à detecção do user agent. No Chrome DevTools, tente definir a string User-Agent para outro navegador.

Houve uma falha em um lançamento recente?

Isso funcionou como esperado, mas quebrou em uma versão recente do navegador? Essas "regressões" podem ser processadas muito mais rapidamente, especialmente se você fornecer um número de versão em que funcionou e uma versão em que falhou. Ferramentas como a BrowserStack podem facilitar a verificação das versões antigas do navegador, e a ferramenta Bisect-builds (para o Chromium) permite pesquisar a mudança com muita eficiência.

Se um problema for uma regressão e puder ser reproduzido, a causa raiz geralmente poderá ser encontrada e corrigida rapidamente.

Outras pessoas estão enfrentando o mesmo problema?

Se você estiver com problemas, é bem provável que outros desenvolvedores também estejam. Primeiro, tente procurar o bug no Stack Overflow. Isso pode ajudar você a converter um problema abstrato em uma API corrompida específica e a encontrar uma solução alternativa de curto prazo até que o bug seja corrigido.

Ele já foi denunciado antes?

Quando você tiver uma ideia de qual é o bug, é hora de verificar se ele já foi informado pesquisando no banco de dados de bugs do navegador.

Se você encontrar um bug que descreve o problema, dê seu apoio marcando-o com uma estrela, adicionando-o como favorito ou comentando-o. Além disso, em muitos sites, você pode se adicionar à lista de CC e receber atualizações quando o bug mudar.

Se você decidir comentar sobre o bug, inclua informações sobre como ele afeta seu site. Evite adicionar comentários no estilo "+1", já que os rastreadores de bugs normalmente enviam e-mails para cada comentário.

Relatar o bug

Se o bug não tiver sido relatado antes, é hora de informá-lo ao fornecedor do navegador.

Criar um caso de teste minimizado

O Mozilla tem um ótimo artigo sobre como criar um caso de teste minimizado (em inglês). Para resumir uma história longa, embora uma descrição do problema seja um ótimo começo, nada supera fornecer uma demonstração vinculada no bug que mostre o problema. Para maximizar a chance de progresso rápido, o exemplo precisa conter o mínimo de código possível necessário para demonstrar o problema. Um exemplo de código mínimo é a primeira coisa que você pode fazer para aumentar as chances de o bug ser corrigido.

Aqui estão algumas dicas para minimizar um caso de teste:

  • Faça o download da página da Web, adicione <base href="https://original.url"> e verifique se o bug existe localmente. Isso pode exigir um servidor HTTPS ativo se o URL usar HTTPS.
  • Teste os arquivos locais nos builds mais recentes do maior número possível de navegadores.
  • Tente condensar tudo em um único arquivo.
  • Remova o código (começando com coisas que você sabe que são desnecessárias) até que o bug desapareça.
  • Use o controle de versões para salvar seu trabalho e desfazer ações erradas.

Como hospedar um caso de teste reduzido

Se você está procurando um bom lugar para hospedar seu caso de teste reduzido, há vários bons lugares disponíveis:

Muitos desses sites exibem conteúdo em um iframe, o que pode fazer com que recursos ou bugs se comportem de maneira diferente.

Como informar o problema

Depois de ter o caso de teste minimizado, você pode registrar esse bug. Acesse o site correto de rastreamento de bugs e crie um novo problema.

Forneça uma descrição clara e as etapas necessárias para reproduzir o problema

Primeiro, forneça uma descrição clara para ajudar os engenheiros a entender rapidamente qual é o problema e fazer a triagem dele.

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

Em seguida, apresente as etapas detalhadas necessárias para reproduzir o problema. É aqui que entra o caso de teste minimizado.

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.

E, por fim, descreva o resultado esperado e o real.

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)

Para mais informações, consulte as Diretrizes para criação de relatórios de bugs no MDN.

Bônus: adicione uma captura de tela ou screencast do problema

Embora não seja obrigatório, em alguns casos, pode ser útil adicionar uma captura de tela ou screencast do problema. Isso é especialmente útil nos casos em que os bugs podem exigir algumas etapas estranhas para se reproduzir. Poder ver o que acontece em um screencast ou em uma captura de tela muitas vezes pode ser útil.

Inclua detalhes do ambiente

Alguns bugs são reproduzíveis somente em determinados sistemas operacionais ou em tipos específicos de telas (por exemplo, com dpi baixo ou alto). Inclua os detalhes dos ambientes de teste que você usou.

Enviar o bug

Por fim, envie o bug. Depois, fique de olho no seu e-mail para ver as respostas ao bug. Normalmente, durante a investigação e ao corrigir o bug, os engenheiros podem ter mais perguntas ou, se tiverem dificuldade para reproduzir o problema, podem entrar em contato.