Отладка Javascript в различных браузерах и средах

    Все мы прекрасно знаем как отлаживать JavaScript в FireFox — конечно же это FireBug. Какие же аналоги существуют в других браузерах…

    FireFox — Firebug


    image
    Последняя версия: 1.3 / 1.4 alpha (что нового)
    Официальный сайт: http://getfirebug.com/
    Возможности:
    * Расширяемый (FireCookie, FirePHP и т.д.)
    * Удобный просмотр исходного кода страницы. Функция Inspect позволяет точно определить местонахождение тега того или иного элемента, просмотреть все «привязанные» к нему свойства и стили.
    * Редактирование HTML и CSS прямо в браузере. Можно изменять атрибуты тегов и значения свойств для того, чтобы пронаблюдать изменения. Удобно для тех случаев, когда нужно путём экспериментов найти наиболее приемлемый вариант оформления создаваемой страницы.
    * Отладка JavaScript.
    * Отслеживание процесса загрузки страницы.
    * Просмотр HTTP-заголовков обычных и AJAX-запросов.
    Скриншот:
    image

    Opera — Dragonfly


    Последняя версия: alpha 3
    Официальный сайт: http://www.opera.com/dragonfly/
    Возможности:
    * Просмотр DOM;
    * Просмотр и редактирование CSS;
    * Отладчик JavaScript;
    * Просмотр HTTP и HXR запросов;
    * Отлаживать страницы для мобильных устройств;
    * Удалённо подключаться к любым компьютерам и устройствам с установленным браузером Opera, поддерживающим данный инструмент, и осуществлять отладку веб-страниц.
    * Консоль ошибок;
    * Командная строка.
    О расширении:
    Для того, чтобы появилась внизу панель DragonFly вам необходимо выбрать в главном меню Оперы пункт Tools -> Advanced ->Developer Tools. Там будет вкладка Error Console, а в ней вкладка JavaScript. Это и есть консоль ошибок. Сюда же мы можем выводить и отладочную информацию из скрипта. Но, увы, объекта console нет. Однако есть opera.postError() — аналог console.log().
    Скриншот:
    image

    IE — Companion.JS


    Последняя версия: 0.4.2
    Официальный сайт: http://www.my-debugbar.com/wiki/CompanionJS/HomePage
    Возможности:
    * Детальная информация о JS-ошибке (реальное имя файла, строка и вызовы функций до ошибки)
    * FireBug-подобная API для консоли
    * Консоль позволяет исследовать объекты
    * Иконка на панели инструментов для вызова панели Companion.JS
    Скриншот:
    image
    Статьи на хабре: JavaScript debugger для IE

    IE — Microsoft Script Editor


    Последняя версия: ставиться вместе с Office 2003
    MSDN: http://msdn.microsoft.com/en-us/library/aa189846(office.10).aspx
    Возможности:
    * Использовать Visual Studio для отладки.
    Подробнее: Отладка для Internet Explorer (в Visual Studio)
    Спасибо alemiks

    IE — WebDeveloper V2


    Последняя версия: 2.4.1 (3/12/2008)
    Официальный сайт: http://www.ieinspector.com/dominspector/
    Возможности:
    * Веб-инспектор — возможность просматривать DOM-модель страницы и ее динамическое изменение, стили и т.д.
    * Есть консоль как в Firebug
    * Писать логи из JavaScript
    * HTTP-монитор — позволяет просматривать отправляемые и получаемые запросы со страницы
    Минус: программа платная :(
    Скриншот:
    image
    Спасибо megahertz

    IE8 — встроеный


    в IE8 встроен developer tool, в котором есть отладчик и профайлер js

    Об отладчике: Однако, как пишут в интернете, он не очень хорош — нет console, ничего нельзя сделать пока не нажмешь остановить отладку, нельзя изменить DOM и стили на лету и т.д.
    Спасибо XaocCPS

    Safari (любое WebKit-приложение) — Drosera


    Последняя версия: выпускают каждую ночь новый билд
    Официальный сайт: https://trac.webkit.org/wiki/Drosera
    Возможности:
    * Установка breakpoint
    * Есть объект console
    * Функциональный стэк
    Скриншот:
    image
    Статьи на хабре: Не большое упоминание Safari для веб-разработчиков

    Любой браузер — Firebug Lite


    Последняя версия: 1.2.1
    Официальный сайт: http://getfirebug.com/lite.html
    Возможности:
    * Поддерживает все основные команды FireBug
    Скриншот:
    image
    Статьи на хабре: Firebug lite

    Подробнее можно почитать Отладка JavaScript в Opera, FireFox, IE и Safari

    P.S. Знаете что-то еще, пишите в комментариях — с удовольствием допишу.

    UPD:
    * Перенес в JavaScript
    * Добавлен IE+WebDeveloper V2
    * Добавлен IE+Microsoft Script Editor
    * Добавлен IE8
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 14
    • +2
      А почему сюда не вписали возможности DragonFly?
      Насколько я читал, он умееет почти все, что умеет FireBug, кроме чтения GET/POST/JSON
      • 0
        Спасибо, добавил. Я видимо забыл.
        • 0
          Драгонфлай ужасен и глючен. Что обидно. Спасает в редких случаях, но лучше так, чем вообще без него. Ну или я чего-то не знаю.
          • +1
            Драгонфлай ужасен и глючен

            Не видел ни одного прекрасного и стабильного приложения в стадии alpha ;)
            • 0
              нет, я просто мотивировал невключение описания драгонфлая сюда. я осознаю, что это альфа.
            • 0
              Ну незнаю, у меня вполне нормально работает, нехватает фич конечно, но все же это Alpha ;)
              Судить надо будет по релизу, который наверно выйдет с Опера 10
          • 0
            в IE8 встроен developer tool, в котором есть отладчик и профайлер js
            то есть, этому браузеру ничего не нужно добавлять, отладчик в него встроен
          • +1
            В IE можно также отлаживать с помощью MS script editor (входит в состав office) и visual studio
            • 0
              Спасибо, добавлю.
              Кстати на оф.сайте Companion.JS написано:
              To be able to use Companion.JS you'll also need to install Microsoft Script Debugger
              • 0
                На самом деле, я специально не упомянул ms script debugger, т.к. он устарел
                This version of the Script Debugger is deprecated technology and is no longer supported.

                Вместо него можно использовать как раз ms script editor (из office) или visual studio для отладки клиентских скриптов.
            • +1
              Для IE еще есть IE WebDeveloper
            • 0
              Спасибо за обзор, хотел заюзать IEWebdeveloper но он платный, так что для ИЕ придется дальше WebdeveloperToolbar использовать. :(

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