Как проверить правильность (валидность) готового HTML-кода

Рассказываем, как валидатор помогает избавиться от ошибок, которые мешают пользователям, браузерам и поисковикам.

Как проверить правильность (валидность) готового HTML-кода

Ошибки HTML-кода создают вагон проблем: поисковики отказываются продвигать сайт, а пользователи грустно закрывают вкладку браузера, потому что ничего не работает. Профессиональные программисты всегда проверяют код на ошибки, причем находят их за несколько секунд.

Рассказываем, как самостоятельно проверить сайт и что с ним случится, если код невалидный.

Что такое HTML-валидация и зачем она нужна

Валидация — это проверка HTML-кода: соответствует ли он общепринятым правилам и нет ли в нём ошибок. Хороший код называют валидным. Он быстро загружается, браузеры корректно обрабатывают его синтаксис, а поисковикам кажется, что сайт просто замечательный, и его позиции растут.

Стандарты качества кода придумала и поддерживает W3C. Эта организация предлагает унифицировать сайты: сделать их быстрыми, одинаково удобными и доступными для всех.

Как проверить правильность (валидность) готового HTML-кода

Чем опасны ошибки в разметке

Ошибки портят впечатление о сайте, мешают ему нормально работать и продвигаться в поисковых системах. Вот конкретные примеры:

  • Страницы загружаются слишком медленно. По данным Unbounce, почти 27% пользователей закрывают страницу, если она грузится больше трех секунд. Еще 32,3% уходят после шести секунд загрузки.
  • Посетители видят только часть текстов и иллюстраций. А значит, контент для них почти бесполезный — и посетитель, скорее всего, уйдет к конкуренту.
  • Если поисковый робот запнется хотя бы об одну ошибку — битую ссылку, пропущенный знак в коде или неправильную верстку, — он может не проиндексировать страницу.
  • Сайт некорректно отображается на разных устройствах. Он может хорошо выглядеть на экране компьютера, а с телефона не будут видны тексты, кнопки или весь контент «съедет».
  • На сайте много скрытой рекламы и вирусов, а разработчик или владелец сайта не в курсе.

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

Почему в коде появляются ошибки. Ошибки в разметке появляются, если разработчик, например, забыл закрыть тег, случайно продублировал элемент или указал неправильный атрибут.

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

Как пользоваться валидатором

Валидатор — это сервис проверки валидности HTML, который быстро находит ошибки в коде и помогает их исправить. Подобных сервисов несколько, но разработчики часто используют официальный валидатор W3C. В нём можно найти ошибки тремя способами: указать URL сайта, загрузить HTML-документ или HTML-код.

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

Что проверяет валидатор

Сервис проверяет синтаксис кода: например, верно ли указаны тип документа и кодировка, нет ли в коде пропущенных элементов. Также происходит проверка соответствию DTD (Document Type Definition) — валидатор смотрит, соответствует ли код типу документа.

DTD — это инструкция для браузера, которая помогает ему правильно отображать HTML-документ.

Как интерпретировать результат

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

Как проверить правильность (валидность) готового HTML-кода

Пример результатов проверки, который наглядно показывает, что такое ошибка валидации. Предупреждения выделены желтым, ошибки — красным. (Скриншот: validator.w3.org)

Предупреждения

Незначительные проблемы. Сайт, скорее всего, не сломается, но всё равно не соответствует спецификациям W3C.

Это означает, что при прочих равных сайты конкурентов будут лучше работать на разных устройствах и эффективнее продвигаться в поисковых системах.

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

Ошибки следует исправлять в первую очередь, но хорошим тоном будет избавиться вообще от всех проблем: это поможет сайту работать нормально.

Как проверить правильность (валидность) готового HTML-кода

Зеленая строка — то, что хочет увидеть разработчик, когда проверяет качество кода. (Скриншот: validator.w3.org)

Как проверять верстку с помощью хинтера

Хинтер — инструмент, который подсвечивает проблемный синтаксис прямо в редакторе кода.

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

Обычно хинтер выглядит как плагин для текстового редактора, в котором вы пишете код. Это как проверка орфографии в Word, только для HTML и CSS.

Как проверить правильность (валидность) готового HTML-кода

Проблемный код подсвечивается красным в режиме онлайн. По желанию можно отключить автопроверку и запускать валидацию вручную. (Скриншот: github.com)

Заключение

Перед тем как сдать сайт заказчику или опубликовать в интернете, следует проверить код на валидность. Что нужно запомнить:

  • Код бывает валидным и невалидным. Нужен валидный.
  • Добиться валидности бывает непросто даже опытному разработчику, потому что кода много. Профессионалы используют валидатор.
  • В валидаторе можно проверить сайт, HTML-документ или кусок кода.
  • В помощь валидатору можно установить хинтер — подсветку проблемного синтаксиса прямо в вашем текстовом редакторе.
  • Сайт с хорошим кодом лучше продвигается в поисковиках и радует пользователей скоростью и функционалом, с какого устройства они бы ни заходили.

