JavaScript трассировка, отладка, профилирование – заполнение пробелов

Годами я использовал Chrome DevTools, Firebug и даже Opera Dragonfly для отладки, трасировки и профилирования моего JavaScript кода. Замечу, что использовал эти замечательные инструменты не только для работы с JavaScript, но и для отслеживания событий сети, отладки CSS, работы с DOM.

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

image


Так получается, что я часто просматриваю JavaScript код, с которым я слабо знаком, если вообще знаком. Например, просто изучаю сторонний код для общего развития, пытаюсь понять как работает какое-нибудь jQuery расширение, которое не хочет работать так я предполагал, исправляю баги, знакомлюсь с кодом MVC фреймворка, который хочется понимать лучше, просматриваю код коллег по проекту, иногда даже свой собственный код, который забыл как работает (надеюсь не я один такой). Так бывает что даже нахождение места с чего свое увлекательное путешествие в этот код (разбитый на многие файлы, местами минифицированный, частенько запутанный) оказывается головоломкой.

После беглого осмотра и осознания того, что смиренное созерцание килобайт исходников не особо продуктивно, я запускаю код. Воодушевленно ставлю точку останова в каком-нибудь знакомом месте, немного падаю духом когда в очередной раз попадаю в отладчике в минифицированный jQuery (а кто не падает духом?), раздражаюсь когда в очередной раз перешагиваю в отладчике через нужный кусок кода, яростно перепрыгиваю циклы чтобы не застрять там на тысячу итераций, затая дыхание выставляю условные точки останова, апатично жму F11 снова и снова в страхе пропустить что-нибудь важное. Звучит знакомо?

image

В определенных случаях на помощь также приходит console, но все наверное помнят то “волшебное” чувство, когда забываешь удалить console.log (или, прости господи, alert) перед коммитом. К счастью к некоторым тут на помощь приходит еще и jshint, который ненавязчиво напоминает. Бывает хуже, ты думаешь что на помощь приходит console, а получаешь бездушное “console is undefined ”. Если у вас такого не было, то вы или счастливчик или новичок.

А как насчет шального Гейзенбага? Баг заведен, F12 нажата, точки останова расставлены с безошибочной точностью и холодным расчетом охотника профессионала, описанные шаги выполнены, а бага как и не бывало?

Даже не хочется начинать грустную песнь об ошибках воспроизводящихся только в определенных браузерах/устройствах/платформах, где нет спасительных DevTools. Нет, иногда (хоть и не всегда) доступны альтернативы, часто более не поддерживаемые, тяжеловесные, трудные в установке и использовании, не имеющие именно той функциональности которая вам нужна. Да старые версии IE, я смотрю на вас. Справедливости ради, несмотря на то что охота на ведьм это всегда весело, грешны не только старые версии IE. Создание окружения для отладки на мобильных устройствах не менее грустно (специфические требования к платформе, симуляторы, доп. программное обеспечение, SDK, конфигурация устройств и прочее) — Androind, iPnone.

Наконец профилирование производительности. С помощью отличного сервиса JsPerf можно для разных браузеров посмотреть чужие или погонять свои оптимизационные идеи, это когда идеи есть. У Chrome DevTools и Firebug есть встроенные профайлеры, берущие точные цифры из соответственно движков V8 и SpiderMonkey, но мне никогда не было удобно пользоваться интерфейсом, где эти цифры представлены, не нравилось то, что профилирование нужно постоянно включать и нет возможности просто включить один раз и постоянно иметь включенным по умолчанию, также никогда не отличалась весельем вставка console.profile/console.time в код (и особенно забывание их убрать).

image

Учитывая вышесказанное, однажды меня посетила мысль – а неплохо бы было иметь инструмент, которые решает хотя бы часть означенных проблем и:
  • позволяет видеть какие события происходят в коде прямо сейчас, открывать дерево вызовов и подсвеченный путь выполнения кода
  • позволяет фильтровать скрипты и события и мониторить только то, что мне интересно в данный момент
  • позволяет выполнять определенные сценарии в приложении и затем анализировать что произошло, включая доступ к данным в момент выполнения
  • позволяет трассировать, отлаживать, профилировать код в любом браузере/устройстве/платформе
  • позволяет быстро, удобно и постоянно видеть производительность функций, сразу видеть что из недавно добавленного может просадить быстродействие, тажке для поддержки принятия решения, что именно можно попробовать оптимизировать
  • позволяет видеть подсвеченный пусть выполнения конкретного сценария
  • позволяет изучить незнакомый код, анализируя процесс его выполнения


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

