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

  • Статья

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

В Internet Explorer 8 предлагаются расширенные средства разработчика, позволяющие анализировать и устранять проблемы, касающиеся HTML, каскадных таблиц стилей (CSS) и Microsoft JavaScript. В этой статье описываются средства разработчика, относящиеся к HTML и CSS.

  • Введение
  • Открытие и закрытие средств разработчика
  • Выбор объектов на веб-странице
  • Проверка элементов HTML
    • Использование средств "Стиль" и "Отслеживать стили"
    • Использование средства "Раскладка"
    • Использование средства "Атрибуты"
  • Проверка правил CSS
  • Сохранение изменений
  • Заключение
  • См. также

Введение

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

В этой статье описываются средства разработчика, относящиеся к HTML и CSS. Сведения о том, как использовать средства разработчика для отладки в JScript, см. в разделе Отладка сценариев с помощью средств разработчика.

Открытие и закрытие средств разработчика

Чтобы открыть средства разработчика, нажмите клавишу F12 либо нажмите кнопку "Средства разработчика" в меню "Сервис" на панели инструментов Internet Explorer 8. На приведенном ниже изображении показано окно средств разработчика.

На этом рисунке показано расположение в Internet Explorer 8 кнопки "Средства разработчика" на панели инструментов и кнопки "Закрыть".
Рис. 1. Команда "Средства разработчика" и кнопка "Закрыть"

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

Закрыть средства разработчика можно одним из следующих способов: нажать клавишу F12, нажать кнопку "Средства разработчика" в меню "Сервис", нажать кнопку "Закрыть" в правом верхнем углу окна средств разработчика или закрыть окно Internet Explorer или вкладку, на которой они были открыты.

Выбор объектов на веб-странице

Многие средства разработчика HTML и CSS работают с отдельными элементами веб-страницы. Чтобы выбрать элемент, выделите его на вкладке HTML или нажмите кнопку "Выбрать элемент щелчком" в меню "Найти" средств разработчика. После нажатия этой кнопки вы сможете с помощью мыши выбрать элемент на веб-странице. Переместите курсор на элемент; когда контур элемента выделится синей рамкой, щелкните, чтобы выбрать элемент. На приведенном ниже рисунке показаны результаты выбора элемента.

На этом рисунке показана кнопка "Выбрать элемент щелчком" и результаты выбора элемента.
Рис. 3. Кнопка "Выбрать элемент щелчком" и результаты выбора элемента

Когда вы выделите и щелкнете элемент HTML, на вкладке HTML появятся атрибуты выбранного элемента, а также их расположение во внутреннем представлении, которое используется для отображения веб-страницы в Internet Explorer 8. Можно просматривать текущие значения атрибутов элемента и экспериментировать с новыми значениями, изменяя их на вкладке HTML. Чтобы изменить значение атрибута, щелкните его, введите новое значение, а затем нажмите клавишу ВВОД; в Internet Explorer 8 появится результат внесенного изменения. Чтобы сбросить введенное значение, нажмите клавишу ESC. Чтобы восстановить первоначальный вид веб-страницы, обновите страницу.

Примечание. Изменения, внесенные на вкладке HTML, не влияют на исходный код веб-страницы; их действие прекращается после того, как веб-страница обновляется или браузер переходит на новую веб-страницу или закрывается. Сведения о сохранении изменений см. в разделе "Сохранение изменений" ниже.

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

