Este codelab mostra o processo de interpretação de toda a rede o tráfego de um aplicativo de amostra complexo. Ao final do exercício, você terá as habilidades necessárias para descobrir qual é seu próprio aplicativo da Web. carregando e quando ele está fazendo cada solicitação.
Navegue até o painel Network
Acesse o painel Network para ver o tráfego de rede da demonstração para o aplicativo.
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 ao navegação:
Como interpretar as entradas
Cada linha do tráfego de rede registrado representa uma solicitação e uma resposta par.
A primeira linha, com o tipo document, é a solicitação de navegação inicial para o
HTML de um app da Web. Essa é a origem da hierarquia. cada uma das
fluxo de solicitações de recursos adicionais (conhecidos como sub-recursos do documento principal)
desta fonte original.
A segunda e a terceira linhas, mostrando um CSS stylesheet e um sub-recurso script.
são carregadas, são solicitações dependentes que foram iniciadas pelo documento principal.
Analisando quando essas solicitações são feitas, o diagrama de cascata mostra que não são iniciadas até muito tarde no processo de resposta solicitação de navegação.
Juntos, as solicitações para o documento HTML, CSS e JavaScript são necessários 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 aplicativos da web: solicitações de API adicionais usadas para adicionar mais dados ao página após a conclusão da navegação inicial.
Para acionar essas solicitações adicionais, clique em Encontre-me no app e, em seguida, Clique em Allow para permitir no pop-up. Isso permitirá que o site acesse seu local atual:
Depois que o web app tiver um local com o qual trabalhar, clique em Localizar nas proximidades Entradas da Wikipédia resulta em várias solicitações de rede adicionais. Você vai aparecer algo assim:
Interpretar as novas entradas
Como antes, cada linha do tráfego de rede registrado representa uma única solicitação e resposta.
A primeira linha das novas entradas representa uma solicitação com um tipo de fetch.
que corresponde à
forma como o app da Web solicita dados
da API da Wikipédia.
Todas as linhas a seguir são imagens (png ou jpeg) associadas ao
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 parâmetro quando variará com base em como tempo em que a página está aberta antes de você clicar em Encontrar a Wikipédia Entradas. O mais importante aqui é que quando é desconectado da solicitação de navegação inicial. É possível notar isso pela grande lacuna que existe a exibição em Cascata, representando um período de tempo que passou entre o carregamento inicial e quando a solicitação da API da Wikipédia é feita.
As solicitações feitas após um intervalo de tempo após uma navegação se enquadram na categoria de "solicitações de tempo de execução", em oposição ao conjunto inicial de solicitações usado para exibir da página quando a acessou pela primeira vez.
Resumindo
Após concluir as etapas deste codelab, você conheceu a que podem ser usadas para analisar o que qualquer aplicativo da Web carrega.
O painel Network ajuda a responder a pergunta sobre o que está sendo carregado, via os URLs na coluna "Nome" e os dados na coluna "Tipo", além de quando que estão sendo carregados, pela 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 a navegação para uma nova página, para o HTML, JavaScript, CSS (e potencialmente outros recursos).
- Solicitações de tempo de execução feitas como resultado da interação do usuário com a página. Isso muitas vezes podem começar com uma solicitação para uma API e, em seguida, fluir para várias solicitações de acompanhamento com base nos dados da API recuperados.