vlada_maestro / shutterstock

Как проверить правильность (валидность) готового HTML-кода

Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик

Если вдруг вы задавались вопросом: “Как проверить, правильный (валидный) ли у меня HTML-код?” — эта статья для вас. Разберёмся, зачем вообще нужен валидный код, на что он влияет и почему это важно.

Правильный, валидный html-код — это код, написанный по спецификации W3C, в которой собраны стандарты и рекомендации по удобству и универсальности Всемирной сети.

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

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

Для того чтобы быстро, удобно и в автоматическом режиме проверять свой код, существует помощник — валидатор W3C. Он используется повсеместно (хотя есть и другие), так как придуман и написан консорциумом W3C — теми, кто создал и поддерживает стандарт языка.

Как им пользоваться? Давайте посмотрим на примере простого HTML-фрагмента.

Валидатор позволяет выбрать, в каком именно виде вы передадите ему информацию: по ссылке на сайт из интернета, загрузите файл или же просто скопируете и вставите код в специальное поле.

Если ваш сайт пока ещё не выложен на хостинг, оптимальным вариантом будет вставка кода. Если же уже на нём — выбирайте первый вариант, по ссылке.

Попробуем вставить некий код в поле для ввода.

Теперь, когда код вставлен, остается лишь нажать check. У валидатора есть ещё и другие настройки: выбор версии языка HTML (за который и так отвечает DOCTYPE), а также группировка ошибок по типу.

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

Результаты, выданные валидатором, делятся на две категории: предупреждения и ошибки. В нашем варианте кода как раз есть и те и другие.

Предупреждения — это какие-то незначительные неточности в коде, которые не сломают сайт, но не соответствуют стандартам кода.

Ошибки — более серьёзные проблемы, которые могут повлиять на работу кода в целом. Это могут быть как грубые ошибки — например, неверная вставка тега в тег, неверное закрытие тега и т.д., так и менее значимые — отсутствие атрибута alt, незаполненный тег title.

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

Помимо классического валидатора есть ещё один тип инструментов — так называемые хинтеры. Как правило, это плагины для редакторов кода, которые при написании кода автоматически подчеркивают ошибки и указывают, что нужно исправить. Один из таких плагинов — HTMLHint для редактора VS Code.

Хинтер работает по определённым правилам, которые довольно схожи с правилами валидатора. Но в идеале стоит проверять верстку как хинтером, так и валидатором, чтобы точно всё исправить.

Со списком правил хинтера можно ознакомиться по ссылке.

Правильный HTML-код крайне важен. Стандарты языка придуманы не просто так. Даже если ошибка кажется несущественной, она может повлиять на логическую сторону кода (например, отсутствие alt — описания изображения).

Всегда проверяйте свой код, обращайте внимание на частые ошибки, чтобы в будущем их не совершать. Научиться профессионально создавать сайты и писать валидный html можно на курсе по веб-вёрстке.

Как проверить правильность (валидность) готового HTML-кода

Вчера всё работало, а сегодня не работает / Код не работает как задумано

В чем заключается процесс отладки? Что это такое?

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

Важное замечание

Есть много IDE и редакторов кода, которые позволяют производить отладку. Процесс настройки в них у всех различается. Поэтому стОит обратиться к документации по настройке отладки для непосредственно той среды разработки и той версии, в которой работаете именно ВЫ.

Подготовка

Для начала необходимо, чтобы в PHP имелась библиотека для отладки под названием xdebug. Если её еще нет, то надо установить.

Для WINDOWS

Обычно все библиотеки лежат в папке ext внутри папки PHP. Туда и надо поместить dll.

Далее в php.ini прописываем настройки:

Перезагружаем сервер, на всякий случай.

Для UBUNTU

  • sudo apt update ИЛИ sudo apt-get update
  • sudo apt install php-xdebug или если нужнен отладчик для конкретной версии PHP, то sudo apt install php7.0-xdebug где 7.0 указывается версия PHP
  • sudo nano /etc/php/7.0/mods-available/xdebug.ini zend_extension=/usr/lib/php/20151012/xdebug.so
    xdebug.remote_autostart = 1
    xdebug.remote_enable = 1
    xdebug.remote_handler = dbgp
    xdebug.remote_host = 127.0.0.1
    xdebug.remote_log = /tmp/xdebug_remote.log
    xdebug.remote_mode = req
    Примечание: каталог 20151012, скорее всего, будет другим. cd в /usr/lib/php и проверьте, в каком каталоге в этом формате находится файл xdebug.so, и используйте этот путь. 7.0 – тоже отличается, в зависимости от того, какая версия у вас используется
  • Перезагружаем сервер, на всякий случай.

