Знакомство со средствами разработчика в Internet Explorer 8

  • Статья

Новые возможности Windows Internet Explorer 8

Каждая копия Internet Explorer 8 содержит средства разработчика. Эти средства дают возможность разработчикам веб-сайтов отлаживать Microsoft JScript, исследовать поведение веб-страниц в Internet Explorer, быстро создавать новый дизайн сайтов и пробовать различные способы устранения неполадок. Данная статья содержит описание основных возможностей средств разработчика.

  • Введение
  • Приступая к работе
  • Отладка HTML и CSS
    • Проверка элементов HTML
    • Проверка свойств CSS
    • Редактирование кода «на лету»
    • Сохранение изменений
  • Отладка JScript
    • Запуск и остановка отладчика
    • Управление выполнением
    • Проверка значений переменных
    • Проверка стека вызовов
    • Работа с консолью отладчика
  • Профилирование производительности JScript
    • Запуск и остановка профилировщика
    • Просмотр данных
    • Профилировка нескольких сеансов и экспорт данных
  • Поиск содержимого
  • Просмотр кода страниц
  • Выделение контуров элементов на экране
  • Работа с рисунками
  • Управление кэшем и файлами Cookie
  • Использование пакета Power Tools
  • Проверка кода
  • Тестирование в различных режимах браузера и документов
    • Тестирование в разных режимах браузеров
    • Тестирование в разных режимах документов
  • Сочетания клавиш
  • Команды интерфейса
  • См. также

Введение

Удобные средства разработчика крайне важны для эффективной работы разработчиков. Существует немало средств веб-разработки, однако они далеко не всегда отвечают всем необходимым потребностям. Например, может понадобиться быстро отладить код JScript, исследовать поведение веб-страниц в Internet Explorer, быстро создать новый дизайн сайтов и опробовать различные методы устранения неполадок. Для повышения производительности труда разработчиков в этих и аналогичных ситуациях в состав Internet Explorer 8 включены мощные, но при этом простые в использовании средства разработчика, обладающие целым рядом преимуществ.

  • Простые в использовании интегрированные средства разработчика. Экземпляр средств разработчика входит в состав Internet Explorer 8, что дает возможность отлаживать код на любом компьютере, на котором установлен браузер Internet Explorer 8. Кроме того, средства разработчика загружаются, только когда они необходимы, и при этом они не снижают производительность работы браузера. С помощью средств разработчика можно «на лету» отлаживать сценарий только для текущего процесса Internet Explorer вместо того, чтобы включать отладку для всех процессов Internet Explorer.
  • Наглядный графический интерфейс. Вместо реконструирования кода сайта или изменения сайта для вывода данных отладки можно использовать отображение сайта в браузере Internet Explorer. При этом ускоряется отладка динамических сайтов, где просмотра исходного кода недостаточно, а также упрощается разбор кода, специфичного для Internet Explorer, поскольку в этих случаях использовать обычные средства разработки невозможно.
  • Возможность быстро проводить эксперименты. При создании нового дизайна или при тестировании исправлений в предыдущих версиях Internet Explorer приходится редактировать код, сохранять его, обновлять страницу в браузере и повторять эту процедуру. Средства разработчика Internet Explorer 8 упрощают работу в таких случаях: можно редактировать код сайта прямо в браузере; все изменения немедленно вступают в силу.
  • Оптимизация производительности приложений. При выявлении и устранении неполадок производительности обычно используется поэтапный подход, при котором все ситуации рассматриваются по очереди. С помощью профилировщика сценариев в средствах разработчика Internet Explorer 8 можно собирать статистические данные, такие как время выполнения и количество вызовов той или иной функции JScript, при тестировании приложения и использовать отчет, чтобы быстро обнаруживать и устранять основные причины замедления.

Благодаря перечисленным характеристикам средства разработчика значительно повышают производительность труда при работе в Internet Explorer. Далее в этой статье содержится более подробное описание данных и других функций и компонентов.

Приступая к работе

Начать работать со средствами разработчика совсем нетрудно: нажмите клавишу F12 или выберите в меню «Сервис» команду «Средства разработчика».

После открытия средства отображаются в собственном окне, каждому из них соответствует отдельная вкладка в Internet Explorer. Чтобы сократить количество открытых окон, можно поместить средства разработчика на вкладку, нажав кнопку «Закрепить» или сочетание клавиш CTRL+P.

