Este codelab orienta você no processo de interpretação de todo o tráfego de rede de um aplicativo de amostra um pouco complexo. Ao final do exercício, você terá as habilidades necessárias para descobrir qual seu aplicativo da Web está carregando e quando ele está fazendo cada solicitação.
Acesse o painel "Network".
Navegue até o painel "Rede" para ver o tráfego de rede do aplicativo de demonstração.
Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
.Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
Clique na guia Rede.
Atualize a página para conferir o tráfego de rede.
O painel "Rede" mostra todos os recursos carregados devido à navegação inicial:
Como interpretar as entradas
Cada linha de tráfego de rede registrado representa um único par de solicitação e resposta.
A primeira linha, com o tipo document, é a solicitação de navegação inicial para o
HTML do app da Web. Essa é a origem da hierarquia. Cada uma das solicitações subsequentes
por recursos adicionais (conhecidos como subrecursos do documento principal) flui
dessa origem.
A segunda e terceira linhas, mostrando um CSS stylesheet e um sub-recurso script sendo carregado, são solicitações dependentes que foram iniciadas pelo documento principal.
Observando quando essas solicitações são feitas, o diagrama de hierarquia mostra que elas não são iniciadas até o final do processo de resposta à solicitação de navegação.
Juntos, as solicitações para o documento HTML, CSS e JavaScript são necessárias para exibir a página inteira durante a navegação inicial.
Crie mais algumas solicitações de ambiente de execução
Com o painel Network ainda aberto e gravando, é hora de simular algo comum para muitos apps da Web: outras solicitações de API usadas para adicionar mais dados à página após a conclusão da navegação inicial.
Acione essas outras solicitações clicando em Find Me no app e, em seguida, em Allow no pop-up exibido. Isso permitirá que o site acesse seu local atual:
Quando o app da Web tiver um local para trabalhar, clicar em Find Nearby Wikipedia Entry vai resultar em várias outras solicitações de rede. O resultado será parecido com este:
Interpretar as novas entradas
Como antes, cada linha de tráfego de rede registrado representa um único par de solicitação e resposta.
A primeira linha das novas entradas representa uma solicitação com um tipo de fetch,
que corresponde à
maneira como o app da Web solicita dados
da API Wikipedia.
Todas as linhas a seguir são imagens (png ou jpeg) associadas às entradas da Wikipédia. Embora seja um pouco difícil de notar na captura de tela, as entradas na coluna Cascata fluem diretamente da resposta da API.
Para todas essas solicitações adicionais, o quando vai variar com base em quanto tempo a página ficou aberta antes de você clicar em Encontrar entradas da Wikipédia por proximidade. O mais importante aqui é que when é desconectado da solicitação de navegação inicial. É possível perceber isso pela grande lacuna que existe na tela em cascata, representando um período de tempo entre o carregamento inicial e o momento em que a solicitação da API Wikipédia foi feita.
As solicitações feitas após um intervalo de tempo após uma navegação se enquadram na categoria de "solicitações de execução", ao contrário do conjunto inicial de solicitações usado para exibir a página quando você navegou até ela pela primeira vez.
Resumindo
Após concluir as etapas deste codelab, você está familiarizado com as ferramentas que podem ser usadas para analisar o que qualquer aplicativo da Web carrega.
O painel "Rede" ajuda você a responder à pergunta o que está sendo carregado usando os URLs na coluna "Nome" e os dados na coluna "Tipo", além de quando eles estão sendo carregados, por meio da exibição em hierarquia.
Você também viu que as solicitações feitas por uma página da Web podem (geralmente) ser agrupadas em uma destas duas categorias:
- Solicitações iniciais, feitas logo após acessar uma nova página, para HTML, JavaScript, CSS (e possivelmente outros recursos).
- Solicitações no tempo de execução feitas como resultado da interação do usuário com a página. Geralmente, isso pode começar com uma solicitação para uma API e passar para várias solicitações de acompanhamento com base nos dados da API recuperados.