Who needs Graphviz when you can build it yourself?
Команда SpiderMonkey разработала новый инструмент для визуализации компиляции JavaScript и WebAssembly, создав собственный алгоритм расположения графов вместо использования Graphviz или Mermaid. Когда оптимизирующий компилятор Ion активен, система генерирует интерактивные графики, показывающие обработку и оптимизацию функций. Пользователи могут писать JavaScript-код и видеть в реальном времени, как изменяется граф, с возможностью навигации, масштабирования и просмотра различных этапов оптимизации.
Автор статьи не был удовлетворен выводом существующих инструментов, которые не отражали структуру исходного кода и создавали нестабильные макеты. Новый алгоритм, реализованный менее чем в 1000 строк кода, прост, быстр и produces высококачественный результат. Он учитывает специфические ограничения графов управления потоком, такие как наличие хорошо определенных циклов и необратимость потока управления, что позволяет создавать более интуитивные визуализации.
Для разработки автор изучал алгоритм Сугиямы, используемый в Graphviz, но создал собственное решение, специально адаптированное под нужды компилятора. Интерактивный инструмент значительно упрощает анализ и отладку сложных графов компиляции, позволяя отслеживать инструкции и блоки кода на разных этапах оптимизации.