Что такое функция «Проверка элемента» в Google Chrome?

84119
Prashant

Что такое функция проверки элемента в Google Chrome и как ее использовать? Когда в окне Inspect Element я нажимаю вкладку Resource, он не показывает время загрузки. Как я могу эффективно использовать эту функцию?

Я вижу следующий экран, когда открываю «Проверка элемента», щелкнув правой кнопкой мыши на странице и выбрав пункт «Проверка элемента»:

alt text

4

4 ответа на вопрос

7
Dan Walker

Inspect Elementверсия Chrome Firebug Это не совсем полнофункциональный, но все же очень полезный инструмент.

Убедитесь, что вкладка «Ресурс» включена - в противном случае вы не будете получать время загрузки. Нажмите большую кнопку «Включить отслеживание ресурсов».

Screenshot

@ Дан, я вижу совершенно другой экран, чем ты, я обновил свой вопрос своим скриншотом, что я вижу, я не вижу вкладку Скрипты и профили. Пожалуйста, скажите мне, почему это происходит? Prashant 14 лет назад 0
Это, вероятно, отличается, потому что я работаю на канале разработчика для Chrome вместо стабильной версии. Единственный совет, который я могу дать, это попробовать как перезапустить Chrome, так и перезагрузить страницу. Dan Walker 14 лет назад 0
`Я работаю на канале разработчика`, что это такое, и могу ли я тоже запустить свой браузер так же, как вы работаете, не могли бы вы подсказать мне, как это сделать ?? Prashant 14 лет назад 0
http://dev.chromium.org/getting-involved/dev-channel - однако я бы с осторожностью отнесся к его установке, особенно если это ваш основной браузер. Время от времени это может быть склонным к сбоям и, казалось бы, случайным зависаниям. Dan Walker 14 лет назад 0
4
jtbandes

Как уже упоминали другие, это WebKit Web Inspector, который позволяет вам проверять HTML и другие ресурсы страницы, а также оценивать время загрузки и тому подобное. Вот скриншот использования его на этой странице (от Safari; тот же инспектор):

WebKit web inspector

2
John T

Inspect Element позволяет вам проверять, какой элемент HTML находится ближе всего к области, которую вы щелкнули, точно так же, как Firebx- расширение Firefox . Если вы хотите увидеть время, которое необходимо включить для отслеживания ресурсов, оно должно запросить вас об этом.

1
Fiasco Labs

Load Time Не уверен, какую версию Chrome используют все остальные, 14.0.835.202 Инструменты разработчика могут выбирать из чего угодно. Одним из наиболее полезных является проверка элемента и а) живое редактирование HTML или б) живое редактирование CSS для веб-разработки. Как только вы все заработаете, вы можете отредактировать реальную вещь, и вам не нужно будет выполнять танец edit-flush-reload, чтобы увидеть изменения макета.

Вот раздел Network, показывающий время загрузки элемента страницы (например, YSlow в Firebug).

Он оказался намного быстрее и лучше для моего использования, чем Firebug в Firefox.