Как проверить сайт на баги

Тестируем веб-сайт: 20 бесплатных сервисов

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

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

Валидность

W3C Markup Validation. W3C Markup Validator – это бесплатный сервис для проверки соответствия исходного кода сайта нормам и правилам Консорциума Всемирной паутины (W3C). Соблюдение этих правил – гарантия корректного отображения страниц сайта в разных браузерах, хороших показателей скорости загрузки и других параметров.

W3C Markup Validation

Если вы хотите проверить сайт по конкретным элементам, этот же ресурс предлагает и другие чекеры:

W3C Link Checker. W3C Link Checker ищет ошибки в линках, якорях и ссылочных объектах на веб-странице, CSS (каскадных таблицах стилей) или рекурсивно по всему сайту.

W3C Feed Validation Service. А этот сервис проверяет синтаксис Atom- и RSS-каналов.

Битые ссылки

Xenu’s Link Sleuth. Кроме того, что Xenu’s Link Sleuth проверяет сайты на битые линки, этот сервис также поможет составить карту сайта, найти страницы с большим временем отдачи, неуникальные названия разделов, страницы с большим уровнем вложенности и другое.

Xenu’s Link Sleuth

Адаптивность

W3C mobileOK Checker. Этот сервис предлагает различные тесты веб-страницы на адаптивность к мобильным устройствам.

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

Скорость

YSlow. YSlow – это сервис, который не только может проверить скорость загрузки вашей веб-страницы, но и подсказать, что ей мешает быстро загружаться. Расширение тестирует сайт на соответствие правилам производительности от команды Yahoo.

Pingdom Website Speed Test. Pingdom Website Speed Test анализирует скорость загрузки вашего сайта и показывает, как ее увеличить. Этот сервис показывает размеры файлов, время загрузок и другие детали о каждом элементе веб-страницы, определяя узкие места производительности.

Web Page Analyzer. Это еще один сервис для тестирования скорости с целью увеличить производительность сайта. Введите URL – и получите расчет размера страницы, композиции и времени загрузки. Скрипт включает в свои рекомендации новейшие лучшие показатели производительности, руководства по размерах страниц, актуальные тренды и тенденции методов оптимизации сайта из известной книги “Website Optimization”.

Безопасность

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

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

Browsera. Browsera обеспечивает автоматизацию тестирования кроссбраузерности вашего сайта. Сервис определяет различия в отображении страниц разными браузерами. Кроме того, этот инструмент предоставляет отчетность об ошибках в скриптах в каждом браузере. Это премиум-сервис, однако его разработчики предлагают и бесплатную версию, лимитированную 25 сайтами и 1 пользователем.

Browser Shots. Browsershots делает скриншоты страниц вашего сайта в разных операционных системах и браузерах. Это отличный онлайн-ресурс для проверки совместимости с разными браузерами в одном месте.

Юзабилити

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

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

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

Grammarly. Команда Grammarly в Киеве и Сан-Франциско разрабатывает инструменты, которые помогают писать грамотные тексты на английском языке. Это один из лучших в мире сервисов для совершенствования английской грамматики. Сервис находит в тексте более 250 типов грамматических ошибок, исправляет контекстуальные и лексические ошибки и проверяет тексты на плагиат.

LanguageTool. LanguageTool – еще один сервис для проверки грамматики, пунктуации, орфографии и стиля. Но кроме как для текстов на английском языке, этот инструмент содержит правила проверки для еще более 20 языков, включая украинский и русский.

Восприятие

AccessColor. AccessColor тестирует контрастность и яркость цвета в сочетании «фигура-фон» всех элементов объектной модели документа. Это поможет вам убедиться, что контрастность достаточно высока для людей с нарушениями зрения. AccessColor сам найдет подходящие цветовые комбинации в ваших HTML- и CSS-документах, поэтому вам не потребуется подбирать их вручную.

5secondtest. Этот инструмент поможет проверить первое впечатление о вашем сайте. Сервис покажет страницу вашего сайта потенциальным клиентам в течение пяти секунд, а затем задаст им вопрос, который вас интересует. Например, «Какие эмоции вызывает страница?» или «Понятно ли, чем занимается компания?».

Поисковая оптимизация

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

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

Как проверить сайт на ошибки онлайн?

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

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

Инструменты для валидации веб-сайта

W3C markup validation service (он же validator w3 org)

Этот сервис поможет проверить валидность разметки веб-документов в форматах HTML , XHTML , SMIL , MathML и т. д. И позволит исключить необходимость использования дополнительных инструментов.

Какие проверки осуществляются:

• Анализ синтаксиса и стилей;
• Проверка сайта на ошибки онлайн.

CSS validator

Позволяет проверить код CSS и (X)HTML-документы с таблицами. Если нужно валидировать CSS , встроенный в (X)HTML-код , то сначала нужно будет проверить разметку.

Checklink

Проверяет ссылки и анкоры на отдельных веб-страницах или на целом сайте. Этот инструмент позволяет выявить проблемы, связанные со ссылками, анкорами и объектами в веб-странице, CSS-таблицами и т. д. Сначала убедитесь, что в проверяемых документах используется валидная (X)HTML-разметка и CSS-код .

