Como criamos a guia "Problemas" do Chrome DevTools

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider

No último trimestre de 2019, a equipe do Chrome DevTools começou a melhorar a experiência do desenvolvedor com relação aos cookies. Isso foi especialmente importante porque o Google Chrome e outros navegadores começaram a mudar o comportamento padrão dos cookies.

Ao pesquisar as ferramentas que o DevTools já oferece, muitas vezes nos encontramos em uma situação como esta:

Problemas no painel do console

😝 O console estava cheio de avisos e mensagens de erro, com explicações bastante técnicas e, às vezes, links para chromestatus.com. Todas as mensagens pareciam igualmente importantes, o que dificultava a identificação de qual lidar primeiro. Mais importante ainda, o texto não estava vinculado a outras informações no DevTools, o que dificultava a compreensão do que aconteceu. E, por fim, as mensagens muitas vezes deixavam o desenvolvedor da Web descobrir como corrigir o problema ou até mesmo saber mais sobre o contexto técnico.

Se você também usa o console para mensagens de seu próprio aplicativo, pode ter dificuldades para localizá-las entre todas as mensagens do navegador.

Assim como humanos, também é difícil que processos automatizados interajam com as mensagens do console. Por exemplo, os desenvolvedores podem usar o Chrome Headless e Puppeteer em um cenário de integração/implantação contínua. Como as mensagens do console são apenas strings, os desenvolvedores precisam escrever expressões regulares ou algum outro analisador para extrair informações acionáveis.

A solução: relatórios de problemas estruturados e acionáveis

Para encontrar uma solução melhor para os problemas que descobrimos, primeiro começamos a pensar sobre os requisitos e os coletamos em um Documento de design.

Nosso objetivo é apresentar os problemas de uma maneira que explique de maneira clara e como corrigi-los. A partir do nosso processo de design, percebemos que cada problema precisa conter as quatro partes a seguir:

  • Título
  • Descrição
  • Links para recursos afetados no DevTools
  • E um link com mais orientações

Para o título, queremos que ele seja breve e preciso para ajudar os desenvolvedores a entender o problema principal e, muitas vezes, já dê dicas sobre a correção. Por exemplo, um problema de cookie agora simplesmente diz:

Marcar cookies entre sites como seguros para permitir a configuração deles em contextos entre sites

Cada problema tem informações mais detalhadas em uma descrição, que explica o que aconteceu, fornece orientações úteis sobre como corrigi-lo e links para outros painéis no DevTools para entender o problema no contexto. Também disponibilizamos links para artigos detalhados em web.dev (link em inglês) para que desenvolvedores da Web saibam mais sobre o assunto.

Uma parte importante de cada problema é a seção de recursos afetados, que tem links para outras partes do DevTools e facilita a investigação. No exemplo do problema de cookie, há uma lista de solicitações de rede que acionaram o problema. Ao clicar na solicitação, você é levado diretamente para o painel "Network". Esperamos que isso não seja apenas conveniente, mas também reforce quais painéis e ferramentas dentro do DevTools podem ser usados para depurar um certo tipo de problema.

Pensando na interação do desenvolvedor com a guia "Issues" no longo prazo, imaginamos a seguinte evolução da interação:

  • Ao encontrar um problema específico pela primeira vez, um desenvolvedor da Web leria o artigo para entender a questão em detalhes.
  • Ao encontrar o problema pela segunda vez, esperamos que a descrição seja suficiente para lembrar o desenvolvedor do que se trata e permitir que ele investigue imediatamente e tome medidas para resolvê-lo.
  • Depois de encontrar um problema por algumas vezes, esperamos que o título seja suficiente para que o desenvolvedor reconheça o tipo dele.

Outro aspecto importante que queríamos melhorar é a agregação. Por exemplo, se o mesmo cookie causou o mesmo problema várias vezes, queríamos denunciar o cookie apenas uma vez. Além de reduzir consideravelmente o número de mensagens, isso geralmente ajuda a identificar a causa raiz de um problema com mais rapidez.

Problemas agregados

A implementação

Com esses requisitos em mente, a equipe começou a pensar em como implementar o novo recurso. Os projetos para o Chrome DevTools geralmente abrangem três áreas diferentes:

A implementação era composta por três tarefas:

  • No Chromium, tivemos que identificar os componentes que têm as informações que queremos mostrar e torná-las acessíveis ao protocolo do DevTools sem comprometer a velocidade ou a segurança.
  • Em seguida, foi preciso criar o Chrome DevTools Protocol (CDP) para definir a API que expõe as informações aos clientes, como o front-end do DevTools.
  • Por fim, foi preciso implementar um componente no front-end do DevTools que solicita as informações do navegador pelo CDP e as exibe em uma interface adequada para que os desenvolvedores possam interpretar e interagir facilmente com elas.

Quanto ao navegador, primeiro analisamos como as mensagens do console eram tratadas, porque seu comportamento é muito semelhante ao que tínhamos em mente para problemas. Geralmente, o CodeSearch é um bom ponto de partida para análises como essas. Ela permite que você pesquise e explore todo o código-fonte do projeto Chromium online. Dessa forma, aprendemos sobre a implementação de mensagens do console e poderíamos criar uma maneira paralela, mas mais estruturada, em relação aos requisitos que coletamos para os problemas.

