Отладка JavaScript в MS IE средствами Visual Web Developer

    Microsoft дала нам бесплатный инструмент для отладки JavaScript в Internet Explorer.

    Я привык регулярно пользоваться Firebug для отладки JavaScript в Firefox. Этот мощный инструмент дает нам такие «знакомые с детства» инструменты дебага, как:
    • консоль
    • watch
    • стэк вызовов
    • точки прерывания
    • пошаговые команды выполнения

    На такой контроль подсаживаешься, как на наркотик. Когда приходит время проблем с Internet Explorer, начинается ломка.
    Для отладки JavaScript в IE я пробовал разные вещи. Firebug Lite позволил пользоваться консолью, но в отладке не слишком помог. К тому же, он требует, на мой взгляд, слишком серьезной переработки исходного
    HTML.

    Microsoft Script Debugger хоть и порадовал столь недостающей в Firebug подсветкой кода, но в интеллектуальной битве с jQuery тоже помог мало.

    Вариантов сотни. А у меня уже сроки горят…
    В конце концов я остановился на Microsoft Visual Web Developer Express Edition (у меня, правда, версия 2005). Фанаты Firebug, оказавшиеся в моих обстоятельствах, меня поймут:



    Всё есть, как в Греции:) Всё работает, и что немаловажно — это бесплатно. Легально и не на один месяц. Большая часть этого монстра заточена под работу с майкрософтовским же ASP.NET (кто бы сомневался), но всё это я успешно игнорировал, добившись тем не менее работоспособности от своего скрипта. Вобщем, не мешает:).

    Как добиться полноценного дебаггинга в IE+VWD


    1. Установите MS VWD EE.
      Прошу меня извинить тех кто ожидал решения в пределах нескольких мегабайт — эта штуковина весит весьма и весьма немало. Мне ISO-образ
      версии 2005 в 400 мегабайт размером скачал дома брат — в офисе столько инета в одни руки не дают даже при очень уважительных причинах.


    2. Разрешите отладку сценариев в IE
      Откройте «Свойства обозревателя» и на вкладке «Дополнительно» найдите галочку «Отключить отладку сценариев (Internet Explorer)». Снимите её. Некоторые советуют также установить галку «Уведомлять о каждой ошибке сценария» (если вы её найдете — у меня, к примеру, нет).
    3. Создайте в VWD сайт для отладки.
      Сайт в терминологии VWD — просто нечто вроде проекта, как Project в Eclipse.
      Я читал совет насчет создать просто пустой сайт и, запустив его, перейти по нуждающемуся в отладке адресу. У меня это не сработало, намеренно ошибочные инструкции ничего кроме ругани самого IE не вызывали. Но тем не менее раз советуют — попробуйте, ну вдруг.


      Я же поступил более надежным образом — создал действительно рабочий сайт с корневой папкой, действительно ссылающейся на папку сайта в локале (можно ещё и по FTP, если локала нет, но мы же ведь хорошие мальчики, правда?). Прописал в свойствах проекта адреса для запуска, соответствующие локальному Apache.

    4. Запустите отладку сайта.
      Наверху, в первой же панели инструментов — кнопочка Start Debugging с зеленым треугольничком. Она запустит IE и соединит с ним VWD для отладки. Можно спокойно переходить по страницам после этого — отладчик точно так же подцепляется к ним.
      Update: Если у вас вместо IE запускается другой браузер, в панели Solution Explorer щелкните правой кнопкой по пустому месту, выберите Browse With… и в появившемся окне назначьте браузером IE. Кстати, как свидетельсвуют очевидцы, просто сделать IE браузером по умолчанию в системе почему-то не катит в такой ситуации. На этом шаге VWD спросил меня насчет того, что в билде проекта ошибки, и не желаю ли я запустить последний удачный. Поскольку я точно знал, что никаких билдов, собственно, ещё и не было, а сайт работает, и в свойствах проекта указан рабочий адрес, я уверенно нажал Yes — и…

    5. Отлаживайте! Have, как говорится, полный fun.
      … да, представьте себе, детище Microsoft не похерило мне сайт в локале, не стало требовать IIS и ASP, и вообще не капризничало, а тихо-мирно
      запустило IE, сменило раскладку панелей в окне на отладочную и продемонстрировало в панели Script Explorer все мои скрипты. Любой можно было открыть, где надо поставить точки прерываний, добавить watch, ну и вобще, все радости отладки.



    Всё!
    Весь этот огород я у себя нагородил лишь для того, чтобы уяснить в итоге одну вещь: о костылях для «самого популярного браузера» нельзя забывать после их применения. Они вешают свои обработчики событий, назначают свои классы и модифицируют
    CSS. Тот факт, что в IE всё видимое невооруженным заработало так же, как в нормальных браузерах, не говорит ещё о том, что всё остальное тоже одинаково. Зато теперь у меня есть отладчик JavaScript для IE, не хуже Firebug.

    Поделиться публикацией

    Комментарии 16

      0
      извините, а кто сказал, что для использования " Firebug Lite " нужно что-то с кодом делать? Неправда. И кроме этого есть другие инструменты, вроде YUI Debugger , на JS полностью.

      а встроенный профилировщик и стек вызовов сетевых тоже здесь есть?

      а кроме этого, полный аналог фаербага под есплорер есть в AptanaIDE Pro
        0
        Вот как раз тоже хотел его рассмотреть, но во впервых, он стоит отдельной статьи, а во вторых, $99. Для многих это фактор, для меня, к примеру. А для использования Firebug Lite нужно прописать его вызов в коде. У меня head и так перегружена скриптами, один лишний там может затеряться, не хотелось бы получать по мозгам от менеджеров за выскакивающую у клиента консоль. Я искал полностью клиентский debug, не касающийся модификации того, что у меня на сервере — ну как, собственно, дело и обстоит в Firebug.
          0
          Firebug Lite это мультибраузерная консоль, нормального отладчика она не заменит.

          Если нужен хороший инструмент для отладки в ИЕ - можно поставить ИЕ8 и использовать встроенный отладчик (Tools/Developer Tools) , получается более легкое решение с очень неплохой функциональностью ( закрывает функциональность FireBug-а процентов на 80 )
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Можно отладку делать и в Microsoft Script Editor, тоже очень удобно (если у вас конечно установлен Office 2003/XP): http://www.jstoolbox.com/2008/03/21/otladka-skriptov-v-internet-explorer/
            или здесь: http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html.
              0
              Не вошел в рассмотрение из-за небесплатного Office, который мне лично, к тому же, не нужен вовсе. Но в любом случае, за ссылки спасибо.
              +3
              Для того что-бы "ослик" стал полноценным дебагером, надо в опциях проэкта выбрать "Browse with..." и там выставить Internet Explorer как средство для просмотра.
              После этого все ошибки ослика будут честно показаны в MSVWDE. (со всеми вызваными скриптами, css, etc)

              http://www.berniecode.com/blog/2007/03/0… - ( 2-й комментарий - последний абзац) на странице, которую Вы же сами и показали как пример :)
                0
                В 8-м ie есть вот такое - http://msdn2.microsoft.com/en-us/library/cc304130(VS.85).aspx
                  0
                  С 6-м IE работает? Или только с 7-м?
                    0
                    С обоими работает.
                    0
                    товарищи, по IE8b1 есть куча инфы, которую натестил. вот про что пишу: http://sharovatov.wordpress.com/
                    Не хватает кармы, чтобы на русском сюда на хабр выложить эту и новопоступающую инфу.
                      +1
                      Вот поставь еще плагины:
                      * IE Developer Toolbar - путешествие по DOM, просмотр атрибутов и стилей, откуда кто отнаследовался, изменение атрибутов на лету и прочие приятности)
                      * IE Watch - просмотр http-запросов, полезно в поиске откуда скрипт или стиль (не)подгрузился в больших проектах.
                      Эти два плагина + VWD (а лучше VS) и жить станет проще и веселей.
                      ЗЫ: осторожно, всё IE.
                        0
                        Это всё есть уже. Тоска по Firebug началась с желания инспектировать верстку курсором.
                          +1
                          Правильно.
                          Я напомнить - вдруг не было. И может кому пригодится.
                          +2
                          вместо IEWatch удобно использовать Fiddler2 (http://www.fiddlertool.com/Fiddler2/vers…) - замечательная debugging proxy с кучей дополнительных плагинов. Т.к. это прокси, позволяет дебажить http(s) и для всех остальных браузеров, что удобно.
                            0
                            Однаааако... Беру!

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

                        Самое читаемое