Эта статья содержит обзор бесплатных онлайн инструментов веб-разработки для написания и проверки htaccess, HTML, CSS.

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

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

Как создать файл .htaccess онлайн

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

Например, при вводе страницы для ошибки 404 в содержимое .htaccess добавляется строка ErrorDocument 404 /blog/error_404:

htaccesseditor.com написание htaccess
Скриншот htaccesseditor.com с добавление страницы на ошибку 404

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

Как составить файл .htaccess из готовых решений

Всего на одной странице Stupid .htaccess Tricks уместилось более 50 полезных советов по написанию файла .htaccess, начиная с базовых вопросов — формат, комментарии, синтаксис регулярных выражений, коды переадресации (редиректа).

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

Stupid .htaccess Tricks
Скриншот страницы Stupid .htaccess Tricks

Как проверить файл .htaccess

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

Как это сделать, описано далее.

Как проверить файл .htaccess на ошибки

Онлайн инструмент .htaccess check проверяет файл .htaccess на наличие ошибок в написании ключевых слов, в регулярных выражениях или просто опечаток.

В окно можно загрузить как целый файл размером до 5 000 строк, так и отдельные фрагменты файла .htaccess.

.htaccess check screenshot
Скриншот сайта .htaccess check

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

.htaccess check screenhot regular expression error
Скриншот сайта .htaccess check с найденной ошибкой в регулярном выражении

Как протестировать работу .htaccess в инструменте

Онлайн тестировщик https://htaccess.madewithlove.com/ разработан специально для проверки работы правил переадресации rewrite rules в файле htaccess.

В форме можно задать URL для проверки и код RewriteEngine для htaccess:

После выполнения теста на экране будет показан итоговый URL –тот, на который произойдёт редирект.

В этом примере страница с доменом www и протоком http успешно переадресована на главное зеркало без www по протоколу https. Также инструмент отмечает, какие условия или правила были выполнены.

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

Существуют и другие инструменты для тестирования кода htaccess, например, https://technicalseo.com/tools/htaccess/, но он использует API от упомянутого выше madewithlove, поэтому даёт те же результаты.

Как проверить работу .htaccess на сайте

Вы можете проверить работу файла .htaccess на рабочем сервере с помощью сайта bertal.ru, позволяющего проанализировать HTTP заголовки:

  • Увидеть код ответа сервера для данного URL
  • В случае переадресации увидеть код ответа сервера для целевой страницы
  • Проверить значения, важные для кэширования: Cache-Control и Expires
  • Проверить правильное определение типа и кодовой страницы содержимого: Content-Type: text/html; charset=UTF-8
bertal.ru screenshot
Скриншот сайта bertal.ru с проверкой заголовка HTTP

Сервис bertal.ru особенно удобен при проверке страниц с перенаправлением (редиректом).

Возьму для примера URL http://www.nhutils.ru, который перенаправляется на https://nhutils.ru/blog/ в несколько шагов:

  • Страница http://www.nhutils.ru перенаправляется на http://nhutils.ru – происходит переход с поддомена www на основное зеркало без www
  • Страница http://nhutils.ru перенаправляется на https://nhutils.ru – переключение на протокол https
  • Страница https://nhutils.ru перенаправляется на https://nhutils.ru/blog/ – переход на начальную страницу блога

Сайт bertal.ru показывает сразу все шаги перенаправления 301 и код 200 для целевой страницы, это позволяет в одно действие отследить всю цепочку и проверить, куда в конечном счёте перенаправляется пользователь, то есть правильно ли работает перенаправление в целом:

Скриншот bertal.ru с множественным перенаправлением
Скриншот bertal.ru с множественным перенаправлением

Если для сравнения посмотреть, как эту же задачу решает инструмент Проверка ответа сервера в вебмастере Яндекса, то здесь мы увидим адрес перенаправления только для первого шага – переход с www на зеркало без www, ну а все дальнейшие переходы надо будет проверять вручную:

Скриншот Яндекс.Вебмастер с множественным перенаправлением
Скриншот Яндекс.Вебмастер с множественным перенаправлением

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

Как написать и проверить HTML/CSS код

Сайт w3schools.com содержит материалы не только по HTML и CSS, но и другим технологиям: JavaScript, SQL, PHP, Python, XML и т.д., поэтому не зря представляет себя как THE WORLD’S LARGEST WEB DEVELOPER SITE.

В части HTML и CSS сайт предоставляет веб-разработчику учебные пособия (tutorials) в виде статей с описаниями и примерами, справочники (References) по тегам, атрибутам и значениям.

Используя инструмент Try it Yourself, вы можете написать код HTML/CSS в редакторе с подсветкой синтаксиса и проверить, как он будет отображаться, прямо в этом же окне, нажав зеленую кнопку Run:

w3schools.com screenshot
Скриншот сайта w3schools.com с редактором HTML и просмотром результата

Как проаназировать HTML на ошибки

Бесплатный онлайн-инструмент W3C Markup Validation Service проверяет правильность разметки HTML, XHTML в веб-документах, позволяя найти ошибки в коде страниц.

Проверка HTML кода на ошибки в W3C Markup Validation Service

Указать документ для проверки можно:

    • для опубликованной веб-страницы по её URL (Validate by URI), как на снимке окна выше
    • для локального документа путем его выгрузки на сайт (Validate by File Upload)
    • для фрагмента кода вставкой в форму (Validate by Direct Input)

Результат проверки на ошибки представлен в виде списка предупреждений (Warnings) и ошибок (Errors).

Результат проверки HTML кода на ошибки в W3C Markup Validation Service

Также список можно сгруппировать по типу предупреждения/ошибки.

Как проверить robots.txt

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

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

Анализ robots.txt https://webmaster.yandex.ru/tools/robotstxt/ делает сразу несколько функций:

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

То есть предлагает не просто проверить правильность синтаксиса, а и отладить работу файла robots.txt.

Google Search Console

Инструмент от Google https://www.google.com/webmasters/tools/robots-testing-tool предлагает проверку синтаксиса для актуального robots.txt на сайте. Ошибки подсвечиваются. Позволяет поправить файл вручную и проверить URL (не списком, по одному).

Пример того, как выглядит проверка robots.txt с ошибкой (Google не признает директиву Clean-Param от Яндекса):

Как проверить наличие и содержание title и description

Онлайн инструмент Bulk Meta Title & Description Checker проверяет наличие и значения мета-тегов Title и Description, а также тега H1, причем для нескольких страниц сразу (максимум до 50).

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

См. также

Программная среда для локальной веб-разработки Open Server Panel включает серверное программное обеспечение – веб-серверы, компоненты PHP, несколько СУБД, а также утилиту по администрированию и настройке всех компонентов.

Кроме этого, в комплект входит базовое программное обеспечение для разработки – такие инструменты, как редактор исходного кода PHP/HTML/ CSS, клиент FTP/SFTP доступа к сайтам и других.

Заключение

Хорошие инструменты помогают сделать сайты лучше.

Какие инструменты помогли вам? Сетевые или локальные?

Онлайн инструменты веб-разработчика

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

Ваш адрес email не будет опубликован.