O trabalho aqui é especialmente desafiador por causa de todas as implicações de segurança que sempre precisamos considerar. O projeto Chromium segue um longo caminho para separar elementos em processos diferentes e fazer com que eles se comuniquem apenas por canais de comunicação controlados para evitar vazamentos de informações. Os problemas podem conter informações confidenciais, portanto, temos que tomar cuidado para não enviar essas informações a uma parte do navegador que não deve saber sobre elas.

No front-end do DevTools

O DevTools é um aplicativo da Web escrito em JavaScript e CSS. É parecido com muitos outros aplicativos da Web, só que existe há mais de 10 anos. E, claro, o back-end é basicamente um canal de comunicação direta com o navegador: o protocolo Chrome DevTools.

Para a guia "Problemas", pensamos primeiro nas histórias de usuários e no que os desenvolvedores precisam fazer para resolver um problema. Nossas ideias basicamente evoluíram com a possibilidade de usar a guia "Problemas" como ponto de partida central para investigações que vinculavam as pessoas aos painéis com informações mais detalhadas. Decidimos colocar a guia "Issues" com as outras guias na parte inferior do DevTools para que ela possa ficar aberta enquanto um desenvolvedor interage com outro componente, como o painel "Network" ou "Application".

Com isso em mente, nosso designer de UX entendeu nosso objetivo e criou um protótipo das seguintes propostas iniciais:

Protótipos

Depois de muita discussão sobre a melhor solução, começamos a implementar o design e reiterar as decisões para chegar gradualmente à aparência atual da guia "Problemas".

Outro fator muito importante foi a capacidade de descoberta da guia "Problemas". No passado, muitos recursos incríveis de Devtools não eram descobertos sem que o desenvolvedor soubesse especificamente o que procurar. Na guia "Problemas", decidimos destacar problemas em várias áreas diferentes para garantir que os desenvolvedores não deixem passar problemas importantes.

Decidimos adicionar uma notificação ao painel do console, porque algumas mensagens do console agora são removidas para evitar problemas. Também adicionamos um ícone ao contador de avisos e erros no canto superior direito da janela do DevTools.

Notificação de problemas

Por fim, a guia "Issues" não apenas se conecta a outros painéis do DevTools, mas os recursos relacionados a um problema também estão vinculados a ela.

Problemas relacionados

No protocolo

A comunicação entre o front-end e o back-end funciona por meio de um protocolo chamado Chromium DevTools Protocol (CDP). O CDP pode ser considerado o back-end do app da Web que é o Chrome DevTools. O CDP é subdividido em vários domínios, e cada domínio contém vários comandos e eventos.

Na guia "Problemas", decidimos adicionar um novo evento ao domínio de auditorias que é acionado sempre que um novo problema é encontrado. Para garantir que também possamos relatar problemas que surgem enquanto o DevTools ainda não está aberto, o domínio de auditorias armazena os problemas mais recentes e os envia assim que ele é conectado. Em seguida, o DevTools coleta todos esses problemas e os agrega.

O CDP também permite que outros clientes de protocolo, como o Puppeteer, recebam e processem problemas. Esperamos que as informações sobre problemas estruturados enviadas pelo CDP permitam e simplifiquem a integração na infraestrutura de integração contínua atual. Dessa forma, os problemas podem ser detectados e corrigidos antes mesmo da implantação da página.

Futuro

Em primeiro lugar, é preciso mover muito mais mensagens do console para a guia "Problemas". Isso vai levar algum tempo, especialmente porque queremos fornecer documentos claros e acionáveis para cada novo problema que adicionarmos. Esperamos que, no futuro, os desenvolvedores procurem por problemas na guia "Problemas" em vez de no console.

Além disso, estamos pensando em como integrar problemas de outras fontes além do back-end do Chromium na guia "Problemas".

Estamos procurando maneiras de manter a guia "Problemas" organizada e melhorar a usabilidade. A pesquisa, a filtragem e a melhoria da agregação estão na nossa lista deste ano. Para estruturar o número cada vez maior de problemas relatados, estamos no processo de introduzir categorias que, por exemplo, tornariam possível mostrar apenas os problemas relacionados a descontinuações futuras. Também estamos pensando em adicionar um recurso de adiamento, que um desenvolvedor pode usar para ocultar problemas temporariamente.

Para que os problemas possam ser acionáveis, queremos facilitar a descoberta de qual parte de uma página acionou um problema. Em especial, estamos pensando em maneiras de distinguir e filtrar os problemas que são genuinamente da sua página (ou seja, os próprios) daqueles que são acionados por recursos incorporados, mas que não estão diretamente sob seu controle (como uma rede de publicidade). Primeiro, será possível ocultar os problemas de cookies de terceiros no Chrome 86.

Se você tiver sugestões para melhorar a guia "Problemas", informe-nos registrando um bug.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.