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

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

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

  • создать файл .htaccess онлайн
  • составить файл .htaccess из готовых решений
  • проверить работу .htaccess на сайте
  • написать и проверить HTML/CSS код

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

Как проверить работу .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

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

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

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

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