Отладка скриптов в Internet Explorer

May 27, 2010, revised January 10, 2011 CompanionJS IE Developer Toolbar IE Script Debugger Internet Explorer JavaScript nLite VirtualBox Windows

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

Во-первых, где взять нужную версию Internet Explorer? Есть два пути - использовать мутантский набор движков типа IETester или IE Collection, или развернуть несколько виртуальных машин под каждую нужную версию Internet Explorer. Первый путь мне никогда не нравился, хотя бы из-за кучи проблем с совместимостью и потенциально неверного отображения сайтов в разных версиях.

Потому будем настраивать виртуалки. К счастью, достаточно настроить только первую - остальные можно наклонировать.

Создаем виртуальные машины

  1. Скачиваем и устанавливаем VirtualBox.
  2. Создаем виртуальную машину IE6. Ей нужен будет диск размером 2 Гб и порядка 512 Мб памяти. Еще ей нужны будут два сетевых адаптера - NAT и Host-Only - первый послужит для выхода в интернет, второй - для связи с хостом (и, если сервер на другой виртуальной машине, с сервером).
  3. Находим образ Windows XP Home SP3. Замечу, что SP3 не обновляет IE6 до IE7 самостоятельно.
  4. Убираем все лишнее из установки. Если места на диске не жалко, можно обойтись и без этого шага.
    1. Распаковываем образ каким-нибудь 7-zip.
    2. Скачиваем nLite – инструмент для пересборки образов XP.
    3. Скачиваем мой конфиг для nLite – он вырежет из образа все, кроме необходимого.
    4. Прогоняем распакованный образ через nLite, получаем ISO размером порядка 200 мегабайт.
  5. Подключаем образ к виртуалке, устанавливаем Windows - тут ничего особенного.
  6. Подключаем к виртуалке образ VirtualBox Guest Additions, чтоб получить разделенный с хостом буфер обмена, курсор, возможность растягивать окно-экран виртуалки и т.п. удобства.
  7. Ставим Adobe Flash Player), Java Runtime, Notepad++ для просмотра исходников.
  8. По желанию ставим на виртуалку какой-нибудь CCleaner, чтоб поубирать мусор.
  9. Базовая виртуалка готова. Можно ее выключить, а образ диска запаковать в архив и отложить - может, пригодится когда-нибудь.
  10. Клонируем образ (обычным копированием тут не обойтись): “C:\Program Files\Sun\VirtualBox\VboxManage.exe” clonevdi ie6.vdi ie7.vdi
  11. Создаем новую виртуалку, IE7, с теми же настройками, подключаем к ней склонированный образ. Рекомендую указать статический IP для Host-only соединения (в виртуалке это LAN Connection 2) - естественно, на каждой виртуалке разный. Помимо этого я в c:\windows\system32\drivers\etc\hosts указываю домен для сервера.
  12. На виртуалку для IE7 скачиваем и устанавливаем IE7.
  13. Готово!

Инструментарий

Для адекватной отладки JavaScript нужно установить Script Debugger (ну и пусть говорят, что он устарел - альтернатив нет), а потом CompanionJS. И еще отключаем Disable JS Debugging на вкладке Advanced настроек IE (хитрая такая опция). Получаем некое подобие Firebug.

Можно поставить и другие инструменты, хотя бы IE Developer Toolbar для отладки верстки.

Вот и все - имеем работающий IE, независимый от базовой ОС, с возможностью удобно отлаживать скрипты.

Buy Me a Coffee at ko-fi.com