Я рад если еще не потерял вас после дисклеймера о рекламе. Как и на большинство моих коллег, на меня наложено старинное программистское заклятие “написарум тулзум которус немогус найтилус”, посему, прошу приветствовать spy-js — новый инструмент для работы с JavaScript, призванный заполнить пробелы существующих инструментов, взглянуть на отладку, профилирование, трассировку с другого угла. Проект находится в бета стадии, но бета версия уже умеет большинство из озвученного выше списка пожеланий. Общее направление развития — это не заменять возможности существующих DevTools/Firebug, а предоставить альтернативное решение проблем и заполнить возможные пробелы этих инструментов.

image

Стихийно повинуясь следуя закону Этвуда, о том что все что может быть написано на JavaScript — будет на нем написано, spy-js в основном написан на языке для которого он написан (эк, завернул).

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

Проект никогда бы не был закончен без использования замечательных проектов с открытым исходным кодом, таких как: nodejs, esprima, express, grunt, socket.io, jQuery, knockout.js, underscore, ace, bootstrap. Перечислены далеко не все использованные проекты.

В данный момент бесплатная бета версия spy-js доступна для скачивания на http://spy-js.com. Исходный код самого проекта не является открытым. Документация, примеры конфигурации, возможность заводить баги, задавать вопросы и так далее, в данный момент осуществляется с помощью открытого github репозитория. Вопросы также можно задавать на stack overflow с тегом spy-js.