Теперь если в файле .php написать phpinfo(); то можно будет увидеть в самом низу такую картину:

Как проверить правильность (валидность) готового HTML-кода

  • нажимаем create project from existing files
  • выбираем Web server is installed locally, source files are located under its document root
  • выбираем папку с файлами, и нажав вверху кнопку “Project Root” помечаем папку как корень проекта
  • нажимаем “Next”
  • нажимаем Add new local server

Как проверить правильность (валидность) готового HTML-кода

Как проверить правильность (валидность) готового HTML-кода

Запуск

Для начала в левой части панели с кодом на любой строке можно кликнуть ЛКМ, тем самым поставив точку останова (breakpoint – брейкпойнт). Это то место, где отладчик автоматически остановит выполнение PHP, как только до него дойдёт. Количество breakpoint’ов не ограничено. Можно ставить везде и много.

Как проверить правильность (валидность) готового HTML-кода

Как проверить правильность (валидность) готового HTML-кода

Теперь можно нажать Debug!!!

В данном случае, т.к. функция вызывается сразу на той же странице, то при нажатии кнопки Debug — отладчик моментально вызовет функцию, выполнение “заморозится” на первом же брейкпойнте. В ином случае, для активации требуется исполнить действие, при котором произойдет исполнение нужного участка кода (клик на кнопку, передача POST-запроса с формы с данными и другие действия).

Как проверить правильность (валидность) готового HTML-кода

  • Стэк вызовов, все вложенные вызовы, которые привели к текущему месту кода.
  • Переменные. На текущий момент строки ниже номера 3 ещё не выполнились, поэтому определена лишь $data

Процесс

Для самого процесса используются элементы управления (см. изображение выше, выделено зеленым прямоугольником) и немного из дополнительно (см. изображение выше, выделено оранжевым прямоугольником).

Как проверить правильность (валидность) готового HTML-кода

Show Execution Point (Alt+F10) — переносит в файл и текущую линию отлаживаемого скрипта. Например, если файлов много, решили посмотреть что в других вкладках, а потом забыли где у вас отладка 🙂

Step Over (F8) — делает один шаг, не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.

Step Into (F7) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.

Step Out (Shift+F8) — выполняет команды до завершения текущей функции. Удобно, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.

Читайте также:  Код ошибки 60-02 в телефоне – неполадки интернета в Сбербанк Онлайн, что означает неисправность, почему возникает и как ее устранить

Rerun (Ctrl+F5) — перезапускает отладку.

Resume Program(F9) — продолжает выполнение скрипта с текущего момента. Если больше нет других точек останова, то отладка заканчивается и скрипт продолжает работу. В ином случае работа прерывается на следующей точке останова.

Stop (Ctrl+F2) — завершает отладку.

View Breakpoints (Ctrl+Shift+F8) — просмотр всех установленных брейкпойнтов.

Mute Breakpoints — отключает брейкпойнты.

Итак, в текущем коде видно значение входного параметра:

Как проверить правильность (валидность) готового HTML-кода

Если нажмем F8 2 раза, то окажемся на строке 7; во вкладках Watches и Variables и в самой странице с кодом увидим, что переменная $sum была инициализирована и её значение равно 0.

Если теперь нажмем F8, то попадем внутрь цикла foreach и, нажимая теперь F8, пока не окончится цикл, можно будет наблюдать на каждой итерации, как значения $num и $sum постоянно изменяются. Тем самым мы можем проследить шаг за шагом весь процесс изменения любых переменных и значений на любом этапе, который интересует.

Дальнейшие нажатия F8 переместят линию кода на строки 11, 12 и, наконец, 15.

Дополнительно

Если нажать на View Breakpoints в левой панели, то можно не только посмотреть все брейкпойнты, но в появившемся окне можно еще более тонко настроить условие, при котором на данной отметке надо остановиться.
В функции выше, например, нужно остановиться только когда $sum превысит значение 20.

Как проверить правильность (валидность) готового HTML-кода

Это удобно, если останов нужен только при определённом значении, а не всегда (особенно в случае с циклами).

У вас может быть очень крутой сайт. Качественный, с интересным контентом, с полезными товарами. Дизайном шикарным и удобным меню. Но если на нем есть битые ссылки (особенно если их много), это автоматически делает его подозрительным в глазах поисковых роботов и создает дурное впечатление о ресурсе со стороны посетителей. Такого допускать нельзя. Ваш прекрасный сайт должен быть прекрасным во всем. И мы этого добьемся.

Что такое битая ссылка?

