- PVSM.RU - https://www.pvsm.ru -

Визуализация данных при отладке в Visual Studio Code

Визуализация данных при отладке в Visual Studio Code - 1

Вообще Debugger Visualizers для обычного Visual Studio — это очень старая тема (статья 2009 года [1]), но не очень популярная. В большинстве случаев принято учить сразу дебажить, представляя процессы в голове, а штуки вроде сортировок и списков показываются на доске. В вебе часто визуальную часть предоставляет браузер, и все всем довольны. Но бывает, что списки или деревья в голове уже не умещаются, таблицы хочется отсортировать, а графики строить не выходя из среды отладки. Для всего этого и был создан плагин для VS Code — Debug Visualizer.

Что он умеет рисовать?

  • Массивы и матрицы

    Визуализация данных при отладке в Visual Studio Code - 2

  • Графы через VisJS и Graphviz

    Визуализация данных при отладке в Visual Studio Code - 3

    Визуализация данных при отладке в Visual Studio Code - 4

  • Блок-схемы

    Визуализация данных при отладке в Visual Studio Code - 5

  • Деревья и AST [2]

    Визуализация данных при отладке в Visual Studio Code - 6

    Визуализация данных при отладке в Visual Studio Code - 7

  • Таблицы

    Визуализация данных при отладке в Visual Studio Code - 8

  • Графики через Plotly

    Визуализация данных при отладке в Visual Studio Code - 9

  • Рендер SVG, текста и PNG

Приятные плюшки — многие инструменты анимированы, позволяя отслеживать изменения в динамике. Каждый из них доступен для отдельной установки, без мастер-плагина. Наследуются они из фреймворка Visualization того же автора, в который можно контрибьютить отдельно от плагина.

Поддерживаемые языки

  • Полная поддержка JS и TS
  • Частичная поддержка Go, Python, C#, PHP, Java, C++, Swift и Rust.
    Очевидно, большинство из них находится в статусе «доступно для реализации энтузиастами», но вот питоном, Go и C# уже точно занялись.

Побробовать демки можно здесь [3], плагин доступен в VS Code или по ссылке [4]. После установки плагин доступен по команде Debug Visualizer: New View. Выделенный фрагмент можно передать аргументом командой Debug Visualizer: Use Selection as Expression (Shift + F1).

Так как debug-visualizer работает на библиотеке node-reload, он позволяет работу в режиме hot-reload:

Визуализация данных при отладке в Visual Studio Code - 10

Удачной отладки!

Ссылки:

Github [5]
Автор [6]
Демо [3]
Маркетплейс VS Code [4]

На правах рекламы

Серверы для разработки [7] и размещения ваших проектов — это про наши эпичные! Все серверы «из коробки» защищены от DDoS-атак, скорость интернет-канала 500 Мегабит, автоматическая установка удобной панели управления VestaCP для размещения сайтов и даже автоматическая установка Windows Server на тарифах с 2 ГБ ОЗУ или выше. Лучше один раз попробовать ;)

Визуализация данных при отладке в Visual Studio Code - 11 [7]

Автор: Mikhail

Источник [8]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/visual-studio/356566

Ссылки в тексте:

[1] статья 2009 года: https://habr.com/ru/post/71013/

[2] AST: https://ru.wikipedia.org/wiki/%D0%90%D0%B1%D1%81%D1%82%D1%80%D0%B0%D0%BA%D1%82%D0%BD%D0%BE%D0%B5_%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE

[3] здесь: https://hediet.github.io/visualization/

[4] ссылке: https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer

[5] Github: https://github.com/hediet/vscode-debug-visualizer/

[6] Автор: https://github.com/hediet

[7] Серверы для разработки: https://vdsina.ru/cloud-servers?partner=habr83

[8] Источник: https://habr.com/ru/post/517086/?utm_source=habrahabr&utm_medium=rss&utm_campaign=517086