На данный момент существует большое количество различных браузеров, в той или иной степени поддерживающих существующие стандарты 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.

Использование средств разработчика F12 для отладки ошибок JavaScript

Это содержимое ссылается на более старую версию средств разработчика F12. Скачайте последнюю версию документации по средствам F12 .

Средства F12 позволяют разработчикам быстро отладить код JavaScript, не выходя из браузера. Встроенные в каждый экземпляр Windows Internet Explorer 9 средства разработчика F12 предоставляют средства отладки, такие как точки останова, просмотр контрольных и локальных переменных, а также консоль для сообщений и немедленное выполнение кода.

В этой статье рассматривается, как использовать средства разработчика F12 для отладки кода JavaScript. Эта статья не является исчерпывающим учебным пособием по отладке, ее цель - выделить инструменты, которые могут помочь разработчику начать работать с созданным кодом. В Internet Explorer 9 нажмите клавишу F12 , чтобы открыть средства разработчика, и щелкните вкладку Сценарий для начала работы.

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

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

Когда вы впервые открываете средства разработчика F12 и щелкаете вкладку Сценарий , ваш код появляется в левой части, а консоль в правой. В консоли можно увидеть сообщение: "Обновите страницу, чтобы просмотреть сообщения, полученные до открытия средства разработчика F12. " При обновлении веб-страницы на консоли появятся все ошибки и предупреждения, вызванные браузером.

Чтобы устанавливать точки останова, просматривать контрольные и локальные переменные, а также видеть стек вызовов последовательности функций, нажмите кнопку Начать отладку . Нажатие кнопки Начать отладку обновляет веб-страницу и перезапускает код в отладчике.

Использование консоли для обнаружения синтаксических и других ошибок кода

В большинстве проектов программирования ошибки делятся на синтаксические, логические и ошибки ввода данных. В представлении консоли показываются ошибки и исключения JavaScript, а также исключения модели DOM. Внутри вашего кода вы можете использовать объект консоли для передачи на консоль состояния и сообщений об ошибках программы вместо вызовов "alert()" или доступного пространства на экране. Например, вы можете добавить строку

Window.console.log("The file opened successfully");

В ваш код JavaScript, чтобы получить информацию о состоянии сценария, не прерывая его выполнения. Дополнительные сведения: .

Исправление внешнего вида сценариев

Средства разработчика F12 могут отлаживать JavaScript на уровне строки или оператора независимо от способа отображения кода. Можно пошагово выполнять даже сценарии, сжатые так, что они выглядят большим блоком кода. Но иногда трудно отслеживать логику, когда код является одним блоком.

Для форматирования сценария нажмите кнопку Конфигурация и выберите пункт Форматировать JavaScript . На следующих снимках экрана показан блок кода JavaScript до и после форматирования.

Прерывание выполнения кода

Задание точек останова в средствах разработчика F12 аналогично заданию в отладчиках двоичного кода, таких как Microsoft Visual Studio. В левой области щелкните слева от строки кода, в которой нужно остановиться. Точки останова являются переключаемыми, поэтому щелчок добавляет точку останова, а повторный щелчок удаляет ее.

В код можно добавить столько точек останова, сколько нужно. Можно либо щелкнуть строку кода правой кнопкой мыши и выбрать команду Вставить точку останова , либо щелкнуть в левом поле рядом с оператором, в котором нужно установить точку останова.

Используя средства разработки F12, можно задать точку останова на уровне оператора, даже если эти операторы находятся в блоке или строке из нескольких операторов. Это позволяет создать точку останова в сжатом сегменте кода. Оптимальным способом задания точки останова в этих условиях является щелчок кода правой кнопкой мыши и выбор в контекстном меню пункта Вставить точку останова . Также можно использовать описанное ранее форматирование сценария (красивая печать), форматируя строки, чтобы упростить их щелчок на полях.

Управление несколькими точками останова с помощью вкладки "Точки останова"

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

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

На вкладке Точки останова также можно воспользоваться контекстным меню (которое открывается щелчком правой кнопки мыши), позволяющим удалять, включать, отключать или копировать группы точек останова. Эти параметры показаны в следующей таблице.

Пункт меню Действие

Удалить	Удаление точки останова без возможности восстановления.
Удалить все	Удаление всех точек останова без возможности восстановления.
Включить все	Установка всех флажков в списке.
Отключить все	Снятие всех флажков в списке.
Условие	Позволяет установить условную точку останова для одной точки. Этот пункт недоступен, если выбрано несколько точек останова.
Копировать	Копирование текста описаний выбранных точек останова.
Выделить все	Выделение всех точек останова в списке.
К исходному коду	Переход в левую область кода для отображения выбранной точки останова. Этот пункт недоступен, если выбрано несколько точек останова.

Условные точки останова

Безусловный останов на строке кода полезен, но еще более мощным средством является останов, когда свойство или переменная достигает конкретного значения. Чтобы остановиться при достижении или установке конкретного значения, создайте точку останова, а затем откройте вкладку Точки останова . Щелкните правой кнопкой мыши нужную точку останова и выберите команду Условие .

В диалоговом окне условий добавьте правильный оператор JavaScript. Выполняемый код остановится в этой точке останова, когда результатом оператора будет значение true. Например, на следующем изображении выполнение кода останавливается, когда значение свойства oAudio.paused становится равным false.

Можно задать одно условие или, используя логические операторы, создать более сложное условие останова. Но помните, что область действия переменных и объектов останется той же, что и при их отображении в окне просмотра точки останова. Значение условия, не попадающего в область действия, не будет оцениваться как true.

Пошаговое выполнение кода

