4.6. Отладка css с помощью инструментов разработчика в ie8
Средства разработчика в Internet Explorer 8 позволяют проверить внутреннее представление веб-страницы с точки зрения браузера. С помощью этих средств разработки можно решать целый ряд задач, в том числе просмотр отдельных атрибутов, выяснение, почему к конкретному элементу применено определенное правило CSS, а также предварительный просмотр различных режимов совместимости документов. Определяя способ интерпретации веб-страницы браузером, средства разработчика предоставляют множество возможностей для поиска и решения проблем и делают это гораздо быстрее, чем это было возможно в предыдущих версиях Internet Explorer.
4.6.1. Открытие и закрытие средств разработчика
Чтобы открыть средства разработчика, нажмите клавишу F12 либо нажмите кнопку "Средства разработчика" в меню "Сервис" на панели инструментов Internet Explorer 8. На рис. 4.4 показано окно средств разработчика.
Рис. 4.4. Средства разработчиков Internet Explorer 8
После запуска средства разработчика могут открыться в собственном окне или быть прикреплены к экземпляру браузера, в котором они открыты. На каждой вкладке Internet Explorer имеется собственный экземпляр средств разработчика. При работе с несколькими экземплярами средств разработчика используйте функцию "Закрепить", кнопка которой появляется в правом верхнем углу окна средств разработчика, чтобы прикрепить каждый экземпляр модуля "Средства разработчика" к соответствующему окну. После закрепления можно изменять размер окна "Средства разработчика" для отображения большей области просмотра.
Закрыть средства разработчика можно одним из следующих способов: нажать клавишу F12, нажать кнопку "Средства разработчика" в меню "Сервис", нажать кнопку "Закрыть" в правом верхнем углу окна средств разработчика или закрыть окно Internet Explorer или вкладку, на которой они были открыты.
4.6.2. Выбор объектов на веб-странице
Многие средства разработчика HTML и CSS работают с отдельными элементами веб-страницы. Чтобы выбрать элемент, выделите его на вкладке HTML или нажмите кнопку "Выбрать элемент щелчком" в меню "Найти" средств разработчика. После нажатия этой кнопки вы сможете с помощью мыши выбрать элемент на веб-странице. Переместите курсор на элемент; когда контур элемента выделится синей рамкой, щелкните, чтобы выбрать элемент. На рис. 4.5 показаны результаты выбора элемента.
4.6.3. Проверка элементов html
Вкладка HTML помогает проверить представление элементов HTML на веб-странице. На вкладке HTML имеется две области просмотра. Слева находится основная область содержимого, а справа – область свойств (рис. 4.6).
В основной области содержимого отображается вся модель DOM в виде древовидной структуры, узлы которой можно разворачивать и сворачивать. В этой области можно исследовать и проверять исходные HTML-коды. Атрибуты и значения элементов HTML можно изменять, щелкая их. В этом режиме можно также изменять текстовые узлы. Однако если требуется изменить всю веб-страницу в формате редактора, можно нажать кнопку "Правка". В режиме правки активируется кнопка "Перенос по словам". Выдается также предупреждение о том, что содержимое этой страницы не обязательно является точной копией исходной страницы, поскольку представляет собой внутреннее представление Internet Explorer для данной веб-страницы. Если для записи содержимого на страницу используются вызовы JScript (Javascript), их будет видно в этом режиме правки. После завершения правки щелкните снова кнопку "Правка", и изменения немедленно вступят в силу.
В верхней части области свойств имеется строка меню для выбора типов свойств. Здесь предлагается несколько средств, которые помогут вам более детально проверить исходные коды. Например, когда в основной области содержимого включен режим DOM, можно выбрать любой элемент HTML для проверки, щелкнув его мышью. Если щелкнуть один раз, в области свойств появятся свойства элемента. Представленные сведения и способ их отображения зависят от выбранного типа свойства. Например, если текущим является тип "Стиль", появится список правил CSS, примененных к этому элементу. Другие типы свойств: "Отслеживать стили", "Раскладка" и "Атрибуты".
Рис. 4.6. Исследование стилей выбранного элемента в Internet Explorer 8