Для некоторых функций средств разработки не требуется полный интерфейс. В этом случае нажмите кнопку «Свернуть» или сочетание клавиш CTRL+M, когда средства разработки закреплены на вкладке. В этом случае средства разработки сворачиваются в строку в нижней части окна; доступ предоставляется только к строке меню.

Отладка HTML и CSS

С помощью средств разработки можно проверять код HTML и каскадные таблицы стилей сайта в том виде, в котором они обрабатываются браузером Internet Explorer, а не в исходном виде. Это особенно удобно в случае с динамическими сайтами, сложными сайтами и сайтами, где применяются платформы ASP или PHP.

В основной области содержимого используется дерево документо-объектной модели (DOM) сайта, соответствующее структуре, содержащейся в памяти браузера Internet Explorer для отображения сайта. Для перемещения по дереву можно использовать мышь или клавиатуру. Самый быстрый способ найти узел, соответствующий определенному элементу страницы, — использовать функцию «Выбрать элемент щелчком». Используйте эту функцию, чтобы выбрать элемент на странице, и в средствах разработки будет автоматически выбран нужный узел дерева. Также можно использовать поле поиска.

Проверка элементов HTML

После выбора элемента в дереве DOM в области свойств справа появятся более подробные сведения о выбранном элементе:

  • Стиль. Команда «Стиль» повышает эффективность отладки CSS, предоставляя список всех правил, применяющихся к выбранному элементу. Правила отображаются в порядке следования. Правила, применяющиеся в последнюю очередь, отображаются в нижней части списка; свойства, которые далее заменяются другими, перечеркиваются; благодаря этому можно лучше понять, каким образом правила CSS влияют на текущий элемент, без сопоставления селекторов вручную. Можно быстро включать и отключать правила CSS, устанавливая или снимая флажок рядом с правилом. Изменения будут сразу же отображаться на странице.
  • Трассировка стиля. Эта команда содержит такие же сведения, что и команда «Стиль», но в данном случае стили группируются по свойствам. Если нужно найти сведения о каком-либо свойстве, используйте команду «Трассировка стиля». Нужно всего лишь найти нужное свойство, щелкнуть значок плюса (+), и на экране появится список всех правил, устанавливающих данное свойство. Правила перечисляются в порядке следования.
  • Макет. Команда «Макет» предоставляет сведения о макете модели, такие как смещение элементов, их высота и заполнение. Эту команду следует применять при отладке расположения элементов.
  • Атрибуты. Команда «Атрибуты» дает возможность исследовать все определенные атрибуты выбранного элемента. С помощью этой команды также можно изменять, добавлять и удалять атрибуты выбранного элемента.

Для дальнейшего анализа CSS перейдите на вкладку «CSS», чтобы просмотреть список всех файлов CSS для данного сайта.

Проверка свойств CSS

При переходе на вкладку «CSS» открывается доступ ко всем внешним файлам CSS. Выберите таблицу стилей с помощью кнопки выбора таблиц стилей. Щелкните имя или значение свойства стиля, чтобы изменить его и немедленно увидеть, как изменение отразится на работе страницы.

Редактирование кода на лету

После того, как нужные сведения собраны, можно сразу же внести необходимые изменения. Чтобы изменить любые атрибуты HTML или свойства CSS, щелкните из, введите новое значение и нажмите клавишу ВВОД. Изменения применяются немедленно, поэтому можно быстро проверить различные варианты. В HTML можно также нажать кнопку «Изменить», чтобы получить возможность изменения всего дерева и удалять, добавлять и изменять целые элементы. В обоих случая средства разработчика обеспечивают быстрое редактирование без изменения кода. После достижения нужного результата можно сохранить изменения.

Сохранение изменений

Все изменения, внесенные с помощью средств разработчика, применяются только к внутреннему представлению сайта в браузере Internet Explorer. При обновлении страницы или при переходе на другую страницу вновь откроется исходный сайт. Однако в некоторых случаях может потребоваться сохранить изменения. На вкладках «HTML» и «CSS» нажмите кнопку «Сохранить» для сохранения текущего HTML- или, соответственно, CSS-кода в файл. Помните, что отличия от исходного кода могут не быть не только в измененных вами фрагментах, но и в других частях, поскольку в средствах разработчика сайт отображается в соответствии с кодом в Internet Explorer, а не с кодом исходного сайта. Чтобы избежать случайной перезаписи кода, выходные данные сохраняются в виде текста, а в начало файла добавляется комментарий.

Дополнительные сведения о HTML и CSS см. в статье Отладка сценариев HTML и CSS помощью средств разработчика.

Отладка JScript

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

Запуск и остановка отладчика

