Инструменты для визуализации объектов Javascript в реальном времени

Question

Как и многие люди, мой мозг имеет тенденцию хорошо работать с визуальной (ака-текстовой) информацией для чтения, письма и создания.

Каковы некоторые инструменты, которые каким-то образом позволяют мне визуально видеть мою текущую среду javascript?

Одним из очевидных примеров является просто поместить на экран (или HTML-страницу) один квадрат для представления каждого объекта, который в настоящее время находится в памяти. В поле может быть метка, которая является переменной, привязанной в данный момент к объекту. Если я использую библиотеку pubsub, ящик может мгновенно мигать, когда объект, который он представляет, «получает» сообщение, на которое оно подписано. Нажатие на поле может дать мне список всех общедоступных методов для этого объекта, и если код имеет аннотации подписи метода, я бы увидел имена его параметров.

Все, что похоже на то, что в Javascript и работает в текущем процессе, приветствуется! Кроме того, он должен быть в форме библиотеки javscript, которую я могу применить к существующему коду, но примеры такого инструмента, которые можно найти в некоторых плагинах IDE или браузера в качестве иллюстрации, приветствуются.

Answer 1

Хотя он не использует коробки, которые могут сохранить экранную недвижимость, вы дали выстрел из огня? Хотя они не являются графическими ящиками, они используют расширяемые/сбрасываемые текстовые элементы, чтобы визуализировать приложение.

И это не ограничивается JS. Вы можете использовать элемент picker для выбора элементов html и посмотреть, как ваш JS фактически изменяет DOM. Итак, скажем, в фокусе, вы применяете некоторый css к текстовому поле; вы можете видеть, что в реальном времени с использованием Firebug ...

Это действительно отличный инструмент, который делает ALOT. Вы можете отлаживать JS по строкам, размещать часы на переменных (видеть все их методы и значения, видеть, как их значения изменяются в реальном времени или изменять их сами по мере запуска программы!), См., Как html и js являются читать и затрагивать в режиме реального времени и многое другое ... Есть также плагины (или, по крайней мере, когда-то были), чтобы помочь в отладке других языков, в частности, я вспоминаю плагин ActionScript, который позволяет мне видеть следы от FLASH/SWF объекты по мере их возникновения и плагин PHP.

Если вы еще не пробовали. Ты должен.

Если вас интересует более низкий уровень; как в следующих HTTP-вызовах, в деталях; репликация медленных соединений; подделка вашего пользовательского агента (может быть сделано из большинства браузеров без этого, хотя!), а затем попробуйте Fiddler2 ... Я не часто его использую, но когда я имею дело с труднодоступными инструментами AJAX или http , с большим количеством звонков назад/вперед, это была спасательная жизнь.

Надеюсь, это поможет.