image

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

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 21

    +1
    Очень круто.
    Как насчет реакции и не сильно-ли замедляется исходный код?

    P.S. traceGL в этом плене очень шустрый, но под Mac OS он не работает из-за драйверов ATI.
      0
      Спасибо за отзыв,

      тестировал на крупных проектах, в целом код замедляется незначительно, еще сильно зависит от настройки, в частности сбора данных во время выполнения (параметры функций, возвращаемые значения). Можно посмотреть совет по получению наилучшей производительности в примере конфигурационного файла.
        0
        Что может быть не совсем быстрым — это начальная инструментация больших js файлов (таких как большие библиотеки). Но, один раз инструментированный ресурс кэшируется и последующие разы все работает быстрее. В примере конфигурационного файла указано как можно не инструментировать (и соответственно не трейсить) файлы, которые неинтересны в данный момент (например библиотеки, утилиты и прочее). Так и шума меньше и работает шустрее.
        0
        Вроде код открытый. После деобфускации и небольшого рефакторинга имён переменных вполне читаемо.
          +1
          Код проекта не является открытым (то есть это, как минимум в настоящий момент, бесплатный, но не open source проект), но так как это JavaScript, то закрыть/защитить его сложно чем-то большим, чем указанием в коде:

          * Using/copying/sharing/distributing the code in any way
          * (different from licensed product usage described in EULA)
          * is not allowed without owner's written permission.

          Если есть интерес, могу написать более подробную статью, с примерами не минифицированного кода с нормальными именами переменными.
            –1
            Да это я понял, просто забавно в случае жс слышать о том что код закрыт. Интерес есть, но скорее не к коду, а к концептуальному подходу модификации жс кода. Хотя это можно и руками раскрутить, но хотелось бы почитать про грабли, встреченные на пути, и методы их решений.
          0
          Интересно. Хотелось бы подробнее узнать об этих самых инструментационных инструкциях, ведь в них, я так понимаю, вся магия.
            0
            Я подумываю написать более подробную техническую статью с описанием технологии. Пока можете просто нажать F12 в браузере с профилируемой страницей и посмотреть каким образом ваш код модифицирован. Похожим образом работают всевозможные открытые code coverage библиотки для javascript (istanbul, jscover и другие).
                0
                Замечательная работа. Почему только, в дереве вызовов показываются лишь события? Или точнее сказать, каждый новый event loop. Имея много асинхронного кода, становится довольно сложно ориентироваться в списке, так как становится много readystate/timeout/otherGenericListener. Собственно, хотелось бы иметь поиск также в списке с событиями, что бы искать нужную функцию.

                И почему не «трейсятся» консольные вызовы — myLib.doSmth();, хотя просматривая myLib.doSmth; видно, что все метки проставлены шпионом ).

                Есть ли в планах сделать cpu статистику функций? И версию для node.js приложений ($ spy myapp.js)?

                Ну и в конце концов, больше подробностей с примерами не помешало бы… )
                  0
                  Спасибо за отзыв и комментарии по использованию.

                  В примере конфигурационного файла описано как можно фильтровать события. Запрос на фичу по поиску создал на github, посмотрите пожалуйста это ли имелось ввиду под поиском в событиях?

                  Насчет консольных вызовов, посмотрел — они трейсятся, но неверно записываются в последнее событие и еще портят время выполнения события (завел баг). Пока как workaround можно просто еще раз нажать на последнее событие и консольны вызов будет в конце.

                  Насчет появления в планах той или иной вещи — у меня есть конкретное видение и большой список того, что еще я бы хотел добавить. Список этот я опубликую постепенно создавая issues в репозитории проекта на github и в roadmap. Пожелания пользователей естественно обладают повышенным приоритетом, поэтому пожалуйста плюсуйте/создавайте запросы на фичи на github (позже подключу что-нибудь более специализированное, вроде uservoice или tenderapp).

                  Можете пояснить что подразумевается под cpu статистикой функций?
                  Версия для node в планах есть, «фича» немаленькая, зависит от того сколько людей захочет такую возможность.
                  Документацию пополняю почти ежедневно, так что скоро с подробностями будет лучше.
                    +1
                    Под cpu статистикой имел ввиду «cpu profiling». Сколько мс выполняется сама функция и её цепочки выше по стеку, как у вас на скриншоте из dev tools.

                    Думаю, для nodejs будет такая вещица даже более востребована, так как нормального профилирования (не через пень-колоду) так и не нашел. Довольно легко сделать аналог require и подменять оригинал, так что бы все скрипты после загрузки, обзаводились метками и исполнялись. Ну a используя socket.io, данные бы отсылались на локальный сервер и был виден результат в браузере.
                      0
                      Некоторые работы по поддержке node.js велись и ведутся (пока все на этапе прототипирования, но прогресс есть). Если удобно, плюсуйте за фичу на github, также подписывайтесь на твиттер, я обязательно буду сообщать о прогрессе этой и других фич.
                    0
                    Вышла новая версия 0.1.6, документация значительно пополнена примерами и подробностями, реализована локальная proxy без необходимости менять системные настройки.
                    0
                    Спасибо, инструмент очень понравился. Можно ли как-то дампить объекты типа Date (дампится пустой объект)?
                      +2
                      Спасибо за отзыв и замечание. Завел issue, будет в следующем релизе. Создавайте новые issue на github если удобно.
                      0
                      Не получилось скачать —
                      «Диск Google
                      Приложение в настоящий момент недоступно.» :( А так выглядит заманчиво, хотя и не глубокий спец в js.
                      +1
                      А почему вы не хотите выложить исходники? Может быть с помощью сообщества дело пошло бы гораздо быстрее и продуктивнее? Или есть конкретная цель — заработать?
                        +1
                        Цель развить успешный бизнес есть. Конкретных планов будет это осуществляться с открытыми или закрытыми исходниками пока нет. Если это будет путь crowd-funding-а или платной поддержки, то исходники вполне могут быть открыты, если продажа лицензий, то открывать исходники невыгодно. Я рассматриваю варианты, на данный момент интересно понять потребность и объемы аудитории. Пока склоняюсь к идее продаже лицензий, но только потому что это выглядит проще и более менее обкатаный путь.

                      Only users with full accounts can post comments. Log in, please.