| Россия, Ухта |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 24.05.2010 | Уровень: специалист | Доступ: платный
Лекция 18:
IE8 для разработчиков
Ключевые слова: Internet, HTML, css, сайт, html-редактор, браузер, information, IIS, manager, утилиты командной строки, сервер, конфигурационный файл, корневой каталог, значение, AJAX, компонент, developer, toolbar, Профилирование, производительность, операции, представление, development tools, валидность, отладка, графика, приложение, DOM, корректность, RSS, отображение, visual, Web, быстродействие, запуск, меню, head, BODY, пользователь, команда, enter, ESC, список, layout, векторные, outline, шаблон, иерархический список, сценарий, script, debugging, консоль, стек вызовов, место, контрольная точка, путь, функция, исполнение, сеанс, CSV, файл, URL, юзабилити, полнотекстовый поиск, поиск, table, Windows, память, блокировка, кеш, переключатель, билд, веб-сервис, буфер, унификация, доступ, программа, live, Search
Стандарты и обеспечение совместимости
В предыдущих версиях Internet Explorer разработчики и дизайнеры могли наблюдать некоторые отличия от стандартной поддержки ряда веб-стандартов и обработки HTML, CSS и скриптовых сценариев. В большинстве случаев это было связано с тем, что версии Internet Explorer выходили с опережением веб-стандартов, таким образом, когда эти стандарты финализировались, поведение Internet Explorer могло отличаться от рекомендованного.
Для обеспечения совместимости с предыдущими версиями Internet Explorer был реализован новый, встроенный в Internet Explorer 8, механизм, позволяющий эмулировать поведение предыдущих версий браузера как для отдельных страниц, так и для веб-приложений и внутренних и внешних сайтов.
Указать на совместимость с Internet Explorer 8 можно несколькими способами, используя для этого специальный META -тэг:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Данный META -тэг указывает на то, что сайт всегда должен запускаться в режиме поддержки (эмуляции) Internet Explorer 7.
Добавить данный META -тэг можно несколькими способами, которые мы рассмотрим ниже.
Задание режима совместимости в HTML-коде
Для задания режима совместимости на стороне клиента в HTML-коде страниц следует, используя любой HTML-редактор, вручную добавить соответствующий тэг ко всем страницам сайта, расположив его внутри элемента HEAD перед всеми остальными тэгами кроме TITLE и META.
<head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <!-Здесь располагаются другие тэги группы HEAD --> </head>
Задание режима совместимости на стороне сервера
Для задания режима совместимости на стороне сервера, т. е. для автоматической вставки соответствующего заголовка во все страницы, отсылаемые в браузер с данного веб-сервера, можно использовать несколько способов.
Можно добавить специальный HTTP-заголовок, используя средство управления веб-сервером Internet Information Services — IIS Manager. Этот заголовок может быть добавлен как для отдельного сайта, расположенного на сервере (site-wide), так и для всех сайтов (server-wide). Для этого следует выполнить следующие шаги:
- Выполнить команду Start | Administrative Tools | Internet Information Services (IIS) Manager.
- Раскрыть вкладку Connections и выбрать сайт, для которого будет добавлен дополнительный HTTP-заголовок.
- В панели утилит выбрать иконку HTTP Response Headers и дважды щелкнуть по ней мышью.
- В панели Actions выбрать команду Add.
- В панели Add Custom HTTP Response Header добавить в поле Name значение X-UA-Compatible, а в поле Value — значение IE=EmulateIE7.
- Щелкнуть кнопку Ok для сохранения изменений.
Аналогичные действия можно выполнить и из утилиты командной строки. Для этого в каталоге %systemroot%\system32\inetsrv следует выполнить следующую команду:
appcmd.exe set config -section:systern.webServer/httpProtocol /+"custornHeaders.[narne='X-UA-Compatible'. value=' IE=EmulateIE7']" /cornrnit:apphost
Также можно сконфигурировать веб-сервер, изменив содержимое конфигурационного файла Web.config или applicationhost.config следующим образом:
<?xrnl version="1.0" encoding="utf-8"?> <configuration> <syster.webServer> <httpProtocol> <custorHeaders> <clear /> <add narne="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer> </configuration>
После этого поместите измененный конфигурационный файл Web.config в корневой каталог вашего веб-сайта. Отметим, что при использовании решения на серверной стороне не нужно включать META -тэг в HTML-код страниц — он будет вставляться автоматически.
Режимы совместимости
Описанное выше значение META -тэга X-UA-Compatible "IE=EmulateIE7" является одним из нескольких распознаваемых Internet Explorer 8. В следующей таблице показаны все возможные значения элемента IE.
| Значение | Описание |
|---|---|
| IE=5 | Режим работы, в котором имитируются особенности и ошибки конкурирующих или старых версий браузеров |
| IE=7 | Всегда использовать режим IE7 |
| IE=EmulateIE7 | Отображать в режиме IE7 за исключением сайтов, у которых режим "Quirks" задан через элемент DOCTYPE |
| IE=8 | Всегда использовать режим IE8 |
| IE=EmulateIE8 | Использовать данное значение для отмены режима |
Расширения объекта Event
Для поддержки технологии AJAX Internet Explorer содержит ряд новых возможностей, в число которых входит упомянутая выше технология Cross Document Messaging (XDM). В частности, добавление новых свойств в объекте Event может привести к неверному выполнению кода.
Встроенные средства разработки
В предыдущей версии Internet Explorer разработчики могли установить бесплатный дополнительный компонент — Developer Toolbar, который многие использовали в качестве средства для тестирования, отладки, профилирования и даже быстрого создания прототипов веб-страниц. Из-за того, что Developer Toolbar поставлялся в виде расширения, производительность этого компонента была довольно низкой, а для работы требовался большой объем памяти.
В Internet Explorer 8 компонент Developer Toolbar заменен на интегрированный набор средств разработки, которые доступны по нажатию клавиши F12 или по команде Tools | Developer Tools. Так как средства для разработки интегрированы в браузер, они более производительны, не требуют дополнительной памяти и позволяют не покидая браузера выполнять основные задачи по тестированию, отладке и профилированию широкого спектра веб-сайтов и веб-приложений.
К основным возможностям, предоставляемым интегрированными средствами разработки, можно отнести следующие:
- Редактирование и отладка HTML и CSS.
- Тестирование и отладка сценариев.
- Профилирование сценариев.
- Просмотр или изменение DOM-модели.
Все эти операции выполняются в визуальной среде, которая отображает внутреннее представление страницы в веб-браузере, а не просто исходный код страницы. Таким образом, разработчики могут вносить изменения в код страниц и незамедлительно видеть результат своих действий. После того как необходимые операции выполнены, их результаты — в виде дерева HTML-элементов или обновленных CSS-стилей — могут быть сохранены на диске в виде текстовых файлов для последующего включения в оригинальный код страницы.
Инструменты для разработчика - Developer Tools - требуются для быстрой проверки кода страницы на его валидность (соответствие веб-стандартам, отсутствие ошибок в синтаксисе), а также для отладки различных сценариев (в основном, из-за распространения AJAX в современном сайтостроительстве это отладка JavaScript) и отображения стилей (CSS, отдельные цвета, шрифты и графика). При этом важно, чтобы данные инструменты были встроены в сам браузер, а не представляли собой отдельное приложение (веб-мастер при серфинге сможет увидеть ошибки или изменения и оперативно исправить их). В IE длительное время не было подобного инструмента, пока в 2007 году не появился отдельный тулбар для разработчиков (IE Developer Toolbar). С его помощью можно было разбирать код страницы (DOM), "на лету" проверять корректность HTML, CSS, RSS, включать отображение линеек масштаба для последующей верстки страниц и многое другое. Кроме этого тулбара, под IE были выпущены еще ряд инструментов – инспектор кода IEWatch, отладчики DebugBar и Fiddler, средства для работы со скриптовыми технологиями Ajaxview и Visual Web Developer Express. Однако в большинстве своем это были решения от сторонних разработчиков браузера, а фирменная панель IE Developer Toolbar иногда замедляла быстродействие браузера.
Состав Developer Tools
Запуск встроенного в IE8 инструмента веб-разработки осуществляется или через меню (Сервис – Средства разработчика), или с помощью горячей клавиши F12. В отдельном окне откроется двухпанельный редактор. В левой части будет отображаться DOM-структура сайта (секции head, body), а справа – расширенное содержание выбранного фрагмента кода. Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кеша браузера.
Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кеша браузера.
Пользователь может вносить изменения в код или атрибуты элементов в режиме реального времени (WYSWYG), одновременно наблюдая результат на странице. Также можно открывать элементы только для чтения. Полученные в ходе редактирования веб-документы можно сохранять на локальном диске компьютера.
Developer Tools можно "прикреплять" к инспектируемой странице
Developer Tools открываются под каждую открытую в IE8 страницу, поэтому, чтобы не загромождать экран окнами средств разработчика, их можно закреплять (команда Ctrl+P или нажатие на пиктограмму под кнопкой закрытия окна). В этом случае окно будет располагаться во вкладке редактируемой страницы в виде панели.
Работа с инструментом строится по классической схеме – пользователю нужно выделить фрагмент страницы или участок ее кода, который автоматически будет подсвечен согласно правилам синтаксиса HTML/CSS. Внесение изменений осуществляется простой правкой кода или установкой других значений атрибутов, после чего требуется нажать клавишу Enter. Отмена всех изменений производится или обновлением страницы, или нажатием на кнопку ESC, если требуется отменять правки по частям.