Отладка JScript в Internet Explorer 8 очень проста. На любом сайте, где требуется выполнить отладку, откройте средства разработчика, перейдите на вкладку «Сценарий» и щелкните «Начать отладку». При запуске процесса отладки страница будет обновлена, а средства разработчика будут сняты с вкладки.

После запуска будут доступны все необходимые функции отладчика. По завершении работы щелкните «Остановить отладку». При работе отладчика обеспечивается полный контроль и широкие возможности анализа сценариев.

Управление выполнением

Можно приостановить выполнение в указанном месте, установив точку останова. Щелкните номер строки или щелкните код правой кнопкой мыши и выберите команду «Вставить точку останова». Можно устанавливать точки останова внутри встроенных функций и даже внутри обработчиков событий. Кроме того, можно использовать условные точки останова.

Если вы не уверены, нужно ли устанавливать точку останова, щелкните «Приостановить все», чтобы приостановить выполнение перед запуском следующего оператора JScript, или щелкните «Остановка при ошибке», чтобы приостановить выполнение при обнаружении ошибки в сценарии. После приостановки выполнения можно пройти сценарий по шагам (включая анонимные функции) с помощью команд «Шаг с заходом», «Шаг с обходом» и «Шаг с выходом».

Проверка значений переменных

При просмотре кода бывает полезно проверить состояние переменных. На вкладке «Сценарии» можно просматривать локальные переменные в области «Локальные», а для просмотра настраиваемого списка переменных использовать область контрольных значений. Чтобы добавить переменные в этот список, щелкните правой кнопкой мыши код и выберите команду «Добавить контрольное значение» или введите имя переменной в области контрольных значений.

Проверка стека вызовов

При отладке приложения пошаговым проходом кода JScript можно просматривать функции в текущем стеке вызовов. Если щелкнуть функцию в списке стека вызовов, ее код будет отображен в основном окне.

Работа с консолью отладчика

Вместо того чтобы редактировать код для проверки работы того или иного оператора, можно просто вводить операторы JScript в консоли и выполнять их. Многострочный режим позволяет вводить несколько строк кода для одновременного выполнения. Браузер Internet Explorer выполняет код немедленно, поэтому можно проверить результат добавления этого кода в текущей точке останова. Консолью можно пользоваться не только при отладке. Чтобы было проще устранять ошибки на странице, консоль также записывает все сообщения об ошибках в сценарии с помощью файла console.log. Дополнительные сведения см. в статье Отладка сценариев с помощью средств разработчика в разделе «Использование консоли для выполнения операторов кода».

Более подробные сведения об отладке сценариев см. в статье Отладка сценариев с помощью средств разработчика.

Профилирование производительности JScript

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

Запуск и остановка профилировщика

Как и при работе с отладчиком, здесь нет ничего сложного: откройте профилировщик и щелкните «Запуск создания профилей». Выполните сценарий, для которого нужно создать профиль, затем щелкните «Остановка создания профилей». Полученные данные можно сразу же изучить.

Просмотр данных

По умолчанию данные отображаются в представлении функций, где перечисляются все использованные функции. Щелкните раскрывающееся меню «Текущее представление» и выберите «Дерево вызовов», чтобы просмотреть древовидную структуру сделанных вызовов. Это даст возможность просмотреть ход выполнения кода и найти критические точки. В обоих представлениях можно добавлять, удалять, перемещать и сортировать столбцы, чтобы находить нужные сведения.

В отчете профилировщика содержится URL-адрес и номер строки функции, чтобы было проще найти этот код в приложении. Щелкните имя функции, чтобы отобразить исходный код функции в основной области на вкладке «Сценарий».

Примечание. Номера строк исходного кода указываются, только когда включена отладка сценария. Дополнительные сведения об отладке сценариев см. в статье Отладка сценариев с помощью средств разработчика.

Профилировка нескольких сеансов и экспорт данных

Снова щелкните «Запуск создания профилей», чтобы начать новый сеанс. При щелчке «Остановка создания профилей» будут показаны новые данные. Чтобы просмотреть данные предыдущих сеансов профилирования, щелкните раскрывающийся список и выберите другой отчет. Отчет профиля сохраняется для текущего процесса Internet Explorer. Можно сохранить данные профиля в формате CSV, нажав кнопку «Экспорт». Полученный файл можно открывать в любых нужных приложениях для дополнительного анализа.

Дополнительные сведения о профилировке см. в статье Профилировка сценариев с помощью средств разработчика.

Поиск содержимого

