Como informar os fornecedores de navegadores sobre os problemas que você encontra neles é parte integrante do aprimoramento da plataforma da Web!
Registrar um bom bug não é difícil, mas exige um pouco de trabalho. O objetivo é tornar encontrar o que está errado, chegar à causa raiz e, o mais importante, encontrar forma de corrigi-lo. Bugs que fazem progresso rápido tendem a ser fáceis de reproduzir com um claramente o comportamento esperado.
Verificar se é um bug
A primeira etapa é descobrir o que é comportamento deve ser.
Qual é o comportamento correto?
Consulte a documentação da API relevante no MDN ou tente para encontrar especificações relacionadas. Essas informações podem ajudar você a decidir qual API é onde estão corrompidos e qual é o comportamento esperado.
Funciona em outro navegador?
O comportamento que difere entre os navegadores geralmente tem prioridade mais alta como um problema de interoperabilidade, principalmente quando o navegador que contém o bug é o um estranho. Tente usar as versões mais recentes do Chrome, Firefox, Safari e Edge, possivelmente usando uma ferramenta como a BrowserStack.
Se possível, verifique se a página não está se comportando de maneira diferente devido a
a detecção do user agent. No Chrome DevTools, tente definir a string User-Agent
em 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 tomadas com muito mais rapidez, especialmente se você fornecer um o número da versão em que funcionou e a versão em que falhou. Ferramentas como O BrowserStack pode facilitar a verificação de aplicativos versões do navegador e a ferramenta bisect-builds (para o Chromium) permite pesquisar a alteração com muita eficiência.
Se um problema é uma regressão e pode ser reproduzido, a causa raiz geralmente é encontrados e corrigidos 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 a traduzir um problema abstrato em uma API corrompida específica, e pode ajudar você a encontrar uma solução 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 relatado ao pesquisar no banco de dados de bugs do navegador.
- Navegadores baseados no Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/ (link em inglês)
- Safari e Navegadores baseados em WebKit: https://bugs.webkit.org/
Se você encontrar um bug que descreva o problema, adicione sua marcando o bug com uma estrela, adicionando como favorito ou comentando sobre ele. E, em muitos sites, você pode se adicionar à lista de CCs 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 "+1" comentários de estilo, como 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 isso.
Criar um caso de teste minimizado
O Mozilla tem um ótimo artigo sobre como criar um caso de teste minimizado. Para fazer uma encurtar uma história, enquanto a descrição do problema é um ótimo começo, nada fornece uma demonstração vinculada no bug que mostra os 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 código mínimo amostra é a primeira coisa que você pode fazer para aumentar as chances de seu bug sendo 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 O URL usa 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 desaparece.
- Use o controle de versões para salvar seu trabalho e desfazer ações. errada.
Como hospedar um caso de teste reduzido
Se você está procurando um bom lugar para hospedar seu caso de teste minimizado, há vários lugares bons disponíveis:
Muitos desses sites exibem conteúdo em um iframe, o que podem 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)
- Safari e Navegadores baseados em WebKit: https://bugs.webkit.org/ (link em inglês)
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 o que qual é o problema e ajudar a fazer uma 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 elaboraçã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 um screencast do problema. Isso é especialmente útil nos casos em que os bugs pode exigir algumas etapas estranhas para se reproduzir. Ser capaz de ver o que acontece um screencast ou uma captura de tela pode ser útil.
Inclua detalhes do ambiente
Alguns bugs podem ser reproduzidos somente em determinados sistemas operacionais ou apenas tipos específicos de telas (por exemplo, baixa ou alta dpi). Não se esqueça de inclua os detalhes de todos os ambientes de teste usados.
Enviar o bug
Por fim, envie o bug. Depois, fique de olho no seu e-mail para ver se respostas ao bug. Normalmente, durante a investigação e ao corrigir o bug, os engenheiros podem ter mais perguntas ou ter dificuldade reproduzir o problema, ele pode entrar em contato.