Este codelab mostra o processo de interpretação de todo o tráfego de rede de um aplicativo de exemplo um pouco complexo. Ao final do exercício, você terá as habilidades necessárias para descobrir o que seu aplicativo da Web está carregando e quando ele está fazendo cada solicitação.
Navegue até o painel de rede.
Navegue até o painel "Rede" para conferir o tráfego de rede do aplicativo de demonstração.
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Recarregue a página para ver o tráfego de rede.
O painel "Rede" mostra todos os recursos carregados devido à sua navegação inicial:
Como interpretar as entradas
Cada linha do tráfego de rede gravado 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 cascata. Cada uma das solicitações subsequentes de recursos adicionais (conhecidos como sub-recursos do documento principal) flui dessa origem original.
As segunda e terceira linhas, que mostram um stylesheet CSS e um subrecurso script
sendo carregados, 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 do documento HTML, CSS e JavaScript são necessárias para mostrar a página inteira durante a navegação inicial.
Criar outras solicitações de tempo de execução
Com o painel Rede 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 depois que a navegação inicial é concluída.
Para acionar essas solicitações adicionais, clique em Encontre-me no app e em Permitir no pop-up que aparece. Isso vai permitir que o site acesse sua localização atual:
Depois que o web app tem um local para trabalhar, clicar em Encontrar entradas da Wikipédia próximas resulta em várias outras solicitações de rede. Você vai encontrar algo assim:
Interpretar as novas entradas
Como antes, cada linha de tráfego de rede gravado representa um único par de solicitação e resposta.
A primeira linha das novas entradas representa uma solicitação do tipo fetch, que corresponde à maneira como o web app solicita dados da API da Wikipédia.
As linhas a seguir são imagens (png ou jpeg) associadas às entradas da Wikipédia. 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 quando vai variar de acordo com o tempo que você deixou a página aberta antes de clicar em Encontrar entradas da Wikipédia próximas. O mais importante aqui é que o when está desconectado da solicitação de navegação inicial. É possível perceber isso pela grande lacuna que existe na exibição em cascata, representando um período de tempo que passou entre o carregamento inicial e quando a solicitação da API Wikipedia é feita.
As solicitações feitas após um intervalo de tempo após uma navegação se enquadram na categoria "solicitações de tempo de execução", em vez do conjunto inicial de solicitações usadas para mostrar a página quando você navegou até ela 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 o que está sendo carregado, usando os URLs na coluna "Nome" e os dados na coluna "Tipo", além de quando isso está acontecendo, usando a exibição em cascata.
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 navegar para uma nova página, para o HTML, JavaScript, CSS (e possivelmente outros recursos).
- Solicitações de tempo de execução feitas como resultado da interação do usuário com a página. Isso geralmente começa com uma solicitação para uma API e depois flui para várias solicitações de acompanhamento com base nos dados recuperados da API.