Средства разработчика дают возможность просматривать и изменять код, чтобы тестировать результат «на лету». Поскольку для просмотра доступно несколько источников кода, то крайне полезна функция поиска. Поэтому средства разработчика снабжены мощной поисковой системой. Поле поиска работает в зависимости от контекста — учитывается текущая вкладка режима. Например, если открыта вкладка «HTML», то поиск выполняется по DOM в главной области содержимого. Все совпадения подсвечиваются, первое совпадение выделяется. Аналогичным образом можно использовать поиск на вкладках «CSS», «Сценарий» и «Профилировщик».

Поле поиска также поддерживает синтаксис интерфейса API селекторов W3C  Ссылка в Интернете для вкладки «HTML». Чтобы использовать синтаксис селекторов, поисковый запрос должен начинаться со знака «@». Например, чтобы найти все элементы div, введите «@div». Чтобы найти только элементы div с определенным именем класса CSS, введите «@div.myClassName», а чтобы найти все элементы с этим именем класса, введите «@.myClassName». Также можно искать элементы с указанным идентификатором: для этого нужно ввести «@#myID». Дополнительные сведения о селекторах CSS см. в статье Селекторы CSS.

Примечания. При использовании синтаксиса селекторов в поле поиска следует учитывать регистр в именах классов CSS.

Просмотр кода страниц

До выпуска Internet Explorer 8 можно было просмотреть только исходный код страницы, щелкнув страницу правой кнопкой мыши и выбрав команду «Просмотр HTML-кода». Эта команда по-прежнему доступна, однако с помощью команды «Вид» средств разработчика можно просматривать большее число ресурсов. Например, можно просмотреть только определенный элемент с кодом DOM или элемент с кодом DOM и стилями, примененными к этому элементу. В этом случае элемент изолируется, что дает возможность сосредоточиться на нем и выявить возможные неполадки. Также можно просматривать исходный код веб-страницы или DOM в том виде, в каком он отображается в Internet Explorer. Отображается весь исходный код, а также код, вставленный сценариями. Итак, вы можете просмотреть в точности такой код, какой обрабатывает браузер.

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

Примечание. В средствах разработчика можно выбрать собственное приложение для просмотра исходного кода. Этот параметр находится в меню «Файл».

Выделение контуров элементов на экране

Наверняка вам приходилось выяснять, где именно проходит граница того или иного элемента на экране. Возможно, вам приходилось устанавливать толщину границы элемента равной 1 только для того, чтобы узнать, где она находится. С помощью команды подсвечивания в средствах разработчика можно просмотреть контуры всех элементов, не меняя исходный код. Эта команда поддерживает несколько распространенных элементов, таких как таблицы, элементы Div и рисунки. Кроме того, можно добавить любой элемент для отображения его контуров. Также можно назначить каждому элементу определенный цвет, чтобы проще их различать. Подсвечивание будет отображаться до тех пор, пока оно не будет отключено или пока страница не будет обновлена. Дополнительные сведения о меню подсветки см. в статье Справочник по пользовательскому интерфейсу средств разработчика в разделе «Меню подсветки».

Работа с рисунками

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

С помощью меню «Кэш» можно управлять параметрами кэша и файлов Cookie. Чтобы всегда получать последние сведения, можно включить параметр «Всегда обновлять с сервера». Для управления кэшем можно использовать команды «Очистить кэш обозревателя» или «Очистить кэш обозревателя для этого домена».

При работе с файлами Cookie их можно отключить, чтобы они не записывались на компьютер. Можно просмотреть полный список файлов Cookie с помощью кнопки «Просмотр сведений о файлах Cookie». Также предусмотрены команды «Удалить файлы Cookie сеанса» и «Удалить файлы Cookie для домена».

Эти команды удобны, так как обеспечивают полное управление средой, в которой работает браузер.

Использование инструментов меню «Сервис»

В меню «Сервис» доступны три удобных команды для работы с веб-сайтами.

  1. Команда «Изменение размера». С помощью этой команды можно быстро изменить размер окна браузера до одного из стандартных размеров (например, 800x600 или 1024x768) или указать произвольный размер. Для управления предусмотрены сочетания клавиш, описание которых приведено в статье Справочник по сочетаниям клавиш для средств разработчика
  2. Команда «Отображать линейку». С помощью этой команды можно отображать на экране линейку, чтобы рассчитывать расстояние между объектами. Линейки могут быть привязаны к горизонтальной и вертикальной осям, к элементам, или располагаться произвольно. Можно использовать любое количество линеек; можно изменять размер и перетаскивать существующие линейки.
  3. Команда «Показать палитру цветов». Эта команда помогает выбрать цвет. Наведя инструмент на любой отображаемый текст, объект или фон, можно просмотреть образец цвета данного элемента и его шестнадцатеричное значение. Щелкнув цвет, можно скопировать его значение в код.