Битая ссылка — это страница на сайте, которую нельзя открыть. Ее не существует. Когда потенциальный посетитель пытается на нее попасть, то получает в ответ ошибку. Это может быть ошибка 404 Not Found или 400 Bad Request. Или без кода вовсе: Timeout, Empty, Reset. Зависит от настроек конкретного ресурса. Оболочка разная, а смысл один и тот же. Сервер говорит, что искомой страницы здесь нет.

Такие ссылки еще изредка называют «мертвыми». Они возникают по нескольким распространенным причинам:

  • В адресе страницы допущена ошибка. Неправильно написано слово или не хватает какого-то символа. Или не настроены алиасы.
  • Структуру сайта недавно кардинально поменяли, не настроив при этом перенаправление со старых ссылок.
  • Ссылки на сторонний контент на странице удалили или каким-либо образом «сломали».
  • В коде сайта затесались ошибки. В HTML или в JavaScript. Может быть, это сбой в CMS.

Как проверить правильность (валидность) готового HTML-кода

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Чем опасны битые ссылки?

Есть две неподтвержденные теории и один солидный факт, подтверждающие серьезную угрозу со стороны битых ссылок.

Первая теория такая. Считается, что поисковые роботы Google и Яндекс не любят битые ссылки. Заприметив оные, поисковики решат, что сайт уже давно бросили или сделали так криво, что и стыдно его людям показывать. В связи с этим, позиции ресурса в Google и Яндекс заметно «просядут». Но никто еще не доказал, что это так.

Вторая теория. Якобы битые ссылки расходуют краулинговый бюджет — объем страниц, который поисковики сканируют за определенный период времени. Здесь вмешался представитель Google и сказал, что появление 404 ошибки никак не повлияет на краулинговый бюджет.

А вот что реально важно, так это отношение посетителей к сайту с битыми ссылками. На таких долго не задерживаются. Обычно 404 Not Found говорит о том, что надо бы перейти на главную страницу и воспользоваться поиском. Но всем плевать. Человек просто вернется в Google и будет искать ресурс с рабочими ссылками. Все. Вы потеряли своего посетителя.

Из-за этого вырастет доля отказов. А это не только упущенная аудитория, но и проблемы с ранжированием. Поисковик простит вам битую ссылку, но не простит визитер, который провел на сайте всего секунду и неожиданно убежал.

Как проверить правильность (валидность) готового HTML-кода

Как проверить правильность (валидность) готового HTML-кода

Как разыскать все битые ссылки на сайте?

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

Я бы советовал не останавливать выбор на чем-то одном. Бывает так, что один сервис отображает неполную информацию. Это как с антивирусами. В тандеме находят больше угроз, чем по одиночке.

Google Search Console

Официальная панель управления Google отлично справляется с поиском битых ссылок. Так что можно отлавливать 404-е с помощью нее. Надо только подтвердить свои права на домен, а потом открыть пункт меню «Покрытие».

Как проверить правильность (валидность) готового HTML-кода

Яндекс. Вебмастер

Это старая программа, но отчеты из нее многие до сих пор считают эталонными. Xenu предоставляет информацию бесплатно, поэтому можно попробовать самостоятельно и без финансовых потерь.

Как проверить правильность (валидность) готового HTML-кода

  • Поддерживает страницы с шифрованием.
  • Работает быстрее большинства аналогов.
  • Может обнаружить перенаправления.
  • Позволяет делать повторные проверки.

Broken Link Checker

Это даже не отдельная программа, а плагин для WordPress. Дико популярный и полезный. Из плюсов можно выделить то, что он бесплатный и встраивается в WordPress. А из минусов — то, что он не всегда работает корректно и сложно настраивается. Часто приходится запускать модуль по несколько раз, чтобы был какой-то прок. Но другие дополнения к WordPress подобного рода оказываются еще хуже.

Netpeak Spider

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

Dead Link Checker

Платный онлайн-сервис для поиска ошибок 404 на ресурсе. Работает по подписке. То есть платите 10$ в месяц и получаете возможность отсканировать до 50 000 ссылок. Когда есть бесплатные альтернативы, кажется, что это не самый лучший выбор. Но я его не тестировал. Возможно, он творит какие-то чудеса и находит то, что не способны найти конкуренты.

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

Нашел все битые ссылки, что дальше?

То, что нашли, уже хорошо. Только теперь надо их исправить. Будем действовать по следующей схеме действий:

  • Разберем все ссылки.
  • Категоризируем их.
  • И исправим все ошибки.

Анализируем ссылки

Сначала надо организовать данные, полученные из сервисов по поиску битых ссылок. Надо понять, почему те или иные ссылки поломаны. Например, если дело в опечатке, то проще всего исправить эту самую опечатку в коде сайта. Если страницы больше не существует, то надо удалить ссылку и добавить заглушку с соответствующим сообщением. Мол, «410 Gone, ребята, странички не будет». А если вы недавно переехали на другой домен, то самым адекватным решением будет — настроить массовый редирект.