Когда выполнение кода останавливается на точке останова, можно воспользоваться кнопками перехода для продолжения выполнения (F5 ), прерывания выполнения (CTRL+SHIFT+B ), пошагового входа в функцию (F11 ), пропуска функции (F10 ) или выхода из функции (SHIFT+F11 ). Когда выполнение остановлено на точке останова или при пошаговом выполнении, окно отладки фактически становится модальным.

Поэтому перед продолжением взаимодействия с веб-страницей нужно остановить отладку (SHIFT+F5 ) или продолжить выполнение (F5 ). Следует вспомнить об этом, если кажется, что веб-страница перестала отвечать. Если, когда открыто несколько окон, окно отладчика не находится сверху, оно может ожидать реакции в точке останова. В этом случае, чтобы вернуть управление веб-страницей, найдите окно отладки для этой веб-страницы и нажмите F5 для продолжения или нажмите SHIFT+F5 для прекращения отладки.

Просмотр переменных с помощью вкладок "Watch" и "Локальные"

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

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

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

Чтобы увидеть разницу, откройте следующий пример в Internet Explorer 9 и выполните указанные действия.

JavaScript debugging example //create a global variable for our var display; function init() { //initialize only after the HTML has been loaded display = document.getElementById("results"); } function firstParam() { //set breakpoint here var a = 5; secondParam(a); } function secondParam(a) { var b = 10; thirdParam(a, b); } function thirdParam(a, b) { var c = 15; var d = a + b + c; //display to console if F12 tools is open if (window.console && window.console.log) { window.console.log(a + " + " + b + " + " + c + " = " + d); } else { display.innerText = a + " + " + b + " + " + c + " = " + d; } }

Run

Загрузите пример в Internet Explorer 9.

Нажмите клавишу F12 , чтобы открыть средства разработчика F12, и щелкните вкладку Сценарий .

В левой области выполните прокрутку до первой функции, щелкните правой кнопкой мыши строку "var a = 5;" и выберите команду Вставить точку останова .

Нажмите кнопку Начать отладку , а затем на веб-странице в браузере нажмите кнопку Run (Выполнить).

В средствах разработчика F12 щелкните вкладку Контрольные значения на правой стороне и добавьте переменные "a, b, c, и d.".

Пошагово выполните код, нажимая клавишу F11 или кнопку Шаг с заходом , и просмотрите переменные на вкладке Контрольные значения .

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

Чтобы почувствовать отличия от вкладки Локальные , нажмите клавишу F5 для продолжения из средств разработчика F12. На веб-странице в браузере нажмите кнопку Run (Выполнить), чтобы еще раз выполнить код и вернуться в средства разработчика F12. В правой области вкладки Сценарий щелкните вкладку Локальные и нажмите клавишу F11 , чтобы снова пошагово выполнить функции. Обратите внимание, что список локальных переменных содержит только переменные, имеющие значения. В представлении Локальные также показываются аргументы, передаваемые в функцию, их значение и тип.

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

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

Попробуйте выполнить вышеупомянутый пример и следите за вкладкой Стек вызовов при пошаговом выполнении кода с заходом в функции.

На вкладке Стек вызовов текущая функция или расположение всегда находится сверху (они указаны стрелкой как на вкладке Стек вызовов , так и на полях кода). При двойном щелчке любой из функций в списке выделяется оператор, вызывающий функцию.

Отладка нескольких сценариев

Большие веб-страницы, как правило, используют несколько файлов JavaScript. Средства разработчика F12 позволяют работать с несколькими файлами сценариев, так же как при отладке вашего кода. Для просмотра другого файла щелкните стрелку вниз рядом с кнопкой Начать отладку , чтобы вывести список сценариев, связанных с этой веб-страницей. При использовании средств разработчика F12 пошаговое выполнение кода будет осуществляться по всем файлам. Можно добавить для просмотра переменные из любого файла сценария, а в представлении стека вызовов будет показываться путь выполнения через функции, содержащиеся в различных файлах сценариев.

Изменение настройки режима документа

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

Средства разработчика F12 для Internet Explorer 9 не могут исправить ваш код за вас, но несколько облегчают поиск ошибок JavaScript.

Во время работы в интернете браузер Internet Explorer может выдавать сообщения о том, что страница содержит ошибки и может отображаться неправильно. Рассмотрим несколько способов исправления этой проблемы.

Инструкция

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

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

Возможно, браузер Internet Explorer в момент просмотра страниц не блокирует активные сценарии, Java и ActiveX, которые определяют отображение сведений на странице. Чтобы исправить проблему, необходимо сбросить параметры безопасности браузера. Для этого в меню «Сервис» выберите пункт «Свойства обозревателя» и перейдите на вкладку «Безопасность». Нажмите кнопку «По умолчанию», а затем «ОК». Если после повторного запуска страницы, на которой возникала ошибка, проблема остается, попробуйте следующий способ.

Как известно, браузер хранит временные файлы и копии страниц в отдельной папке, для последующего к ним обращения. Если размеры папки становятся слишком большими, могут возникнуть ошибки при отображении некоторых страниц. Проблему можно решить, периодически очищая папку с временными файлами. Для этого откройте диалоговое окно «Свойства обозревателя» из меню «Сервис». На вкладке «Общие» в группе «История» нажмите кнопку «Удалить». Установите флажки для пунктов «Временные файлы интернета», «Куки-файлы», «Журнал», «Данные веб-форм» и нажмите «ОК».

Иногда браузер может уведомлять пользователя о том, что произошла ошибка сценария. Это касается и стандартного 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 решается множеством способов. Мы представили и простые, и сложные. Выбор метода зависит от причины, а так как ее так просто не определить, используйте метод за методом.

Написать 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.

Для начала, скачайте наш пример отладки и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.

Далее, откройте её в браузере. Вы увидите нечто вроде этого:

Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа): HTML debugging examples

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: