Ferramentas de desenvolvimento do Chrome

254

Ao visualizar informações sobre folhas de estilo na guia Rede das ferramentas de desenvolvimento do Chrome, uma coluna especifica "tamanho" e "conteúdo":

Captura de tela das ferramentas de desenvolvimento com a coluna Tamanho / Conteúdo realçada

Alguém pode esclarecer a diferença entre esses dois números? Em algumas páginas, os números são próximos e outros, em quantidades consideráveis.

google-chrome web-inspector Mike
fonte

1

De acordo com a documentação , atualmente "por padrão, a tabela de solicitações exibe recursos com pequenas linhas; clique no botão Usar linhas grandes de solicitação para aumentar o tamanho de cada linha". Isso também mostraria conteúdo na coluna Tamanho.

Vadzim

324

"Tamanho" é o número de bytes na ligação e "conteúdo" é o tamanho real do recurso. Várias coisas podem torná-las diferentes, incluindo:

Sendo veiculado no cache (pequeno ou 0 "tamanho")
Cabeçalhos de resposta, incluindo cookies ("tamanho" maior que "conteúdo")
Redirecionamentos ou solicitações de autenticação
compressão gzip (tamanho "menor" que "conteúdo", geralmente)

Dos documentos :

Tamanho é o tamanho combinado dos cabeçalhos de resposta (geralmente algumas centenas de bytes) mais o corpo da resposta, conforme entregue pelo servidor. Conteúdo é o tamanho do conteúdo decodificado do recurso. Se o recurso foi carregado no cache do navegador e não na rede, esse campo conterá o texto (do cache).

Mark Brackett
fonte

2

@NiCkNewman Sim Tamanho é o tamanho real dos dados (não a largura de banda btw) no fio (cabeçalhos + conteúdo combinados). Conteúdo é o tamanho do conteúdo inflado e não compactado (por exemplo, se tiver sido compactado em gzip) (cabeçalhos excluídos!).

Israel

3

Pergunta idiota, mas estamos usando 1000 KB por MB aqui ou 1024?

Buttle Butkus

2

@ButtleButkus: Chrome, Firefox e IE / Edge usam o formato JEDEC desatualizado, em que um kilobyte tem 1024 bytes e é escrito como KB. Seria melhor se eles reportassem no formato ISO (base 10) ou escrevessem como KiB / MiB.

okdewit

1

Estou usando o Chrome versão 60.0.3112.113 (versão oficial) (64 bits) no Mac e me deparei com essa mesma pergunta. As capturas de tela nesta pergunta são a única maneira de determinar a diferença entre os números cinza e preto. A versão atual do Chrome que estou usando não parece exibir a subposição "Conteúdo". A coluna diz apenas "Tamanho". Existe algum documento nos documentos ou no Chrome que explique que o número cinza é "Conteúdo". Não consigo encontrar em lugar nenhum.

flyingL123

1

Apenas uma nota que, em novas versões do Chrome, o número cinza não mostra por padrão, você tem que clicar no botão "Usar grandes linhas pedido no "View" bar lá em cima

Snekse

52

Sizeé o tamanho da resposta em si e Contento tamanho do recurso que você está acessando.

Comparar:

cache vazio:

main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB

em cache:

main.js GET 304 Not modified .. Size: 146B Content: 31.42KB

c69
fonte

4

Você provavelmente quer dizer " Sizeé o tamanho da resposta em si" [...] "(" recurso "também tem um significado diferente em termos HTTP).

266 Bruno

1

O que @Bruno disse. Esta resposta está errada e não deveria ter sido aceita.

precisa saber é o seguinte

Sim, essa é uma conversa louca: um PEDIDO DE 32K !?

Iconoclast

1

zomg, você teve 1 ano para editar minha resposta. Apenas um erro de digitação simples, resposta óbvia para uma pergunta trivial, foi respondida dentro de 23 minutos depois que a pergunta foi feita e aceita porque ajudou o autor a entender. Não faço ideia por que tantas pessoas até pesquisam no Google e votam nele ... tanto barulho do nada.

C69

7

Faz sentido editar respostas basicamente corretas, mas que podem ser melhoradas. Sua resposta está no limite, já que você provavelmente quis dizer Resposta , mas mesmo assim dizer que a Solicitação tinha 32K é enganoso para quem não sabia o suficiente para saber que tinha que ser completamente falso. (Seriam as pessoas que fazem perguntas como essa e precisam de respostas corretas sobre elas.) Além disso, dizer algo falso não se qualifica como um erro de digitação . É um erro de fato, não um dedilhado gordo, mesmo que você pretenda dizer algo mais.

Iconoclast

12

Em termos simples, o artigo do Google explica como Tamanho = Tamanho da transferência e Conteúdo = Tamanho real

Esta é minha fórmula baseada na leitura de vários artigos sobre este tópico (e estou aberto a aprimorá-lo ainda mais com seus comentários) Size = Compression (Content) + Response Header

Veja a imagem usada neste artigo

Explicação do Google

Vishwajit G
fonte

5