Поэтому для начала можно создать такую простенькую табличку:

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

Но это, конечно, исключительно пример. Вы можете организовать полученную информацию, как вздумается.

Исправляем опечатки

Опечатки бывают двух типов. Те, что допустили вы как владелец сайта. И те, что допускают посетители, надумавшие зайти к вам вручную, указав адрес страницы (страшные люди). Какие опечатки стоит исправлять и так понятно. Те, что допустили сами.

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

Настраиваем редирект

Теперь займемся ссылками, которые по-вашему мнению нуждаются в перенаправлении.

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

Расскажу, как можно сделать 301 редирект в CMS WordPress и с помощью файла .htaccess

WordPress

Как проверить правильность (валидность) готового HTML-кода

  • Переходим в подпункт «Плагины».
  • Кликаем по поисковому полю.
  • Ищем плагин Redirection и устанавливаем его.

В поисковике будут и другие плагины, с помощью которых можно настроить редирект. Можете попробовать их. Это уже дело вкуса.

Как проверить правильность (валидность) готового HTML-кода

  • Потом снова открываем вкладку «Инструменты».
  • Переходим к настройкам плагина «Перенаправления».
  • Нажимаем на Add new redirection.

Как проверить правильность (валидность) готового HTML-кода

Ну и так придется повторять до тех пор, пока все ссылки, нуждающиеся в перенаправлении, не получат его. Эти задачи нередко достаются верстальщикам на аутсорсе или «разнорабочим» с UpWork и других бирж.

Как сделать массовый редирект

При переезде на новый домен вручную делать редирект всех битых ссылок — это нерациональный адский труд. Поэтому проще воспользоваться массовым редиректом. Делаем следующее:

  • Открываем сайт для генерации файла .htaccess с настроенным перенаправлением.
  • Ставим галочки напротив пунктов Mass Redirect to another Domain и 301 Redirect URLs.
  • Напротив первого вписываем название сайта.
  • Нажимаем на кнопку Generate .htaccess в нижней части страницы.

Впрочем, так можно сгенерировать код для любого типа перенаправлений.

Что делать с битыми ссылками на чужих сайтах?

Теперь вы знаете, что делать со страницами, которые убили сами и к которым у нас есть доступ. Проблематичнее дела обстоят с чужими сайтами, где есть ссылки на ваш ресурс. Они тоже подвержены опечаткам и переезду. Тоже будeт ошибка. Но дело поправимое.

Попросим владельца сайта поменять ссылку

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

Настроим редирект с битой ссылки на рабочую

Работает так же, как и в случае со своими ссылками. Просто настройте редирект, чтобы пользователь оказался в нужном месте. Для этого не надо ни с кем связываться и ждать ответа. Настраиваем перенаправление удобным способом и радуемся.

Заново создаем пропавшую страницу

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

Настроим редирект на похожую страницу

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

И бонусом делаем кастомную страничку 404

Тоже хороший вариант. Сделайте страницу с ошибкой 404 более привлекательной. Оригинальной, что ли. Добавьте картинку, анимацию. Не плоскую шутку. А самое главное, ссылку на главную страницу или на встроенный поисковик. Так вы в десятки раз повысите вероятность, что пользователь останется на вашем сайте, а не ретируется, заметив страшные черные буквы — Not Found.

Можно испробовать все описанные способы в том же порядке. Не ответил владелец чужого сайта? Пилите редирект. Не подходит вариант с редиректом? Так хотя бы сделайте нормальную страничку с ошибкой. Это уже что-то.

Выводы

Итак, еще раз:

  • Битые ссылки — поломанные страницы, отзывающиеся ошибками 400 и 404.
  • Они портят жизнь посетителям вашего сайта. Так что придется принимать какие-то меры.
  • Их несложно найти с помощью бесконечного количества сайтов и программ, заточенных под эту задачу.
  • И есть ворох путей исправления ситуации, независимо от того, почему появились проклятые битые ссылки.
Читайте также:  Интернет выдает код ошибки

Думаю, на этом и закончим. Спасибо.

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

Как открыть консоль на разных браузерах

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

Как проверить правильность (валидность) готового HTML-кода

Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».

Как проверить правильность (валидность) готового HTML-кода

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.

Как проверить правильность (валидность) готового HTML-кода

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.

Какие вкладки есть в консоли и за что они отвечают

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

Как проверить правильность (валидность) готового HTML-кода

В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.

Как проверить правильность (валидность) готового HTML-кода

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

Как проверить правильность (валидность) готового HTML-кода

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

Как проверить правильность (валидность) готового HTML-кода

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

Elements

