Отслеживание выполнения ALL Javascript в веб-приложении

Вот ситуация: сложное веб-приложение не работает, и можно последовательно создавать нежелательное поведение. Причина проблемы неизвестна.

Предложение: отслеживать пути выполнения всего кода javascript. По существу, создайте два чудовищных журнала, которые затем могут быть поданы в алгоритм diff, чтобы определить, где поведение, связанное с ошибкой, начинает расходиться (поскольку причина не очевидна из поведения приложения и как понимание, так и получение копии фактического JS-кода из-за большого количества страниц, которые необходимо переключить и скопировать из веб-инспектора. Сделать это сложно, так это то, что все страницы динамически сращиваются вместе с кодом Perl, где значительная часть JS-кода существует только как ( динамические...) Perl-строки).

У веб-инспектора в Chrome нет опции, которую я знаю для регистрации трассировки выполнения. В принципе, я хотел бы написать журнал каждой строки JS, который выполняется, в том порядке, в котором они выполняются. Я не считаю это трудным делом получить, учитывая, что JS VM является однопоточным. Проблема в том, что существующие инструменты, ориентированные на пользователя, не предназначены для этой довольно хардкорной отладки. Если мы посмотрим на Profiler в Dev Tools, он явно способен к тому, что мне нужно, но он в принципе предназначен для профилирования вместо трассировки.

Как я могу начать с этого? Есть ли способ создать Chrome из источника, где я могу

выключить JIT в V8?
регистрировать каждое выражение javascript, оцениваемое V8, в файл

У меня нет опыта работы с Chrome. Так, например, ссылки на dev-builds/branches/versions/distros из Chrome/Chromium/Canary (какая разница?) приветствуются.

В этот момент кажется, что инструментарий для браузера с мощным трассировкой js по-прежнему будет проще, чем переработать багги-приложение. Архитектура страницы - это катастрофа, но функциональность сложна и почти полностью работает. Мне просто нужно найти один недостающий кусок.

В качестве альтернативы, если инструменты такого рода уже существуют, каковы некоторые другие ключевые слова, с которыми я могу их искать? "Трассировка кода" - это почти единственное, что я могу придумать.

Я протестировал dynaTrace, что было счастливым совпадением, поскольку наше приложение поддерживает IE (действительно, поддержка Chrome просто вышла из бета-версии), но это делает не создает текстовый дамп, он в основном производит массивный Win32 UI expando-tree, который невозможно отличить. Мне это очень грустно, потому что я знаю, насколько сложнее было сделать представление следа таким образом, и все же оно оказывается почти бесполезным. Кто собирается прокручивать вверх и вниз по этому древовидному представлению и видеть что-нибудь действительно полезное в нем, в чем-либо, кроме игрушечного примера веб-приложения?

Ответ 1

Если вы разрабатываете большое веб-приложение, всегда полезно следовать стратегии, основанной на тестах, для его кодирующей части. Используя несколько советов, вы можете сделать простой unit тест script (используя QUnit), чтобы проверить практически все аспекты вашего приложения. Вот некоторые потенциальные ошибки и некоторые способы их решения.

Сделайте себя обработчиками для регистрации длинных живых объектов и обработчика, чтобы закрыть их безопасным способом. Если безопасный путь не преуспевает, то управление объектом само по себе не выполняется. Одним из примеров может быть представление о зомби с базовой зоной. Либо представление имеет плохой код в закрытом разделе, а закрытие родителя не подключено или не происходит бесконечный цикл. Тестирование всех событий просмотра также хорошо, хотя и утомительно.
Поместив весь код для извлечения данных внутри определенного модуля (я часто использую кучу объектов Backbone.Model для каждой таблицы/документа в моей базе данных) и обработчиков для каждого с использованием шаблона reqres, вы можете проверить их 1 на 1, чтобы убедиться, что все они выбраны и сохранены правильно.
Если требуется сложное вычисление, отрисуйте его в функции или модуле, чтобы его можно было легко протестировать с помощью известных данных.
Если ваше приложение использует привязку данных, хорошей политикой является наличие схемы JSON для всех данных, подлежащих тестированию, против ваших представлений, содержащих ваши привязки. Отметьте против схемы все необходимые данные. Это также применяется к вашей Backbone.Model.
Использование хорошей среды разработки также помогает. PyCharm (если вы используете Python для backend), или WebStorm очень хороши для тестирования и разработки JavaScript/CoffeeScript. Вы можете остановиться и изучить свой код в определенных местах, в вашем браузере! Также он запускает ваш код для автоматического завершения, и вы можете увидеть некоторые из ошибок таким образом.
Я просто не могу поощрять использование модулей в вашем коде. Хотя для этого нет официального способа JavaScript (в следующем проекте ECMAScript), вы все равно можете использовать для этого хорошие библиотеки. Хорошими являются: RequireJS, CommonJS или Marionette.Module(если вы используете Marionette в качестве своей структуры). Я думаю, что Ember/AngularJS также предлагает такую функциональность, но я не работал с ними лично, поэтому не уверен.

Это может не дать вам немедленное решение вашей проблемы, и я не думаю, что (ИМО) есть простой. Моей целью было показать вам способы развития, чтобы ошибки можно было легко выявить и устранить, и все это (в зависимости от вашего модульного тестирования) на этапе разработки. Ошибки всегда будут иметь место, поскольку наше программистское эго хочет, чтобы мы верили в обратное. Надеюсь, я помог:)

Ответ 2

Я бы предложил стратегию разделения и завоевания, сначала путем регистрации, и второй с помощью кода. Оберните подозрительные методы кода с консольными входами и выходами событий, и когда ошибка возникает, надеюсь, что это происходит между или после некоторого события. Если ведение журнала событий не проливает свет, добавьте части кода в новую страницу/приложение. Divide и conquer найдут, когда начнется ошибка.

Ответ 3

Итак, похоже, вы уже в области странных, поэтому я думаю о странном решении. Я ничего не знаю о бэкэнде хром сам, поэтому мы в одной лодке, но если вы чувствуете смелость здесь идею. Возможно, вы могли бы найти/заменить каждую новую строку в ваших файлах javascript куском кода, который регистрирует либо глобальную строку, либо консоль. A) какой файл вы используете, b) содержимое "this" или что-то полезное для вас, и, возможно, даже в) время. Это, по крайней мере, заставит вас начать. Удостоверьтесь, что она завернута в нечто отличное, поэтому вы можете легко удалить ее.