Проверка кода

Закончив разработку, следует убедиться, что код соответствует определенным стандартам, например HTML и CSS, а также поддерживает специальные возможности. В средствах разработчика предусмотрены ресурсы для проверки кода по различным параметрам. Можно выбрать нужный тип проверки или использовать сразу несколько проверок.

Тестирование в различных режимах браузера и документов

В Internet Explorer 8 предусмотрена возможность отображения страниц (и передавать им соответствующие сведения о версии) в режиме браузера Internet Explorer 7. Веб-разработчики и конечные пользователи могут применять эту функцию, чтобы продолжать работать с сайтами, не приспособленными для Internet Explorer 8. Кроме того, эту функцию можно использовать, чтобы проверить, как ваш сайт будет выглядеть для пользователей браузеров Internet Explorer 7.

Тестирование в разных режимах браузеров

В меню «Режим обозревателя» можно выбрать, каким образом браузер Internet Explorer будет передавать веб-серверам три важных свойства.

  • Строка агента пользователя. Значение, которое Internet Explorer отправляет веб-серверам, чтобы они могли идентифицировать этот браузер.
  • Вектор версии. Значение, применяемое при оценке условных комментариев.
  • Режим документа. Значение, используемое для того, чтобы определить, использует ли Internet Explorer последние версии стандартов CSS, DOM и JScript или имитирует работу предыдущих версий Internet Explorer в целях совместимости.

Существует три режима браузера; в каждом из них эти значения изменяются определенным образом:

  • Internet Explorer 7. В этом режиме браузер Internet Explorer передает серверу данные об агенте пользователя, векторе версии и режиме документа, идентичные Internet Explorer 7. Этот режим можно использовать для того, чтобы проверить, как ваш сайт будет отображаться для пользователей Internet Explorer 7.
  • Internet Explorer 8. В этом режиме браузер Internet Explorer передает серверу данные об агенте пользователя, векторе версии и режиме документа, применяемые по умолчанию в Internet Explorer 8. В этом случае обеспечивается наибольшее соответствие стандартам. Этот режим можно использовать, чтобы проверить, как ваш сайт будет отображаться для пользователей Internet Explorer 8.
  • Представление совместимости IE8. В этом режиме браузер Internet Explorer передает серверу данные об агенте пользователя, векторе версии и режиме документа, идентичные Internet Explorer 7, однако строка агента пользователя также содержит маркер, указывающий, что это на самом деле Internet Explorer 8. Этот режим можно использовать для того, чтобы проверить, как ваш сайт будет отображаться для пользователей Internet Explorer 8, применяющих представление совместимости.

Тестирование в разных режимах документов

Режим документа определяет, каким образом страница отображается в Internet Explorer, но не влияет на вектор версии и на строку агента пользователя. Используя этот параметр вместе с режимом браузера, можно быстро проверить, какой режим документов следует использовать для сайта. Доступны три варианта:

  • Совместимый режим. В этом случае документ отображается так, как он отображался бы в Internet Explorer без параметра «doctype» или со значением «Quirks» параметра «doctype». Это поведение соответствует работе браузера Microsoft Internet Explorer 5, режиму совместимости Internet Explorer 6 и режиму совместимости Internet Explorer 7.
  • Стандартный режим Internet Explorer 7. В этом случае документ отображается так, как он отображался бы в Internet Explorer 7 со строго заданным или неизвестным значением параметра «doctype».
  • Стандартный режим Internet Explorer 8. При выборе этого варианта включается наиболее полная поддержка стандартов в Internet Explorer 8. Этот режим используется по умолчанию в Internet Explorer 8 при отображении документа со строго заданным или неизвестным значением параметра «doctype».

Дополнительные сведения о режимах совместимости документов см. в статье Тестирование в различных режимах браузера и документов с помощью средств разработчика

Сочетания клавиш

В средствах разработчика Internet Explorer 8 используется широкий набор сочетаний клавиш, упрощающих выполнение разных задач. Можно использовать стандартные клавиши Windows, например F12 для открытия или закрытия средств разработчика и F5 для обновления страниц. Полный список см. на странице Справочник по сочетаниям клавиш для средств разработчика

Команды интерфейса

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

См. также