Feed

Бесплатный сервис для W3C-валидации ленты рассылок ( Feed ), который позволяет проверить синтаксис Atom или RSS . Вы можете проверить сайт на ошибки по URL или с помощью прямого ввода кода.

Mobile checker

Инструмент позволяет проводить различные тесты веб-страниц для определения того, насколько они адаптированы под мобильные устройства. Тесты описаны в спецификации mobileOK Basic Tests 1.0 . Веб-страница считается адаптированной, если проходит сразу все тесты.

HTML Validator

HTML Validator от WDG по функционалу напоминает сервис валидации от W3C . Основные отличия были исключены с выходом обновленной версии W3C-валидатора .

Watson’s site validation check

Валидатор HTML онлайн Dr. Watson – бесплатный сервис, который позволяет проверить сайт на ошибки онлайн. Укажите URL-адрес страницы, которую необходимо проверить, и Watson сразу же сделает ее копию. Он также умеет исследовать множество других аспектов сайта: валидность ссылок, скорость скачивания, оптимизация под поисковые системы и т. д. Многие функции совмещены в одну. Если требуется решение « все в одном », то этот инструмент вам точно пригодится.

Какие проводятся проверки:

1. Скорость загрузки страницы;
2. Анализ синтаксиса и стилей;
3. Подсчет количества слов;
4. Проверка орфографии;
5. Проверка ссылок;
6. Уровень оптимизации под поисковые системы;
7. Проверка входящих ссылок;
8. Проверка исходного кода.

XML well checker and validator

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

Robots checker

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

URL checker

InternetSupervision™ — это сервис, который отслеживает доступность HTML , FTP , почтовых серверов ( SMTP и POP3 ), наблюдает за производительностью сайта и транзакциями в интернет-магазине ( включая активность некоторых форм на странице ).

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

Webaccessibility checker

Этот инструмент умеет проверять отдельные HTML-страницы на соответствие стандартам универсального доступа.

Color contrast

Этот инструмент позволяет проверить контрастность и яркость цветов на переднем и заднем фоне всех DOM-элементов . Правильное сочетание цветов гарантирует, что текст будет виден даже людям с плохим зрением. AccessColor также помогает найти оптимальное сочетание цветов для HTML и CSS-документов .

Web accessibily evaluation tool-WAVE

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

Accessibility with style

HERA – инструмент для проверки доступности веб-страниц и их соответствия спецификации Web Content Accessibility Guidelines . HERA выполняет необходимый набор тестов на каждой странице, и автоматически определяет проблемные места.

Adobe PDF conversion

Этот сервис позволяет конвертировать любые веб-страницы на английском языке в PDF-документы . « Прогоняя » контент через этот инструмент, вы столкнетесь с тем, что Adobe временами будет испытывать сложности с доступом к тому или иному фрагменту.

Оценка производительности сайта

Pingdom tools

Инструмент для проверки сайта на наличие ошибок. Full Page Test загружает сразу HTML-страницу , включая все объекты ( изображения, CSS , Javascript , RSS , Flash и фреймы ). Затем он имитирует процесс загрузки страницы в веб-браузере, и подсчитывает, сколько времени уходит на загрузку того или иного объекта.

Webpage analyzer

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

Проверка кросс-браузерности

Browser shots

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

IE net renderer

IE NetRenderer позволяет проверить, как отображается сайт в Internet Explorer 7, 6 или 5.5 .

Viewlike

Этот инструмент позволяет проверить, как выглядит сайт при различных разрешениях. Инструмент работает на основе Ajax и PHP , а это значит, что вам не придется ничего скачивать. Введите нужный URL-адрес и получите результат.

А какими инструментами для тестирования сайтов пользуетесь вы? Пожалуйста, поделитесь в комментариях!

Как тестировать сайт

Тестирование сайта как возможность сделать его на порядок лучше

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

• Его тщательное тестирование на предмет наличия каких-либо багов, выполняемое в соответствии с четким всеобъемлющим планом.
• Составление подробного, структурированного отчета обо всех обнаруженных проблемах.
• Эффективное устранение найденных недостатков и улучшение состояния сайта.

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

Тестирование производительности

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

• Определение максимально возможной нагрузки на интернет-ресурс. У разных сайтов она может быть разной: например, в крупном интернет-магазине могут одновременно совершать покупки десятки, сотни и даже тысячи пользователей. На популярном сайте с фильмами и сериалами могут одновременно просматривать тысячи видеороликов. В то же время, на небольшой корпоративный сайт компании, работающей в регионе, вряд ли одновременно зайдет больше ста человек. В любом случае, производительность сайта должна быть ровно такой, чтобы он продолжал исправно работать при максимальной нагрузке (с небольшим запасом), но не более того. Оплата лишней мощности ресурсов также по-своему нерациональна.
• Проверка реальных возможностей сайта посредством специализированных программ и сервисов.
• Анализ результатов тестирования, составление отчета и выводов о том, что необходимо изменить для улучшения производительности ресурса.

Тестирование функциональности

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