Как проверить правильность (валидность) готового HTML-кода

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Как проверить правильность (валидность) готового HTML-кода

Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.

Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.

Как проверить правильность (валидность) готового HTML-кода

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

Sources

Как проверить правильность (валидность) готового HTML-кода

Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.

Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.

Network

Как проверить правильность (валидность) готового HTML-кода

Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.

Performance

Как проверить правильность (валидность) готового HTML-кода

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

Memory

Как проверить правильность (валидность) готового HTML-кода

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

Application

Как проверить правильность (валидность) готового HTML-кода

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

Как проверить правильность (валидность) готового HTML-кода

Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:

  • проверке сертификата – подтвердил ли сайт свою подлинность TLS;
  • tls-соединении – использует ли сайт современные безопасные протоколы;
  • безопасности второстепенных источников.

Lighthouse

Как проверить правильность (валидность) готового HTML-кода

Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

  • Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
  • TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
  • TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
  • (unknown): Script error. Обозначает ошибку скрипта.
  • TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
  • TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
  • Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
  • TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
  • Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
  • ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!

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

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

Что значит валидация?

Можно сказать, что валидация – это проверка кода на качество. Разработчики придумали стандарты, которым должны соответствовать верстка, синтаксис, логика приложения и т.п. Некоторые из них общепринятые и глобальные, некоторые более частные, но везде эти стандарты в том или ином виде существует.

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

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

Как проверить правильность (валидность) готового HTML-кода

Зачем нужна валидация?

Как и любая проверка, валидация решает сразу несколько проблем:

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

SEO

Одна из ключевых причин проводить валидацию кода – SEO. Веб-ресурс необходимо оптимизировать под требования поисковых машин, чтобы у него были высокие позиции в выдаче Google, Яндекс и других поисковиков.

Нужно учитывать множество параметров, но основные моменты это:

  • Корректное использование семантических тегов. Их любят поисковики, так как с помощью них проще ориентироваться в элементах страницы и отображать нужный контент.
  • Использование микроразметки. При ее наличии больше шансов, что ваш сайт будет выше в поиске.
  • Соответствие кода стандартам производительности Google Web Vitals. Поисковые машины не любят медленно работающие сайты и будут занижать их позиции в результатах выдачи.

Универсальный доступ

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

Как проверить правильность (валидность) готового HTML-кода

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

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

Кросс-браузерность

Браузеры отличаются друг от друга не только с точки зрения функциональности, но и «восприятия» страниц.

Например, если вы используете свойство margin в CSS-файле для своего сайта с минусовым значением, то Google Chrome и Firefox воспримут это свойство нормально и корректно отобразят элементы на странице. А вот Safari воспринимает такие значения иначе, и элемент с margin может не только отображаться неправильно, но и вообще выйти за пределы видимой области и сделать часть интерфейса недосягаемым.

Также есть Internet Explorer, который тоже до сих приходится поддерживать, а он огромное количество свойств воспринимает некорректно.

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

Чистота кода

Новички в программировании и верстке часто некорректно используют HTML-теги или задействуют слишком много мета-тегов, часть из которых вообще не нужна.

Как проверить правильность (валидность) готового HTML-кода

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

Как проверяют код?

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

Валидация HTML

Первый этап валидации – проверка HTML-кода на соответствие стандартам, предусмотренным консорциумом W3C, отвечающим за правила размещения HTML-страниц в сети.

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

Читайте также:  Ошибка обновления конфигурации базы данных для одного ссылочного кода существует

Проверить валидацию можно с помощью одного из специальных сервисов. Самый популярный – Markup Validation Service. Чтобы им воспользоваться:

  • Открываем страницу сервиса.
  • Вводим адрес страницы, которую нужно проверить.
  • Нажимаем на кнопку Check.

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

На том же сайте есть два других способа добавить страницу для проверки. Можно загрузить свой HTML-файл напрямую либо открыть редактор и ввести туда свой HTML-код.

Валидация CSS

Второй шаг на пути к успешной валидации страницы – проверка CSS-разметки. Правильное использование стилей, как и проверка HTML, гарантирует корректное отображение всех элементов сайта.

Валидатор CSS выполняет ту же функцию, что и валидатор HTML, проверяет CSS-код на соответствие стандартам W3C.

Для валидации используется сервис CSS Validation. Чтобы им воспользоваться:

  • Открываем страницу, указанную выше.
  • Вводим адрес сайта, который надо проверить.
  • Нажимаем на кнопку Check.

Ждем пару секунд и смотрим на результат. Если будут ошибки, то анализируем, исправляем и повторяем процедуру.

Как проверить правильность (валидность) готового HTML-кода

Как и в случае с Markup Validation Service, можно не только указать адрес, но и загрузить CSS-файл напрямую (или написать код вручную).

Валидация ссылок

Проверка сайта на наличие битых ссылок необходима сразу по двум причинам:

Чтобы проверить сайт на наличие битых ссылок, можно воспользоваться сервисом Google Analytics или программой в духе Xenu или Netpeak Spider. После этого нужно проанализировать найденные ссылки и либо поправить их, либо настроить переадресацию.

Валидация адаптивности

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

А потом нужно проводить тесты – как ручные, так и через специальные сервисы. Вручную это можно сделать, открыв браузер Google Chrome и запустив в нем режим эмуляции мобильного устройства. Сразу будет видно, как сайт выглядит на маленьком экране.

Частично автоматизировать процесс помогают приложения в духе Google Mobile Friendly Test. Если «прогнать» через него свой веб-ресурс, то сервис проанализирует содержимое и скажет, удобно ли им пользоваться с телефонов.

Валидация синтаксиса кода

Существуют отдельные сервисы, помогающие оценить корректность написанного кода. Здесь со стандартами сложнее, потому что основным мерилом качества кода является его работоспособность. Большая часть редакторов и IDE не станут ругаться на программу, если она функционирует.

Для валидации используются дополнительные плагины и сервисы со своим набором правил для оформления кода, например линтеры (мы еще поговорим о них).

Как проверить правильность (валидность) готового HTML-кода

Они сообщают о наличии неиспользуемых переменных, о не указанных типах, об отсутствии необходимых атрибутов или некорректно используемых циклах.

Другие виды валидации

Некоторые компании создают свои требования к коду и иногда прилагают собственные инструменты для проверки качества написанных приложений.

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

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

Еще один тип валидации, который стоило бы отметить – Google Lighthouse. Это комплекс мер по оценке качества созданного сайта или приложения. Lighthouse встроен в браузер Google Chrome и в автоматическом режиме показывает, что можно исправить, чтобы увеличить производительность и сделать работу ресурса эффективнее.

Вспомогательные инструменты

Помимо описанных выше сервисов, в ходе работы над кодом придется использовать дополнительные валидаторы («исправляторы») кода.

Большая их часть устанавливается напрямую в IDE или редактор кода. Некоторые автоматически включаются при попытке скомпилировать или запустить код. Их можно объединять со сборщиками по типу Webpack и другими популярными инструментами разработчиков.

Linter

Linter (lint, линтер) – это утилита для анализа кода. Она помечает ошибки, специфичные для конкретного языка, находит баги, указывает на ошибки в стиле оформления кода, подозрительные конструкции и другие недочеты в работе программиста.

Прелесть Lint в том, что он срабатывает еще на этапе компиляции, а при желании можно добавить его поддержку в IDE, и тогда все нетипичные для вашего редактора кода ошибки отобразятся в самом коде, что заметно упростит рефакторинг и устранение ошибок.

Вместе с линтером необходимо загружать пакет проверки. Например, веб-разработчикам может понравиться свод правил оформления JavaScript-кода от компании AirBnb.

Prettier

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

Prettier – это небольшое дополнение, анализирующее оформление кода и автоматически устраняющее мелкие недочеты в нем. Prettier доставит за вас точки с запятой, правильно выставит отступы и пробелы, удалит ненужные знаки, сделает правильные переносы срок и т.п. Prettier часто используют в тандеме с линтерами.

Вместо заключения

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

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

Будет рассмотрен пример с Сhrome, но отладить код можно и в любом другом браузере и даже в IDE.

Как проверить правильность (валидность) готового HTML-кода

  • Иерархия файлов, подключенных к странице (js, css и другие). Здесь можно выбрать любой скрипт для отладки.
  • Сам код.
  • Дополнительные функции для контроля.

В секции №2 в левой части на любой строке можно кликнуть ЛКМ, тем самым поставив точку останова (breakpoint – брейкпойнт). Это то место, где отладчик автоматически остановит выполнение JavaScript, как только до него дойдёт. Количество breakpoint’ов не ограничено. Можно ставить везде и много. На изображении выше отмечен зеленым цветом.

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

А во вкладке Breakpoints можно:

  • На время выключить брейкпойнт(ы)
  • Удалить брейкпойнт(ы), если не нужен
  • Быстро перейти на место кода, где стоит брейкпойнт кликнув на текст.

Запускаем отладку

В данном случае, т.к. функция выполняется сразу при загрузке страницы, то для активации отладчика достаточно её перезагрузить. В ином случае, для активации требуется исполнить действие, при котором произойдет исполнение нужного участка кода (клик на кнопку, заполнение инпута данными, движение мыши и другие действия)

В данном случае после перезагрузки страницы выполнение “заморозится” на 4 строке:

