Как использовать консоль браузера для выявления ошибок на сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Elements

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

Console

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

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

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

Sources

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

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

Network

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

Performance

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

Memory

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

Application

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

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

Security

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

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

Lighthouse

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

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

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

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

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

Заключение

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

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

Что означают коды ответа сервера о состоянии страниц сайта

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

Некоторые типичные коды статуса HTTP:

• 200 – сервер успешно обработал страницу;
• 404 – запрашиваемая страница не существует;
• 503 – информация временно недоступно

Ниже приводится полный список кодов состояния HTTP. Дополнительную информацию можно также получить на странице посвященной кодам протокола HTTP сайта W3C.

Коды http – 1xx (временный)

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

Ожидание продолжения запроса. Сервер возвращает этот код, чтобы указать, что получил первую часть запроса и ждет его продолжение.

101 (Переключение протоколов)

От сервера запрошено переключение протоколов и сервер сообщает, что он выполнит запрос.

Коды http – 2xx (Успешно)

Коды состояния HTTP, свидетельствующие о том, что сервер успешно обработал запрос.

Сервер успешно обработал запрос. Как правило, это означает, что сервер предоставил необходимую страницу. Если это состояние относится к файлу robots. txt, это означает, что робот нашел его успешно.

Запрос прошел удачно и сервер создал новый ресурс.

Сервер принял запрос, но еще его не обработал.

203 (Ненадежная информация)

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

204 (Нет содержимого)

Сервер успешно обработал запрос, но не возвращает какого-либо содержания.

205 (Восстанавливать значение)

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

206 (Частичное содержание)

Сервер успешно обработал частичный GET запрос.

Коды http – 3xx (Перенаправлено)

В целях исполнения требования необходимы дополнительные действия. Эти коды статуса HTTP часто используются для перенаправления.

300 (Много вариантов)

Сервер может выполнять многие действия в ответ на эти запросы. Сервер может выбрать действие, в зависимости от запроса (user agent) или заданный список позволяет ему выбрать действия.

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

302 (Временно перемещено)

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

303 (Проверить другое место)

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

Запрашиваемая страница не была изменена с момента последнего запроса. Отправив этот ответ, сервер не возвращает тело страницы.

Необходимо настроить сервер на возвращение этого ответа (HTTP If-Modified-Since), если страница не изменилась с того времени, когда её последний раз запрашивал тот же агент. Это снижает нагрузку на пропускную способность и сервер.

305 (Использовать прокси-сервер)

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

307 (Временное перенаправление)

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

Коды http – 4xx (Ошибка запроса)

Следующие коды состояния указывают на вероятную ошибку в запросе, которая не позволяет серверу обработать этот запрос.

400 (Неверный запрос)

Сервер не распознает синтаксис запроса.

401 (Не авторизован)

Запрос требует идентификации пользователя. Сервер может возвращать этот ответ, если доступ к странице требует авторизации пользователя.

403 (Доступ запрещен)

Сервер отклоняет запрос. Если поисковый робот получает этот код состояния HTTP при попытке индексации правильных страниц сайта (см. Ошибки индексирования на вкладке Сканирование в Инструментах Google для веб-мастеров), вероятно, сервер или хост блокирует доступ роботу googlebot возможность.

Сервер не может найти нужную страницу. Сервер часто возвращает этот код, например, в том случае, когда запрос относится к странице, которой не существует на сервере.

Если на сайте нет файла robots. txt и это состояние отображается на странице запрещенных URL в Инструментах Google для веб-мастеров, то это правильный статус. Однако, если на сайте есть файл robots. txt и, несмотря на это, отображается этот статус, файл robots. txt может иметь неверное имя или находиться в неправильном месте. (Файл должен находиться в корневом каталоге домена и носить имя robots. txt).

405 (Запрещенный метод)

Метод, указанный в запросе, не допускается.

406 (Не допускается)

Запрошенную страницу невозможно вернуть с требуемой характеристикой содержания.

407 (Требуется аутентификация на прокси-сервере)

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

408 (Тайм-аут запроса)

Тайм-аут ожидания ответа от сервера.

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

Сервер возвращает этот ответ, когда запрошенный ресурс удален без возможности восстановления. Это ответ похож на код 404 (Не найдено), но иногда используется вместо кода 404 для ресурсов, которые ранее существовали, но были удалены. Если ресурс был окончательно перенесен, следует использовать код 301, чтобы указать новое местоположение ресурса.

411 (Обязательно указать длину)

Сервер не принимает запросы без правильного значения поля Content-Length (Содержание-Длина) в заголовке.

412 (Не соблюдены условия)

Сервер не соответствует одному из условий, размещенных в запросе.

413 (Слишком большой запрос)

Сервер не может обработать запрос, потому что он слишком большой.

414 (Запрашиваемый URI слишком большой)

Запрашиваемый URI (как правило, URL-адрес) слишком большой и сервер не может его обработать.

415 (Неподдерживаемый тип)

Запрос имеет не поддерживаемый формат.

416 (Не найден нужный диапазон)

Сервер возвращает этот код состояния, когда запрос касается диапазона, отсутствующего на сайте.

417 (Отказ ожидания)

Сервер не может выполнить требования, содержащиеся в поле Expect (Ждите), заголовка запроса.

Коды http – 5xx (Ошибка сервера)

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

500 (Внутренняя ошибка сервера)

Сервер столкнулся с ошибкой и не может обработать запрос.

501 (Функция не реализована)

Сервер не имеет функции, обеспечивающей исполнение запроса.

502 (Недопустимый шлюз)

Сервер, функционирующий в качестве шлюза или прокси, получил недопустимый ответ из расположенного за ним сервера.

503 (Служба недоступна)

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

Сервер, функционирующий в качестве шлюза или прокси-сервера, ожидает ответа от расположенного за ним сервера.