JavaScript объектный браузер?

Question

Недавно мне было поручено задокументировать большое приложение JavaScript, которое я поддерживал в течение некоторого времени. Так что я хорошо знаю систему.

Но из-за огромного размера приложения это, вероятно, займет много времени, даже с предварительными знаниями о коде и самом исходном коде в несжатом виде.

Итак, я ищу инструменты, которые помогли бы мне исследовать классы и методы и их отношения в JavaScript и, если возможно, документировать их по пути, есть ли один?

Было бы неплохо что-то вроде объектного браузера в VS, но подойдут любые инструменты, которые помогут мне сделать вещи быстрее.

Спасибо!

Answer 1

Firebug Вкладка DOM позволяет просматривать содержимое глобального window объекта, и вы можете проверить конкретный объект, введя inspect(whatever) в командной строке.

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

Вы также можете использовать меню «Параметры» на вкладке DOM, чтобы ограничить отображаемое пользователем определяемыми пользователем функциями и свойствами, что должно помочь уменьшить беспорядок.

Answer 2

Взгляните на Аптана , у них есть схема, которая может помочь вам определить, каковы объекты и иногда их отношения.

Answer 3

Я вижу много людей, которые обсуждают DOM в Firebug. Тем не менее, из вашего вопроса похоже, что вы хотите что-то вроде jsdoc? просто добавьте информацию о типе и классе через комментарии, и jsdoc создаст документацию, включая отношения классов. http://jsdoc.sourceforge.net/

У Google есть форк с добавленной функциональностью http://code.google.com/p/jsdoc-toolkit/

ОБНОВЛЕНИЕ: Это не форк, это переписано разработчиком, который изначально написал jsdoc как скрипт на perl. Он нацелен на то, чтобы быть более адаптируемым, чтобы вы могли использовать любой стиль наследования / событий / свойств js, который вам нравится. Еще одна особенность заключается в том, что она позволяет вам изменять шаблоны, используемые для генерации HTML-кода, гораздо проще.

Answer 4

Firebug + uneval (obj) - простой трюк, который часто бывает полезен.

Answer 5

Это старый вопрос, но позвольте мне ответить на него в любом случае.

1. Используйте IDE . Интегрированные среды разработки были созданы для быстрого перемещения по коду. Ключевыми функциями, которые вы будете использовать во время исследования, являются просмотр структуры файла или схемы, переход к объявлению или использованию и поиск во всем проекте всех экземпляров строки. Если вы используете WebStorm, настройте пользовательскую область для файлов, кроме сгенерированных файлов и node.js, чтобы помочь в поиске.

2. Run 'npm la | less ', в котором перечислены все ваши зависимые модули с описаниями в одну строку. Возможно, вы никогда не видели moment.js и вам не нужно читать документацию, но стоит потратить время на чтение однострочной сводки об этом. Если вам требуется больше информации об инструменте, чем краткая сводка по строке, найдите этот термин в SlideShare. Слайды работают быстрее, чем ReadTheDocs.

3. Документ немного, как вы идете. Я болею за то, чтобы заставлять людей постоянно пользоваться ноутбуками, а не бумажкой. Кроме того, я считаю, что стоит добавить однострочный комментарий к каждому файлу JavaScript. Вы хотите знать, что должно быть в каждом каталоге вашего проекта. Я также рекомендую создать глоссарий точного значения терминов домена в вашей системе, например, что означает «работа» в вашей системе.

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

Вы стремитесь к уровню «концептуальной целостности» (чтобы процитировать Вашдона) или «прогуливаете» программное обеспечение (чтобы процитировать Хайнлиена). Это занимает некоторое время, не может быть обойдено и может быть сделано эффективно.

Answer 6

Firebug (Firefox) / Dragonfly (Opera) может помочь вам с просмотром объектов в реальном времени

Aptana / JS / UML (Eclipse) может помочь с отношениями объектов

Answer 7

Мы не знаем, предназначено ли это приложение JS для работы в веб-браузере ...
Если да, то, как советовали, Firebug (расширение Firefox) отлично подходит для отладки JS и изучения Dom.
На стороне IE у вас есть некоторые инструменты, такие как IEDocMon , Панель инструментов веб-доступности (она делает больше, чем ее название) или Fiddler (не связанные с вашим вопросом, но все еще хороший инструмент, чтобы иметь).