Как определить размер источника страницы в Chrome?

31

Очевидно, я хочу получить ответ, не сохраняя страницу. Это кажется базовым, но я не могу понять, как это сделать. Если для этого нужен плагин, все в порядке. Было бы неплохо, если бы решение охватывало также листы стилей, сценарии и изображения, связанные со страницей.

xxzoid
источник

Ответы:

42

Откройте инструменты разработчика ( Ctrl+ Shift+ Iили значок настроек в правом верхнем углу окна браузера => Tools=> Developer tools) на нужной странице, перейдите на вкладку Сеть и перезагрузите страницу .

В столбце « Размер» вы увидите размер всего загруженного ( документы, таблицы стилей, изображения, сценарии, ... ). Вы можете включить фильтр, чтобы помочь вам найти только необходимые вещи в нижней центральной части рамки инструментов разработчика.

Cust0dian
источник
2
Благодарность! Необходимость перезагрузки не так интуитивно понятна.
xxzoid
4
Вид отстой. Если щелкнуть правой кнопкой мыши -> «просмотреть свойства» или что-то подобное на уже загруженной странице, это будет гораздо более интуитивно понятно.
tholu
14
Стоит добавить, что общий размер всех запросов к серверу указан в самом низу, когда у вас открыта вкладка Сеть. Это не сразу очевидно
Эйдан Майлз
В более поздней версии Chrome общий размер в нижней части вкладки «Сеть» отображается как число передаваемых КБ / МБ , что должно равняться сумме столбца « Размер» .
Клинт Пахл
3

Я создал свой 3-й Chrome Extension Page Size Inspector, который быстро сообщает о размере страницы, использовании кэша, сетевых запросах и времени загрузки веб-страницы удобным способом.

Томи Микельссон
источник
очень круто, ура!
Джонатан Лалиберте
1

Существует расширение под названием « Быстрый просмотр исходного кода », которое кэширует все ресурсы при загрузке страницы. Откройте средство просмотра (синий значок), размер (количество байтов) отображается на панели навигации слева.

basic6
источник