Вкладка HTML помогает проверить представление элементов HTML на веб-странице. На вкладке HTML имеется две области просмотра. Слева находится основная область содержимого, а справа — область свойств.

  • В основной области содержимого отображается вся модель DOM в виде древовидной структуры, узлы которой можно разворачивать и сворачивать. В этой области можно исследовать и проверять исходные HTML-коды. Атрибуты и значения элементов HTML можно изменять, щелкая их. В этом режиме можно также изменять текстовые узлы. Однако, если требуется изменить всю веб-страницу в формате редактора, можно нажать кнопку "Правка". В режиме правки активируется кнопка "Перенос по словам". Выдается также предупреждение о том, что содержимое этой страницы не обязательно является точной копией исходной страницы, поскольку представляет собой внутреннее представление Internet Explorer для данной веб-страницы. Если для записи содержимого на страницу используются вызовы JScript, их будет видно в этом режиме правки. После завершения правки щелкните снова кнопку "Правка", и изменения немедленно вступят в силу.
  • В верхней части области свойств имеется строка меню для выбора типов свойств. Здесь предлагается несколько средств, которые помогут вам более детально проверить исходные коды. Например, когда в основной области содержимого включен режим DOM, можно выбрать любой элемент HTML для проверки, щелкнув его мышью. Если щелкнуть один раз, в области свойств появятся свойства элемента. Представленные сведения и способ их отображения зависят от выбранного типа свойства. Например, если текущим является тип "Стиль", появится список правил CSS, примененных к этому элементу. Другие типы свойств: "Отслеживать стили", "Раскладка" и "Атрибуты".

Использование средств "Стиль" и "Отслеживать стили"

Когда средствами "Стиль" и "Отслеживать стили" обнаружено несколько правил CSS, применяемых к выбранному элементу, правила отображаются в зависимости от их специфичности в соответствии со спецификацией CSS. Верхнее правило в списке первым применяется к выбранному элементу, а нижнее правило в списке в настоящий момент определяет свойства стиля выбранного элемента. Значения этих правил можно изменить: щелкните значение, введите новое значение и нажмите клавишу ВВОД; изменение сразу же появится на веб-странице. Информация для обоих типов свойств будет одинаковой. Однако для типа "Отслеживать стили" та же самая информация сгруппирована по свойствам, под которыми указаны правила. Свойства перечислены в алфавитном порядке, а правила, в свою очередь, упорядочены по специфичности.

Использование средства "Раскладка"

С помощью средства "Раскладка" можно получить сведения рамочной модели о расположении элементов на веб-странице. Доступна следующая информация:

  • Смещение. Эти значения описывают расстояние между выбранным объектом и его родителем, представленное свойствами offsetLeft и offsetTop.
  • Margin, Border и Padding. Эти три значения соответствуют значениям, указанным в исходном коде веб-страницы. Если значения не указаны, средством отображаются значения, используемые по умолчанию в Internet Explorer.
  • Ширина и высота. Самыми глубокими являются значения ширины и высоты элемента, определяемые свойствами offsetHeight и offsetWidth.

Для каждого атрибута рамочной модели указывается значение и единица измерения. Щелкните значение, чтобы изменить его, затем нажмите клавишу ВВОД, чтобы зафиксировать новое значение, или ESC для отмены. После нажатия клавиши ВВОД новое значение немедленно вступает в силу. По умолчанию (если единица измерения не отображается) значения рамочной модели обрабатываются средством "Раскладка" как пикселы.

Использование средства "Атрибуты"

Средство "Атрибуты" представляет атрибуты элементов HTML в виде списка пар имя-значение. Можно проверить сведения, а также имя и значение атрибута, дважды щелкнув его. Сведения об имени и значении атрибута можно также изменить, щелкнув атрибут в основной области содержимого. Значение атрибута может быть пустым или нулевым, но имя атрибута пустым быть не должно. Изменения, вносимые в эти сведения, немедленно отражаются на веб-странице. С помощью средства "Атрибуты" можно также добавлять дополнительные атрибуты к элементу или удалять атрибуты из элемента; для этого нажмите соответствующую кнопку в верхней части области.

Проверка правил CSS

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

На вкладке CSS отображаются правила, определенные во всех таблицах стилей, используемых на веб-странице.
Рис. 4. На вкладке CSS отображаются правила, определенные во всех таблицах стилей, используемых на веб-странице

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

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

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

Примечание. Работая со средствами разработчика, помните, что не только измененные области веб-страницы отличаются от исходных кодов, но могут также отличаться и другие фрагменты, поскольку в средствах разработчика веб-страница отображается так, как она представлена в Internet Explorer, а не в исходном коде. Чтобы избежать случайной перезаписи исходных кодов, выходные данные средствами разработчика сохраняются в текстовом формате и в начало сохраненного файла добавляется комментарий.

Заключение

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

См. также