• Правильность выполнения всех основных и дополнительных функций. Например, если речь идет об интернет-магазине, то такими функциями будет поиск необходимого товара, помещение в корзину, применение скидок, сравнение товаров, оформление заказа, обращение за помощью к онлайн-консультанту, и так далее.
• Корректность работы функций регистрации, авторизации, изменения личного профиля и т.п. Многие современные сайты предполагают создание учетных записей как для администраторов, так и для пользователей, поэтому нужно проверить, исправно ли реализуются все возможные связанные с ними операции.
• Правильность работы всех навигационных элементов сайта. Речь идет о том, чтобы ссылки, ведущие на различные страницы вашего интернет-ресурса, вели именно на те страницы, на которые необходимо, и размещались в предназначенных для этого местах.
• Наличие и исправность функционирования системы резервного копирования. Такая система (возможно, даже «системы» во множественном числе) должна работать на вашем сайте в обязательном порядке. Какой бы качественный и дорогой хостинг или сервер вы ни покупали, от технических сбоев не застрахован ни один веб-ресурс. И на случай такого сбоя все данные вашего сайта должны быть надежно сохранены благодаря систематическому backup.

Тестирование контента и качества оптимизации

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

Тестирование User Interface

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

• Соответствие актуальным стандартам графических интерфейсов, привлекательный внешний вид и профессиональное выполнение дизайна всех элементов сайта.
• Кроссбраузерность — способность веб-портала оставаться одинаково эстетичным и аккуратным вне зависимости от того, какой браузер будет задействован для его открытия. То есть все блоки и элементы должны оставаться на своих местах, сохранять правильные пропорции и конфигурацию для любого пользователя.
• Адаптивность — свойство, похожее на кроссбраузерность, но уже подразумевающее сохранение привлекательности и правильности отображения сайта на различных устройствах. Это могут быть стационарные компьютеры, ноутбуки, смартфоны, планшеты — гаджеты с широко варьирующимися размерами и конфигурациями экранов.
• Правильность и грамотность локализации, то есть адаптации сайта под определенную аудиторию. Этот аспект важен для мультивалютных и мультиязычных интернет-порталов. Особенно тщательно стоит проверить, аккуратно ли смотрятся названия блоков, пунктов меню, разделов, переведенные на разные языки (не заезжают ли друг на друга и т.п.).

Тестирование юзабилити

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

• Удобство и скорость выполнения основных функций. Например, если это информационный портал, то тексты на сайте должно быть легко и комфортно читать, если интернет-магазин — то все товары должны быть удобно просматриваемыми, снабженными вразумительными описаниями, и так далее.
• Удобство поиска и навигации. Пользователь не должен ломать голову над тем, как ему найти нужную страницу или вернуться на предыдущую: этот механизм необходимо сделать как можно более простым и интуитивно понятным. Не помешает учесть и «золотое» правило навигации, гласящее, что до любой страницы должно быть возможно добраться не более, чем за 3 клика от главной.
• Общий комфорт от использования сайта. Веб-ресурс должен производить приятное впечатление и вызывать желание остаться на нем подольше даже при одном лишь взгляде на главную или любую другую страницу.
• Наличие/отсутствие лишних элементов, функций и контента. Порой современные веб-разработчики в стремлении использовать все возможные «фишки» делают сайты слишком громоздкими, пестрящими многочисленными функциональными и декоративными элементами. Это снижает удобство от их использования, равно как и скорость загрузки страниц. Поэтому важно сделать тестирование сайта и на предмет того, какие его возможности можно сократить/объединить.

Тестирование безопасности

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

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

Сервис/ПО для проверки сайта со всевозможных устройств, бразуеров и тд

Интересует сервис/ПО платное/бесплатное, которое бы помогло «протестировать» сайт. На баги в отображении, юзабилити итд. Хочу просто вбить ссылку и чтоб сервис сам прогнал сайт по всевозможным комбинациям устройство+расширение экрана+версия браузера и тд. И потом выдал результат и указал комбинацию, где он считает есть проблема.

Отслеживать
задан 1 авг 2018 в 13:43
Nikola Teslenko Nikola Teslenko
59 4 4 бронзовых знака

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

1 авг 2018 в 14:17

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

– user218976
1 авг 2018 в 14:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Тестирование — это сложная задача. Что-то можно автоматизировать, где-то придется это делать вручную. Это слишком объемная область для изучения.

Полностью автоматизировать наверное нет, но вот некоторые примеры:

• https://www.browserling.com/ — интерактивное тестирование
• https://www.browserstack.com/ — мобильные и браузеры (эмуляция реальных стеков)
• https://developers.google.com/web/tools/lighthouse/ — встроеный в chrome аудит
• https://validator.w3.org/ валидатор разметки

Для тестирования на основе оригинала всё же придется писать собственные тесты, а для перехвата ошибок можно использовать сервисы подобные sentry или rollbar.

Для каждого типы тестирования есть свои инструменты и подходы. Чтобы «вбить и всё сказали» — такого пока НЕТ.

Согласен с комментариями к вопросу, о субъективности многих оценок.