Publicado em 13 de novembro de 2024
Imagine que você está analisando um rastro de performance e quer destacar uma área específica, como a tarefa mais longa ou um bloco de trabalho desnecessário. Talvez você queira fazer anotações para referência futura ou compartilhar suas descobertas com um colega. Qual é a melhor maneira de fazer isso?
Claro, é possível imprimir o rastro em um pedaço de papel enorme e desenhar e escrever suas anotações manualmente ou usar um software de terceiros para fazer anotações em uma captura de tela de um rastro. Essa era a melhor maneira até agora.
Como parte da dedicação da nossa equipe em simplificar os fluxos de trabalho dos desenvolvedores, estamos felizes em apresentar uma alternativa a essas opções: a capacidade de adicionar anotações diretamente ao rastro no painel Performance.
Agora, você pode anotar rastros no local, navegar por essas anotações com facilidade e até salvá-las diretamente no arquivo de rastro. Isso torna o compartilhamento de insights destacados tão simples quanto enviar um arquivo, eliminando a necessidade de ferramentas externas ou soluções alternativas. As anotações podem ajudar você a depurar o desempenho, mas também a entender rapidamente o que está acontecendo com seu colega ou a melhorar a compreensão dele sobre o que está acontecendo sem muitas idas e vindas.
Há três tipos de anotações:
Intervalos de tempo com anotações: como marcar qualquer intervalo de tempo na linha do tempo
Entradas com anotações: adicione um rótulo a qualquer entrada na linha do tempo.
Conexões de entrada: conecte duas entradas com uma seta para mostrar a relação entre elas.
Vamos analisar cada tipo de anotação e os cenários em que elas podem ser úteis.
Intervalos de tempo com anotações
Um fluxo de trabalho comum no DevTools é gravar um rastro para depurar uma interação lenta. A visualização de rastro pode parecer confusa no início, mas, à medida que você detalha os manipuladores de eventos e as pilhas de chamadas específicos, ela começa a fazer sentido. Para facilitar o trabalho com a visualização de rastro, crie uma anotação para identificar como um bloco de tempo é geralmente usado. Por exemplo, pode ser útil anotar o intervalo de tempo para que a interface seja atualizada de forma significativa após uma interação do usuário.
Para anotar um período: mantenha pressionada a tecla Shift e arraste do início da interação até a atualização da interface. Em seguida, digite um rótulo para criar a anotação. Se o intervalo selecionado não estiver correto, cancele-o clicando em outro lugar antes de digitar. Ou clique duas vezes para editar o rótulo de uma anotação. No momento, não é possível ajustar o período de uma anotação. Se o período estiver incorreto, exclua a anotação e crie uma nova.
Com essa anotação, você terá uma visão mais clara de todo o trabalho que precisa acontecer antes da mudança visível para o usuário. Assim, você pode focar a depuração de acordo com isso.
Entradas com anotações
Para tornar a mudança visível para o usuário mais óbvia, você também pode anotar a tarefa responsável pela transição com um rótulo de entrada.
Para criar um marcador para a entrada: clique duas vezes na entrada selecionada e digite o marcador ou clique com o botão direito do mouse na entrada e selecione "Marcar entrada" no menu de contexto. Para editar o rótulo de uma anotação, clique duas vezes na entrada ou no rótulo. Como alternativa, selecione a opção "Entrada de rótulo" no menu de contexto.
Com essas anotações de entrada, fica mais fácil identificar o trabalho que é (ou não) essencial para a interação e quanto tempo ela leva.
Conexões de entrada
A terceira maneira de anotar o rastro é desenhar a conexão entre a interação e a tarefa longa responsável pela transição.
Para criar uma conexão entre as entradas: clique duas vezes na entrada que você quer conectar a outra e clique na seta que aparece à direita dela. Em seguida, clique na entrada com que você quer fazer a conexão. Como alternativa, clique com o botão direito do mouse na entrada e selecione "Vincular entradas" no menu de contexto.
Portanto, mesmo que a interação tenha terminado, você pode usar esse tipo de anotação para mostrar com mais clareza como ela está conectada às tarefas longas subsequentes que bloqueiam a interface.
Excluir e ocultar anotações
Todas as anotações podem ser excluídas rapidamente na visualização de lista de anotações na barra lateral. Ao passar o cursor sobre uma anotação, aparece um ícone de lixeira . Clique nesse ícone para excluir a anotação.
Como alternativa, para excluir rótulos de entrada e anotações de conexão de entradas associadas a um evento específico, clique com o botão direito do mouse no evento e selecione "Excluir anotações". As anotações com rótulos também podem ser excluídas removendo o rótulo e salvando as anotações.
Se você quiser ocultar as anotações sem excluí-las para que elas não atrapalhem a análise do rastro, marque a caixa de seleção "Ocultar anotações" na parte de baixo da barra lateral de anotações. Essa preferência será salva. Quando você carrega um rastro com anotações com essa configuração ativada, elas permanecem ocultas até que você desmarque a caixa de seleção.
Salvar ou carregar rastros com anotações
Ótimo, você adicionou todas essas anotações para ajudar você e outras pessoas a entenderem o rastro. A seguir
Não é necessário fazer capturas de tela do rastro para enviar a um colega, como nos tempos antigos, antes das anotações. Basta salvar o arquivo com anotações e enviar para eles. Pronto. Eles podem fazer upload do arquivo no painel Performance e conferir todas as anotações que você fez no contexto do rastreamento. Eles também podem adicionar mais anotações e enviar para você.
O DevTools também salva outros tipos de personalizações na visualização de rastro. Por exemplo, é possível isolar uma área de interesse aumentando o zoom e definindo um caminho de navegação ou ocultando entradas em pilhas de chamadas irrelevantes. Todas essas configurações serão mantidas pelo arquivo de rastreamento, facilitando ainda mais a colaboração na depuração de desempenho. Com todas essas personalizações, você pode chamar a atenção para o que é mais importante, fornecendo o contexto de todo o rastro interativo, ao contrário de uma captura de tela.
Para preservar anotações e outras personalizações, clique na opção Salvar rastro abaixo do ícone de download . Quando um rastro é carregado, ele contém todas essas personalizações. A opção padrão é salvar com anotações, mas, se você quiser salvar apenas o arquivo de rastro bruto, selecione a opção Salvar rastro sem anotações.
Conclusão
Pode parecer que há muitas informações para absorver, mas não se preocupe. As instruções para criar anotações podem ser encontradas na guia de anotações do painel Performance. Essa guia oferece instruções quando não há anotações e mostra uma visualização em lista das anotações quando elas são criadas.
Assim, as anotações no painel Performance permitem que os desenvolvedores identifiquem momentos importantes em um rastro, adicionando contexto e insights personalizados. Isso simplifica o processo de análise, facilitando o compartilhamento e a colaboração nas otimizações de desempenho. Teste as anotações no painel "Performance" e nos conte o que achou. Se você tiver algum feedback, adoraríamos ler seus comentários na edição pública.
Diga adeus à necessidade de ferramentas externas e dê as boas-vindas a um fluxo de trabalho mais eficiente.