Pull to refresh

dynaTrace AJAX — мощный профайлер JS

Reading time 3 min
Views 6.7K
Недавно в обсуждении статьи шкала браузерности разговор зашел о том, что IE не так уж убог и его должен иметь на своем компьютере каждый уважающий себя веб-разработчик не только для того, чтобы смотреть не съехала ли там верстка, но и потому что для IE созданы, я считаю, лучшие на данные момент средства для дебага и профилирования JS.
Одно из таких средств — это dynaTrace Ajax, скачать который можно здесь.

Что же такое dynaTrace? Это мощнейший инструмент для расширенного профилирования загрузки вашей страницы, он записывает все, что происходит на странице в процессе ее загрузки, и потом предоставляет подробный отчет.
Рассмотрим подробнее, какие данные мы можем получить из отчета. Для этого запустим dynaTrace, и нажмем Start tracing и зайдем, для примера, на habrahabr.
После загрузки страницы мы получаем возможность просмотреть подробный отчет.

Summary


Что мы можем увидеть на вкладке summary?
Во-первых, данные о загрузке страницы с сервера: сколько времени было потрачено на что, и какие файлы у нас грузились с сервера а какие брались из кеша:

Во-вторых, можно посмотреть, сколько времени было потрачено на JS и на какого рода операции это время было потрачено:

из картинки видно что хабр использует JS-фреймворк mootools и основная часть работы происходит внутри него, а вызовы происходят из script и ничего не повешено на Load ивент.
более интересную картинку можно получить, например, на яндексе:

Так же на вкладке summary мы видим timeline:

там отображается активность процессора во время загрузки страницы, время потраченное на JS, на рендеринг страницы и на сетевую активность. Внизу строка event показывает события, которые произошли со страницей. При наведении курсора мышки на какой-либо из блоков временной шкалы мы видим более подробно, что там произошло.
Как мы видим, событие Load произошло только через 45 секунд после начала загрузки страницы, и связано это с тем, что какая-то картинка грузилась 42 секунды. Для хабра это не страшно, потому что на Load у него ничего не повешено, но на других проектах, которые вешают обработчик на событие Load, эта timeline может помочь увидеть узкие места, которые не дают браузеру вызвать событие Load.

Все диаграммы на вкладке summary кликабельны, а даблклик по части диаграммы ведет на другую вкладку с установленным фильтром. Например, дабл-клик по диаграмме, которая отображает отношение закешированных и не закешированных элементов на странице приведет на вкладку Network с включенным фильтром для отображения только тех элементов, которые были закешированы.

Network



На вкладке Network мы видим таблицу в которой перечислено все, что грузилось из сети во время загрузки страницы. При выборе какой-либо строки в таблице в нижних окошках видны заголовки и собственно контент, который был загружен.
В таблице видно время загрузки и TimeChart.
Данные в таблице можно отфильтровать:


Pure Paths



На вкладке Pure Paths мы видим всю историю активности которая происходила на нашей странице, включая такие вещи как рендеринг страницы и время, потраченное на парсинг яваскрипта.
Выберем в верхней таблице, для примера, строчку с Я.метрикой и тогда в средней таблице мы получим дерево вызовов функций: какие функции вызывались, сколько времени было потрачено на их парсинг и выполнение, к каким DOM-методам они обращались.
Если выбрать одну из веток дерева то в нижней левой таблице мы увидим все функции, вызовы которых совершались в этой ветке и время их выполнения, а в правой нижней таблице — код вызванной функции.

этот инструмент может помочь в поиске функций, которые тормозят работу вашего яваскрипта.

Hot Spots



Ну и последняя вкладка это вкладка Hot Spots.
На этой вкладке мы видим, на вызовы каких функций тратится больше всего времени, что опять же позволяет нам выявить узкие места и оптимизировать наш JS-код.

Вот собственно и весь рассказ :)

Инструмент очень мощный, и, по-моему, must have для любого уважающего себя JS-разработчика, который работает под Windows.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+7
Comments 4
Comments Comments 4

Articles