На данный момент существует большое количество различных браузеров, в той или иной степени поддерживающих существующие стандарты
HTML. Лично я отдаю предпочтение браузеру от корпорации Mozilla. Этот браузер имеет долгую историю (он написан на основе знаменитого
браузера Netscape Navigator). Также этот браузер мне нравится тем, что он поддерживает систему плагинов - отдельно распростаняемых
дополнений, при подключении которых можно изменить функциональность и выполнить настройку под свои нужды. И, наконец, этот браузер является
свободно распространяемым с открытыми исходными кодами, что также немаловажно. Поэтому я и решил описать возможности, которые
данный браузер предоставляет не только пользователю, но и разработчику Web страничек, насколько легким и удобным может быть процесс отладки
написанных продуктов.
Mozilla Firefox является одним из самым популярным браузеров среди разработчиков и web-developers. Он привлекает к себе их внимание из-за тех возможностей, которые этот браузер предоставляет для отладки созданных проектов, исправления ошибок, улучшений. В стандартную поставку браузера включается java console (или «консоль ошибок»). Эта утилита позволяет выполнять отладку встроенных сценариев java-script. Но, гораздо большую функциональность браузеру придают сторонние плагины, которые можно скачать и установить с офицального сайта Mozilla Foundation . Сейчас я хочу рассмотреть два из этих плагинов - это Web Developer и Firebug . Оба из этих дополнений могут быть скачены по вышеперечисленным ссылкам с официального сайта дополнений. После их их установки и перезапуске браузера перед разработчиком открываются широкие возможности, которые я опишу ниже, по очереди для каждого из плагинов.
Firebug pluginКак сказано на официальной страничке: «Firebug интегрируется с браузером Firefox, чтобы замечательно обогатить инструментарий разработчика. Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript «вживую», на любой веб-странице.» И это действительно так. Рассмотрим некоторые из функций данного плагина, а именно:
- Просмотр и редакция HTML.
- Построение CSS.
- Мониторинг сетевых запросов
- Отладка JavaScript
- Исследование JavaScript
- Логирование для JavaScript
Это далеко не полный перечень всех его возможностей. Так проект является открытым (opensource), то любой желающий может изменять и дополнять функциональность.
Для работы с плагином необходимо нажать клавишу F12 (Ctrl-F12 для работы с ним в отдельном окне). После успешного запуска получим следующее - рисунок 1а,1б.
Рисунок 1а. Начальное окно плагина firebug.
Рисунок 1б. Начальное окно плагина firebug.
Далее начинается собственно работа с плагином. Скажем, нам необходимо найти тот или иной объект в HTML-коде, или определить, как именно реализуется с помощью CSS текущий фрагент. Для этого просто необходимо мышкой выбрать необходимые опции в меню окна плагина. В нижеприведенном примере - это HTML в режиме Inspect. Теперь, перейдя на страницу документа, под курсором мыши мы заметим прямоугольную область, иллюстрирующую тут участок, с которм ведется работа. В окне плагина мы увидим те параметры HTML и CSS которые используются. Также, нажав на каждый из них, можно производит изменения и отслеживать их в динамике. Описанные действия проиллюстрированы на рисунках 2,3,4.
Разработке данного проекта вышеописанные плагин был использован именно для этих целей. Однако, хотя здесь и не был использован java-script, плагин firebug может быть использован также для его отладки. Пример отладки изображен на рисунке 5.
На этом, как было описано выше, функциональность данного расширения, не ограничивается. Изучить его полностью и использовать в своих нуждах можно, загрузив по приведенным ссылках, предварительно установив Mozilla Firefox.
Web Developer plugin Web Developer - второе расширение для браузера Mozilla Firefox, очень мощное и функциональное, которое позволяет производить быструю и эффективную отладку. После его установки в окне браузера появится дополнительная панель с инструментами, изображенная на рисунке 6.Дальнейшая работа с плагином интуитивно понятна. К примеру, если нам необходимо выполнить работу с CSS (хотя не так полнофункционально, как с плагином Firebug), то можно щелкнуть меню CSS и заблокировать, включить или выключить.
Очень удобным для разработчика является возмоность просмотреть, как будет выглядить его проект на мониторах, с разным разрешением. Для этого необходимо использовать вкладку Resize. Здесь можно вручную задать необходимые разрешения экрана (800x600, 1024x768 и т.п.), а затем свободно переключаться между ними, приближать или удалять содержание. Данная функциональная возможность изображена на рисунке 7.
Данное расширение также обладает богатыми функциональными возможностями, которые все описаны и доступны на официальных сайтах.
Перечень использованных источников- 1. www.getfirebug.com
Официальный сайт дополнения. - 2. http://addons.mozilla.org
Официальный сайт компании Mozilla, где размещается плагины для браузера Firefox, информация для разработчиков, информация по использованию плагинов. - 3. http://chrispederick.com/work/web-developer/
Официальный сайт разработчика плагина WebDeveloper.
Особенности веб-приложения делают его разделенным на две части: клиентскую и серверную. На стороне клиента работает код на JavaScript (может быть, где-то можно найти и VBScript, но мы, пожалуй, не будем рассматривать этот случай), на серверной же - много что, в принципе, но мы рассмотрим PHP, наиболее популярный язык для серверной части веб-приложений. Так же интересно было бы поговорить об отладке и профилировании Flash-приложений на клиентской стороне, но затронутая тема и так обширна, так что пока оставим это.
Так же можно отнести к задачам отладки клиентского кода анализ и валидацию HTML кода. Это, вроде бы, задача не совсем из области программирования, но также немаловажная.
Некоторые части рассмотренных задач уже рассматривались в других статьях, и я предоставил на них ссылки.
Отладка и профилирование клиентского кода «Классическим» способом отладки кода на JavaScript является использование функции alert и ее производные. Помнится, в начале своей карьеры лично я написал функцию print_r для JavaScript, так как не видел возможности для вывода отладочной информации по массивам и объектам. Выглядело это примерно так:function print_r(variable) { if (variable instanceof Array || variable instanceof Object) { var key; for (key in variable) alert(key + " => " + variable); } else { alert(variable); } }
О каком-либо профилировании речи, конечно, не велось совсем.
При таком подходе даже информация об объекте console производит революцию.
Специфика клиентской стороны веб-приложения требует отладки кода во всех популярных браузерах. Конечно, чаще всего хватает и отладки в Internet Explorer"е и любом нормальном другом браузере, но мы рассмотрим все варианты.
Mozilla Firefox Наверно, именно Firefox можно назвать пионером отладки клиентского кода. Долгое время его указывали как браузер, наиболее подходящий для разработки, а все благодаря расширению Firebug , которое содержит, наверно, все нужные возможности, кроме валидации HTML кода.Так же, начиная с версии 4, появилась встроенная Веб-консоль, которая реализует часть функций вкладки «Консоль» и «Сеть» Firebug"а, а так же некоторые возможности по отладке CSS.
Начиная с версии 6, появился Простой редактор JavaScript, который так же реализует одну из функций Firebug"а, и позволяет писать и выполнять код прямо в браузере.
Начиная с версии 10 появился Инспектор страниц, который позволяет изучать HTML код и CSS свойства, то есть, реализует функции вкладки «HTML».
За валидацию HTML кода как правило отвечает расширение Html Validator . Как раз его иконку, указывающую на количество ошибок на главной странице сайта habrahabr.ru, можно видеть в правом нижнем углу браузера на картинке с Инспектором страниц.
Так же, пользуясь случаем, укажу, что для этого браузера есть множество расширений, позволяющих облегчить жизнь, о чем на Хабре уже была соответствующая .
Google Chrome и Safari Эти браузеры, основанные на WebKit, обладают встроенным инструментом разработки Web Inspector, который очень хорошо развит и реализует практически те же функции, что и Firebug. При этом, надо отдать ему должное, он не замедляет работы браузера, что водится за «старшим братом».
В Chrome он может быть вызван по нажатию клавиш Ctrl+Shift+I или просто по F12 . В Safari он хорошо спрятан, и для его использования нужно включить возможности разработки в настройках браузера. Позже инструменты разработчика станут доступными из пункта «Разработка» главного меню или по сочетанию клавиш Ctrl+Alt+I .
Для валидации HTML кода так же нужно устанавливать сторонние расширения. К примеру, для Chrome, это может быть Validity . Для Safari пока не удалось подобрать ничего подходящего.
Opera Opera так же имеет встроенный инструмент для разработчиков, который называется «Opera Dragonfly», и может быть вызван в любой момент по сочетанию клавиш Ctrl+Shift+I . Он похож на то, что нам представляет WebKit, и имеет подобные возможности и плюсы, хотя, на мой лично взгляд, менее удобен.
Расширение xdebug позволяет как минимум прогонять код по шагам и просматривать значения переменных, что поднимает программирование на PHP на новый уровень. О тонкостях работы с xdebug была соответствующая . XDebug обычно доступен в репозиториях GNU/Linux, в Windows его так же не слишком сложно установить, скопировав dll файл.
При использовании этого расширения, с сервера на компьютер разработчика поступает входящее соединение (по умолчанию на порт 9000), которое он должен обработать. Для этого необходимо соответствующим образом настроить свою IDE.
Кстати говоря, использование IDE так же является непременным условием движения вперед. Некоторые программисты считают, что разницу между программированием в блокноте с подсветкой кода и в IDE можно увидеть только на крупных проектах, но лично я придерживаюсь мнения, что разница видна даже на программе «Hello world!» - одна автоподстановка имен и аргументов стандартных функций чего стоит.
XHProfО расширении Да, xdebug предоставляет возможности по профилированию, но разработка Facebook"а для этих целей, XHProf , лично мне больше нравится. Я, сказать честно, не проводил никаких тестов, но считается, что данное расширение гораздо лучше подходит для production-серверов и для профилирования при реальных нагрузках.Установка К сожалению, это расширение не входит ни в какие репозитории. Оно входит в PECL, но по какой-то причине его установка штатным путем часто вызывает проблемы. По этой причине приходится проводить установку из исходников. # Получаем исходники
wget http://pecl.php.net/get/xhprof-0.9.2.tgz
# Распаковываем исходники
tar -xvf xhprof-0.9.2.tgz
# Переходим в каталог, где содержится код расширения
cd xhprof-0.9.2/extension/
# Проводим компиляцию и тест
phpize
./configure
make
make test
# Проводим установку цивилизованно
checkinstall
Файл конфигурации xhprof.ini предоставляет нам примерно такие возможности:
extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Каталог для логов
xhprof.output_dir="/var/log/xhprof/"
Приведем пример профилирования. В код приложения нужно включить следующие элементы:
// Начало скрипта, включаем профилирование
// как нагрузки на процессор, так и на память
xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
/*
* Основной код приложения
*/
// Конец скрипта, завершаем профилирование,
// записываем результат в лог
$xhprofData = xhprof_disable();
include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php";
include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php";
$xhprofRuns = new XHProfRuns_Default();
$namespace = "some-unique-name";
$runId = $xhprofRuns->save_run($xhprofData, $namespace);
echo "\n";
Здесь константа XHPROF_DIR указывает на каталог, куда мы распаковали скачанный архив.
Для анализа результатов нужен тот самый веб-интерфейс. Его можно взять в каталоге $XHPROF_DIR/xhprof_html/ - условно обозначим его так. К примеру, мы расположили его в доступном веб-серверу месте, и он доступен по адресу example.com/system/xhprof/ , тогда для анализа результата работы нам нужно обратиться к нему следующим образом:
Example.com/system/xhprof/?run=%runId%&source=%namespace%
Мы получим подобный результат:
Профилирование можно включать в код приложения на постоянной основе или, например, сделать так, чтобы оно запускалось случайно с определенной вероятностью или по наличию определенного условия. Например, так:
$needProfiler = (mt_rand(0, 100) < 10 or isset($_COOKIE["xhprof"]));
if ($needProfiler)
xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
В таком случае можно, имея жалобы от клиентов или подозрения, обратиться к результатам профилирования за определенный временной промежуток. С помощью параметра namespace можно определить, какая именно часть приложения (какой скрипт, контроллер, экшн) профилировались.
/**
* Запрос
* @param string $sql Запрос
* @param array $params Параметры
* @param string $query Скомпилированный запрос
* @return array Результат
*/
public function query($sql, array $params = array(), &$query = "")
{
$start = microtime(TRUE);
// Проведение запроса, включая "защиту" параметров
$stop = microtime(TRUE);
$time = $stop - $start;
$this->_addProfilerData($sql, $time);
// Возврат результата
}
private function _addProfilerData($query, $time)
{
if (is_array(self::$profilerData)) {
self::$profilerData = array("query" => $query,
"time" => $time);
}
}
public function __destruct()
{
if (is_array(self::$profilerData)) {
$this->_writeProfilerData();
self::$profilerData = FALSE;
}
// Отключение от БД
}
private function _writeProfilerData()
{
$values = array();
foreach (self::$profilerData as $row) {
$query = mysql_real_escape_string($row["query"], $this->con);
$time = (float)$row["time"];
$hash = crc32($row["query"]);
$values = "($hash, "$query", $time)";
}
if ($values) {
$strValues = implode(", ", $values);
$sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VALUES $strValues";
@mysql_query($sql, $this->con);
}
}
Здесь данные профилирования запросов хранятся в таблице profiler_queries . Эта таблица может иметь тип MyISAM или Archive, так как они предоставляют возможность совершать отложенные вставки, что не создает излишней задержки ответа при профилировании. Так же для лучшего поиска запросов в таблице лучше создать столбец типа INT , куда будет писаться crc32-хеш запроса, по которому нужно создать индекс.
Иногда браузер может уведомлять пользователя о том, что произошла ошибка сценария. Это касается и стандартного Internet Explorer. В нем, кстати, такой сбой происходит чаще, чем в других обозревателях. Чем может быть вызвана данная проблема и как ее решить?
Ошибка сценария возникает обычно в тех случаях, когда обозреватель не может правильно обработать коды HTML-страницы. Также сбой при загрузке может вызывать чрезмерное количество временных файлов (особенно, если давно не проводилась чистка браузера от них). Также некоторые параметры учетной записи могут мешать правильному запуску ресурса. Сегодня рассмотрим, как убрать ошибку сценария в Internet Explorer, с учетом всех этих причин.
Первые действияЕсли это произошло в первый раз, это может быть единичный случай. Следовательно, переживать не о чем. Попробуйте перезагрузить страницу. Если снова появится уведомление с вопросом, нужно ли остановить выполнение этого сценария, нажмите на кнопку «Нет».
Определились, что это не единичный случай. Что делать дальше? Посмотрите, выдает ли ошибку при открытии всех страниц или только одной. Если на одной, то зайдите в другой аккаунт на этом же сайте, откройте страницу в другом обозревателе и ПК.
Вы можете воспользоваться другим обозревателем. Сегодня их очень много, при этом они ничем не уступают стандартному инструменту, во многих вещах даже превосходят. Если у вас все закладки сохранены в IE, вы можете воспользоваться функцией экспорта данных.
Блокировка активных сценариев ActiveX и JavaВы решили все же не переходить на другую программу? В таком случае будем решать проблему дальше.
Active X и Java могут быть отключены или заблокированы. Это одна из распространенных причин ошибки сценариев. Что предпринять в таком случае? Нужно сбросить настройки безопасности обозревателя.
Запустите программу. Нажмите на иконку в виде шестеренки. Она будет рядом со звездочкой. В появившемся списке опций выберите раздел «Свойства браузера». Это будет предпоследний пункт.
Открываем вторую вкладку «Безопасность». Кликаем по кнопке «По умолчанию». Нажимаем на ОК.
Интернет Эксплорер сохраняет версии страницы при их запуске. Хранятся все копии в папке с временными файлами. Эту папку время от времени нужно чистить. Если папка достигнет, например, объема нескольких гигабайт, браузер начнет зависать и выдавать, в частности, ошибку сценария. В этом случае нужно убрать все содержимое указанного хранилища.
Следующий способ поможет избавиться от мусора в кэше, истории посещений, куки-файлов, данных веб-форм, а также паролей. Вы, конечно, вправе выбирать, какой вид файлов удалять, а какой оставить.
- Снова жмем на уже знакомую нам шестеренку. Выбираем «Свойства браузера».
- Переключитесь на раздел «Общие».
- В блоке «Журнал браузера» уверенно кликаем по кнопке «Удалить».
- Отметьте галочкой временные файлы и другие виды файлов, от которых хотите избавиться, а затем подтвердите удаление.
Сценарии могут не выполняться из-за того, что ваше антивирусное ПО блокирует их работу, либо сканирует папки с временными файлами. Что нужно делать? Открыть окно антивируса и отключить блокировку интерактивных элементов. Нет единой инструкции по отключению для всех антивирусов. Процедура будет отличаться в зависимости от вашего вида антивируса.
Неправильная обработка кода HTML-страницыВозникает такая ситуация обычно в том случае, когда зависает только один сайт. Это означает, что код страниц не подходит для Internet Explorer. Чтобы страница загружалась, отладка скриптов должна быть отключена.
- Зайдите снова в окошко «Свойства браузера».
- Зайдите на этот раз в четвертый блок «Дополнительно».
- Уберите галочку со строки «Показывать уведомление о каждой ошибке сценария». Сохраните изменения.
Если пользователь запретил отладку сценариев, уведомление об ошибке больше не появляется. Страница будет зависать все равно, поэтому этот способ можно использовать только в том случае, если проблемы только с одним сайтом.
Скачайте доступные обновленияСценарий может некорректно выполняться также из-за того, что отсутствуют нужные обновления самой системы и Интернет Эксплорер. Апдейт может решить полностью проблему.
Зайдите в Центр обновления у себя на ПК и убедитесь, что все обновления установлены. Если нет, то запустите установку.
Используем системный реестрСбой может появляться при загрузке ОС Windows, то есть при запуске компьютера. Это далеко не серьезный сбой, но все же исправлять ситуацию нужно. В ход пойдет системный реестр. Способ исправления ошибки гораздо сложнее, чем предыдущие. Если вы новичок, попросите сделать это за вас более знающего пользователя.
1.Запускаем окно «Выполнить» и прописываем в строке команду regedit.
2.Кликаем по блоку HKEY_LOCAL_MACHINE правой кнопкой мыши и выбираем «Разрешения».
3.В окне, которое появится внизу, ставим полный доступ и чтение.
4.Открываем Дополнительные параметры. Нажимаем на кнопку «Изменить» и ставим «Разрешить
5.Подтверждаем сохранение настроек. Кликаем по ОК.
6.Перезагрузите устройство. Вызовите командную строку. Финальный штрих – пропись следующей команды: regsvr32 msxml.dll. Нажмите на клавиатуре на Enter.
Ошибка сценария в Internet Explorer решается множеством способов. Мы представили и простые, и сложные. Выбор метода зависит от причины, а так как ее так просто не определить, используйте метод за методом.
Технологии не стоят на месте. Вспомните, какими были сайты 15 лет назад. Лишь текст на цветном фоне. Ни анимации, ни плавных переходов, ни разнообразия функций. Сейчас же многие визуальные эффекты и функции реализованы с помощью скриптов. Так давайте рассмотрим, как исправить ошибку сценария в Windows?
Ошибка сценария – это сбой в работе скрипта, который выполняет ту или иную функцию на веб странице. И не удивляйтесь, если подобная проблема появилась во время игры, установленной на ПК, – они тоже реализуют свой функционал с помощью JavaScript и Visual Basic. К счастью, никаких фатальных последствий для личных данных и системы в целом ошибка скрипта не представляет. А лечится проблема несколькими простыми способами.
Решение проблемыУниверсальных способов не существует, поэтому для начала нужно знать, при использовании чего появляется сообщение о сбое. Не удивительно, что в нашем списке есть Internet Explorer – браузер лидирует во многих антирейтингах по стабильности и производительности, поэтому рекомендуется заменить его на более качественный аналог. Возможно, это и будет лучшим решением данной проблемы.
В Internet ExplorerНо если вы истинный фанат софта от Microsoft или просто прикипели за долгие годы к приложению, то выполните следующее:
Если ошибка скрипта не появляется – поздравляю! Иначе – переходите к следующим пунктам:
Внимание! При очистке паролей все сохраненные данные для входа на сайты удалятся! Убедитесь, что знаете всю необходимую информацию. В противном случае не отмечайте пункт «Пароли».
Для решения проблем с ошибкой сценария в приложениях и играх выполните несколько шагов:
Теперь осталось зарегистрировать внесенные изменения:
Выше представлены исчерпывающие методы, которые работают в 99% случаев. Теперь вы знаете, что такое ошибка скрипта и как ее исправить. Если известен какой-либо другой способ – поделитесь им в комментариях. Удачи!
Написать HTML - здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.
Отладка - это не страшноВо время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке Rust , компилятор укажет на ошибку:
В данном случае, сообщение об ошибке понять относительно просто - "unterminated double quote string". Если вы внимательно посмотрите на println!(Hello, world!"); , то заметите, что здесь отсутсвует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.
Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.
HTML и отладкаHTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является интерпретируемым , а не компилируемым ). Синтаксис HTML элементов намного понятнее, чем у "настоящих языков программирования", таких как Rust, JavaScript , или Python . Способ, которым браузеры читают HTML более толерантен , чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.
Толерантный кодТак что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:
- Синтаксические ошибки (Syntax errors) : Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.
- Логические ошибки (Logic errors) : Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.
HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутсвуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!
На заметку : HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.
Активное обучение: Знакомство с толерантным кодомВремя изучить природу толерантного кода в HTML.
What causes errors in HTML?
- Unclosed elements: If an element is not closed properly, then its effect can spread to areas you didn"t intend
- Badly nested elements: Nesting elements properly is also very important for code behaving correctly. strong strong emphasised? what is this?
- Unclosed attributes: Another common source of HTML problems. Let"s look at an example: не закрыт, и сообщение указывает прямо на открывающий тег.
- "End tag strong violates nesting rules": Элемент неправильно вложен - на этом уровне нет парного открывающего тега.
- "End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки - скорее всего, проблема рядом с ней.
- "End of file seen and there were open elements": Файл закончился, но некоторые элементы не закрыты. Сообщение указывает на конец файла, в данном случае не закрыт элемент example:
