Informar os fornecedores de navegadores sobre os problemas que você encontra é essencial para melhorar 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á quebrado, o alcance da causa raiz e, o mais importante, a maneira de corrigir o problema. Bugs que fazem progresso rápido tendem a ser fáceis de reproduzir com um comportamento claro esperado.
Verificar se é um bug
A primeira etapa é descobrir qual deve ser o comportamento "correto".
Qual é o comportamento correto?
Consulte a documentação da API relevante no MDN ou tente encontrar especificações relacionadas. Essas informações podem ajudar você a decidir qual API está realmente corrompida, onde ela está com falha e qual é o comportamento esperado.
Funciona em outro navegador?
Comportamentos diferentes entre os navegadores geralmente têm prioridade mais alta como um problema de interoperabilidade, especialmente quando o navegador que contém o bug é diferente. Teste as versões mais recentes do Chrome, Firefox, Safari e Edge, possivelmente usando uma ferramenta como o BrowserStack.
Se possível, verifique se a página não está se comportando 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 no passado, mas não funcionou em uma versão recente do navegador? Essas "regressões" podem ser tratadas com muito mais rapidez, especialmente se você fornecer um número de versão em que ele funcionou e uma versão em que falhou. Ferramentas como o BrowserStack podem facilitar a verificação de versões antigas do navegador e a ferramenta bisect-builds (para o Chromium) permite pesquisar a mudança de maneira muito eficiente.
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 estiver com problemas, há uma boa chance de 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 de curto prazo até que o bug seja corrigido.
Ele já foi denunciado antes?
Quando você tiver uma ideia do bug, é hora de verificar se ele já foi relatado pesquisando no banco de dados de bugs do navegador.
- Navegadores baseados no Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/ (link em inglês)
- Navegadores baseados em Safari e WebKit: https://bugs.webkit.org/
Se você encontrar um bug que descreva o problema, adicione suporte marcando com uma estrela, adicionando aos favoritos ou comentando o bug. Além disso, em muitos sites, é possível adicionar a si mesmo à 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 geralmente enviam e-mails para cada comentário.
Relatar o bug
Se o bug não tiver sido relatado antes, é hora de informar o fornecedor do navegador sobre ele.
Criar um caso de teste minimizado
O Mozilla tem um ótimo artigo sobre como criar um caso de teste minimizado. Para resumir, embora uma descrição do problema seja um ótimo começo, nada melhora fornecer uma demonstração vinculada no bug que mostra 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 do bug ser corrigido.
Veja 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 só arquivo.
- Remova o código (começando com coisas que você sabe serem 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 local para hospedar seu caso de teste minimizado, há vários bons lugares disponíveis:
Muitos desses sites mostram conteúdo em um iframe, o que pode fazer com que recursos ou bugs se comportem de maneira diferente.
Registrar o problema
Quando tiver seu caso de teste minimizado, vai estar tudo pronto para registrar o bug. Acesse o site de rastreamento de bugs correto e crie um novo problema.
- Navegadores baseados no Chromium: https://crbug.com/new
- Firefox: https://bugzilla.mozilla.org/ (link em inglês)
- Navegadores baseados em Safari e WebKit: https://bugs.webkit.org/
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 do problema.
When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.
Em seguida, informe as etapas detalhadas necessárias para reproduzir o problema. É aqui que entra o caso de teste reduzido.
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.
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, confira as Diretrizes para a criação de relatórios de bugs (em inglês) 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 um screencast do problema. Isso é muito útil nos casos em que os bugs exigem algumas etapas estranhas para se reproduzir. Poder ver o que acontece em um screencast ou em uma captura de tela pode ser útil.
Inclua detalhes do ambiente
Alguns bugs são reproduzíveis apenas em determinados sistemas operacionais ou somente em tipos específicos de telas, por exemplo, com dpi baixo ou alto. Não se esqueça de incluir os detalhes de todos os ambientes de teste usados.
Enviar o bug
Por fim, envie o bug. Em seguida, fique de olho no seu e-mail para conferir as respostas. Normalmente, durante a investigação e ao corrigir o bug, os engenheiros podem ter outras perguntas ou, se tiverem dificuldade para reproduzir o problema, podem entrar em contato.