Визуализация результатов профилирования в chrome://tracing

При профилировании сложных библиотек и фреймворков типа React и Angular в полученных результатах очень много визуального шума от всевозможных обёрток и утилитных функций, которые загромождают стек. Можно и нужно сделать свой собственный код для более высокоуровневого профилирования (например, в React замерять только времена стандартных методов жизненного цикла компонента: shouldComponentUpdate, render и т.д.).

Встаёт вопрос визуализации полученных данных. Таблички - хорошо, но таймлайн или flame chart - нагляднее и легче для анализа. Можно быстро набросать визуализатор с помощью Google Charts Timeline, но хочется чего-то более мощного и интерактивного, как в Dev tools, с возможностью масштабирования и перемещения вдоль временной оси.



К счастью, есть готовый open source визуализатор Trace-Viewer, который уже встроен в Chrome.

Всё, что нужно для его использвания:

1. Получить результат профилирования в формате trace_event
2. Открыть в Chrome адрес chrome://tracing
3. По кнопке Load загрузить свой JSON

Также в репозитории Trace-Viewer есть конвертер trace2html, который создаёт полностью независимый HTML-документ, пригодный для открытия в любом браузере на любой другой машине.

Формат trace_event несложен. В простейшем случае JSON может выглядеть примерно так:

{

    "traceEvents": [

        {"pid": 1, "tid": 1, "ts": 1, "dur": 100000, "ph": "X", "name": "main", "args": {"name": "main entry point", "ms": 100}},

        {"pid": 1, "tid": 1, "ts": 100, "dur": 20000, "ph": "X", "name": "sub", "args": {"name": "subroutine", "ms": 20}}

    ],

    "metaInfoCreated": "01.10.2018 19:00 local run"

}

События могут идти почти в любом порядке, нет необходимости как-то связывать родительские и дочерние события - Trace Viewer сам правильно их выстроит в нужной иерархии и временной последовательности.

• pid, tid - идентификаторы процесса и потока; если приложение многопоточное или запущено в нескольких экземплярах, то эти поля позволят показать таймлайны для каждого экземпляра параллельно друг другу
• ts, dur - отметка времени начала и продолжительности выполнения блока, в микросекундах; нулём можно считать начало выполнения приложения, начало запроса и т.п.
• ph - тип события, "X" - полное событие, с началом и окончанием, в документации описаны и другие типы событий
• name - название события
• args - любые дополнительные данные (расшифровка имени, пояснения и т.п.), будут показаны при выборе события в Trace Viewer
• дополнительные поля навроде "metaInfoCreated" рядом с "traceEvents" - произвольная метаинформация

P.S. Ничто не ново под Луной: http://aras-p.info/blog/2017/01/23/Chrome-Tracing-as-Profiler-Frontend/