Este codelab orienta você no processo de interpretação de todo o tráfego de rede de um aplicativo de exemplo um tanto complexo. Ao final do exercício, você terá as habilidades necessárias para descobrir o que seu próprio aplicativo da Web está carregando e quando ele faz cada solicitação.
Acesse o painel de rede
Navegue até o painel de rede para conferir o tráfego de rede do aplicativo de demonstração.
Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen
.Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
Clique na guia Rede.
Atualize a página para ver o tráfego de rede.
O painel "Network" mostra todos os recursos carregados devido à sua navegação inicial:
Como interpretar as entradas
Cada linha de tráfego de rede gravada 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
posteriores de outros recursos (conhecidos como subrecursos do documento principal) fluem
dessa origem original.
A segunda e a terceira linhas, que mostram um stylesheet do CSS e um subrecurso script
sendo carregado, são solicitações dependentes iniciadas pelo documento principal.
Analisando quando essas solicitações são feitas, o diagrama em cascata mostra que elas não são iniciadas até muito tarde no processo de resposta à solicitação de navegação.
Juntas, as solicitações para o documento HTML, CSS e JavaScript são necessárias para mostrar a página inteira durante a navegação inicial.
Criar algumas outras solicitações de execução
Com o painel Network ainda aberto e gravando, é hora de simular algo comum para muitos apps da Web: solicitações de API adicionais usadas para adicionar mais dados à página após a navegação inicial ser concluída.
Para acionar essas solicitações adicionais, clique em Find Me no app e em Allow no pop-up que aparece. Isso permite que o site acesse seu local atual:
Depois que o app da Web tiver um local para trabalhar, clicar em Find Nearby Wikipedia Entries vai resultar em várias outras solicitações de rede. Você vai encontrar algo como este:
Interpretar as novas entradas
Como antes, cada linha de tráfego de rede gravada 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 da Wikipedia.
Todas as linhas a seguir são imagens (png ou jpeg) associadas às
entradas da Wikipedia. Embora seja um pouco difícil de ver na captura de tela, as entradas na coluna "Cascata" fluem diretamente da resposta da API.
Para todas essas solicitações adicionais, o when vai variar com base no tempo que a página ficou aberta antes de você clicar em Find Nearby Wikipedia Entries. O mais importante aqui é que o when está desconectado da solicitação de navegação inicial. É possível saber isso pela grande lacuna que existe na tela em cascata, que representa um período de tempo entre o carregamento inicial e o momento em que a solicitação da API da Wikipedia é feita.
As solicitações feitas após um intervalo após uma navegação se enquadram na categoria de "solicitações de execução", em vez do conjunto inicial de solicitações usadas para mostrar a página quando você a acessou pela primeira vez.
Resumindo
Depois de seguir as etapas deste codelab, você já conhece as ferramentas que podem ser usadas para analisar o que qualquer aplicativo da Web carrega.
O painel "Rede" ajuda a responder à pergunta sobre o que está sendo carregado, usando os URLs na coluna "Nome" e os dados na coluna "Tipo", além de quando ele está sendo carregado, usando a exibição em cascata.
Você também aprendeu que as solicitações feitas por uma página da Web geralmente podem ser agrupadas em uma destas duas categorias:
- Solicitações iniciais, feitas logo após a navegação para uma nova página, para HTML, JavaScript, CSS (e possivelmente outros recursos).
- Solicitações de execução feitas como resultado da interação do usuário com a página. Isso pode começar com uma solicitação para uma API e depois fluir para várias solicitações de acompanhamento com base nos dados da API recuperados.