Как проверить правильность (валидность) готового HTML-кода

  • Вкладка Call Stack — стэк вызовов, все вложенные вызовы, которые привели к текущему месту кода. На данный момент отладчик стоит в функции getSum, 4 строка.
  • Вкладка Scope Variables — переменные. На текущий момент строки ниже номера 4 ещё не выполнилась, поэтому sum и output равны undefined.

В Local показываются переменные функции: объявленные через var и параметры.
В Global – глобальные переменные и функции.

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

(F10) — делает один шаг не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.

(F11) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.

(Shift+F11) — выполняет команды до завершения текущей функции. Удобна, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.

— отключить/включить все точки останова

— включить/отключить автоматическую остановку при ошибке. Если включена, то при ошибке в коде он скрипт остановится автоматически и можно посмотреть в отладчике текущие значения переменных, проанализировать и принять меры по устранению.

Итак, в текущем коде видно значение входного параметра:

Если теперь нажмем F11, то попадем внутрь функции-замыкания nums.forEach

Как проверить правильность (валидность) готового HTML-кода

Нажимая теперь F10 пока не окончится цикл, можно будет наблюдать, как на каждой итерации цикла постоянно изменяются значения num и sum. Тем самым мы можем проследить шаг за шагом весь процесс изменения любых переменных и значений на любом этапе, который интересует.

Дальнейшие нажатия F10 переместит линию кода на строки 11, 12 и, наконец, 15.

Больше информации о возможностях инструментов например Chrome — можно прочитать здесь

Дополнительно 2

Принудительную отладку можно инициировать событием, происходящим на странице/элементах. Это полезно, если не знаешь где обрабатывающая функция находится.

Пример для Chrome:

Нажимаем F12, заходим на вкладку Sources и в функциях контроля видим вкладку Event Listener Breakpoints, в которой можно назначить в качестве триггера любые события, при которых исполнение скрипта будет остановлено.
На изображении ниже выбран пункт на событие onchange элементов.

Как проверить правильность (валидность) готового HTML-кода

Если функция инлайновая, например

то можно зайти в Инспектор, найти тот самый элемент, в котором прописано событие и обнаружить рядом значок em:

Как проверить правильность (валидность) готового HTML-кода

Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:

Как проверить правильность (валидность) готового HTML-кода

где можно увидеть события, навешанные на элемент, скрипт, строку, возможность нажать на паузу и т.д.

В других случаях, а также если кнопка паузы не обнаружена, то на вкладке Debugger(отладчик) надо найти стрелку, при наведении на которую будет написано “Events”. Там должно быть событие выделенного элемента.

А вот таких полезных вкладок как у Chrome к сожалению у Firefox там нет.

Как проверить правильность (валидность) готового HTML-кода

Линтеры

На раннем этапе, ещё до запуска приложения, очень помогают статические анализаторы кода, вот несколько из самых популярных:

  • JSLint от дедушки Крокфорда, создателя JSON. Попахивает валерьянкой, но вполне работает, не считая того, что настроек с гулькин нос.
  • JSHint отличный линтер с гибкими настройками, 6к звед на гитхабе.
  • ESLint, и слитый с ним JSCS пожалуй самая крутая штука, если нужно написать свои плагины для каких то специфических проверок.

Наверняка в вашу среду разработки можно их интегрировать так, чтобы они работали в фоне, и помечали найденные ошибки прямо в коде. Например для WebStorm достаточно просто поставить галку в настройках. Кстати, WebStorm имеет и свой собственный анализатор.

Немного про типизацию

JavaScript не имеет (пока?) возможности указывать типы для аргументов функций, но можно воспользоваться, например, JSDoc. Пишите что-то вроде этого (обратите внимание на формат комментария):

И теперь если где-то fromDiameter вызывается к примеру со строкой, то jsdoc в несложных случаях сможет это определить до запуска программы. В добавок к этому jsdoc дает ещё много разных плюшек, не считая основного предназначения – генерировать документацию по вашим комментариям.

Более брутальный вариант для настоящих бородатых гуру (например из команды AngularJS) взять и переписать все на TypeScript, который как JavaScript, но позволяет использовать (по желанию!) типы для переменных. И тогда, например, вы сразу увидите (по ошибке компилятора), что вызываете функцию, ожидающую строку, передав ей число.

Отладка

Здесь старый добрый Console.log(‘Ohh, shitt!’) никто не отменял. Но конечно же не стоит отказывать себе в удовольствии использовать продвинутые отладчики. Тот же WebStorm имеет вполне современные возможности по отладке, но и все мажорные браузеры имеют ту или иную “панель разработки”, с отладчиком, профилировщиком и другими вкусностями. Ставите точки останова (и не простые, а с определенным хитрым условием, например чтобы остановилось только на второй раз, при спадающей луне), смотрите стек вызовов, значения переменных (меняете их налету по желанию) и т.п. Для быстрого старта в хроме – жмите F12, дальше разберетесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *