Что такое консоль ошибок как исправить

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка 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): Script error. Обозначает ошибку скрипта.
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. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

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

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

Причины ошибок JavaScript

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

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

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

Консоль браузера и проверка ошибок JavaScript?

Если вы считаете, что проблема на вашем сайте вызвана ошибкой JavaScript, ваш браузер Chrome может легко это проверить. Вот как.

Шаг 1. Откройте консоль либо в виде отдельной панели, либо в виде ящика рядом с другой панелью.

У вас есть два варианта открытия панели консоли:

• Windows / Linux — Нажмите Ctrl + Shift + J.
• Mac — Нажмите Cmd + Opt + J.

У вас также есть два варианта открытия консоли в виде ящика рядом с другой панелью:

• Нажмите Esc при просмотре DevTools.
• Нажмите кнопку для настройки и управления DevTools, а затем нажмите Показать консоль.

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

Поиск распространенных ошибок JavaScript

Теперь, когда у вас есть открытая консоль, пришло время выяснить, какого черта мы смотрим, и посмотреть, есть ли какие-либо ошибки JavaScript.

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

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

Топ 10 самых распространенных ошибок JavaScript

Теперь давайте углубимся и обсудим некоторые наиболее распространенные ошибки JavaScript, с которыми вы можете столкнуться в Chrome, Safari и Internet Explorer.

1. Uncaught TypeError: Cannot read property. Невозможно прочитать свойство.

Эта ошибка возникает в Chrome при вызове метода или при чтении свойства для неопределенного объекта.

2. TypeError: ‘undefined’ is not an object (evaluating). ‘undefined’ не является объектом (оценка).

Эта ошибка возникает в Safari при вызове метода или при чтении свойства для неопределенного объекта.

3. TypeError: null is not an object (evaluating). null не является объектом (оценка).

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

4. (unknown): Script error. Ошибка скрипта.

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

5. TypeError: Object doesn’t support property. Объект не поддерживает свойство.

Это ошибка Internet Explorer, возникающая при вызове неопределенного метода.

6. TypeError: ‘undefined’ is not a function. «undefined» не является функцией.

Эта ошибка возникает в Chrome, когда вызывается неопределенная функция.

7. Uncaught RangeError: Maximum call stack. Максимальный стек вызовов.

Это еще одна ошибка Chrome, которая может быть вызвана рядом сценариев.

8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство ‘length’.

Эта ошибка Chrome срабатывает, когда свойство длины чтения неопределенной переменной.

9. Uncaught TypeError: Cannot set property. Невозможно установить свойство.

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

10. ReferenceError: event is not defined. Событие не определено.

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

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

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

Как решить проблему с javaScript

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

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

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

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

Как отключить консоль ошибок

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

Вам понадобится

• Компьютер, интернет-браузер Opera.

Инструкция

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

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

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

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

Если эти способы вам не помогли убрать консоль ошибок, можно программно отключить эту опцию. Нажмите верхнее меню «Инструменты», в открывшемся списке выберите пункт «Общие настройки». В новом окне перейдите к вкладке «Расширенные» и выберите пункт «Содержимое», нажмите кнопку «Настроить JavaScript». В окне настроек JavaScript снимите отметку с пункта «Открывать консоль при ошибке».

Видео по теме

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

Что это? Консоль разработчика – это инструмент, позволяющий взаимодействовать с тем или иным объектом напрямую. Такие бывают в играх, но чаще всего речь идет про интерфейс в браузере.

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

Понятие консоли разработчика

Консолью разработчика в браузере, будь это Google Chrome, Mozilla Firefox, Yandex или любой другой, называется сервис, с помощью которого пользователь может:

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

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

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

Скачать
файл

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

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

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

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

Google Chrome

Открываем страницу bug.html. На ней есть ошибка в скрипте, которую обычный пользователь увидеть не сможет. Найти ее поможет Google консоль разработчика. Вот как это работает:

Нажимаем клавишу F12 или комбинацию клавиш Cmd+Opt+J при использовании Mac.

Автоматически открывается соответствующая вкладка Console.

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

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

Справа имеется ссылка на исходный код bug.html:12 с указанием номера строки, в которой и есть место ошибки.

Ниже под информационным сообщением можно увидеть символ >, представленный в синем цвете. Он направляет пользователя к командной строке, в которой производится редактирование и запуск команд JavaScript нажатием кнопки Enter. Выполнение происходит мгновенно.

Для переноса строки необходимо использовать сочетание клавиш Shift+Enter, это позволяет применять более длинный код JavaScript.

Firefox, Edge и другие

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

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

Safari

Safari – это браузер, который не поддерживается Windows или Linux, а работает лишь на операционной системе Mac. Консоль разработчика в нем немного отличается от всех остальных. Для ее запуска, прежде всего, открываем «Меню разработки» (Developer menu).

Далее переходим в «Настройки» (Preferences) и находим раздел «Продвинутые» (Advanced). Опустившись в самый низ, мы увидим соответствующий флажок.

Используя сочетание клавиш Cmd+Opt+C, запускаем работу консоли. Особое внимание советуем уделить относительно недавно появившейся области меню, именуемой «Разработка» (Develop). Это раздел, содержащий в себе множество полезных настроек и команд.

Вкладки и панели консоли разработчика

Панель Elements

В ней представлено дерево элементов сайта, что позволяет ознакомиться с его внутренней структурой более тщательно. Здесь визуально отображены стандартные элементы страницы, такие как <head>, <body> и скрипты.

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

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

Раздел Elements наиболее полезен для работы маркетологов.

Панель Console

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

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

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

Панель Sources

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

Панель Network

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

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

Панель Performance

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

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

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

Панель Memory

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

Панель Application

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

Панель Security

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

Панель Lighthouse

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

Вкладка Styles

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

Вкладка Computed

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

Вкладка Layout

На ней содержатся элементы сайта типа CSS Grid в виде двухмерной сетки.

Вкладка Event Listeners

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

Вкладка DOM Breakpoints

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

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

Вкладка Properties

В ней видны все свойства определенного элемента.

Вкладка Accessibility

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

Отладка ошибок с помощью консоли разработчика

Консоль разработчика в браузере оповещает пользователя об имеющихся ошибках, показывая соответствующее уведомление во вкладке Console, выглядящее как текстовая строка красного цвета. Ниже перечислены наиболее часто возникающие ошибки в Google Chrome, Safari и Internet Explorer:

• Uncaught TypeError: Cannot read property. Применима для Chrome и может произойти при вызове метода или чтении свойства в рамках определенного объекта.
• TypeError: ‘undefined’ is not an object (evaluating). Ошибка, аналогичная той, что и в предыдущем пункте, только характерна она для браузера Safari.
• TypeError: null is not an object (evaluating). Отражает ошибки в Safari при вызове метода либо чтении свойства для нулевого объекта.
• (unknown): Script error. Ошибка скрипта.
• 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. Ошибка получения доступа к переменной, которая не является частью выбранной области.

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

Раздел:
Сайтостроение /
JavaScript /

Что такое JavaScript Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее…

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

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


document.write('Отладочное сообщение');


или выводить сообщения в диалоговых окнах, например:


alert('Отладочное сообщение');


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

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

console в JavaScript

Как я уже сказал, многие браузеры поддерживают режим разработчика и метод
console, с помощью которого при отладке сценариев на JavaScript можно выводить различную отладочную информацию в специальную консоль. Отображение и скрытие этой консоли, например, в Яндекс.Браузере выполняется комбинацией клавиш CTRL + SHIFT + J.

Простейший пример использования console:

<script>

console.log('Отладочное сообщение');

</script>

Выполнение этого сценария выведет в консоль соответствующее сообщение:

Сообщение об ошибке в console

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

Например, если в сценарии у нас будет такой код:

var x = 100;
x = MyFunc(500);

То консоль выдаст примерно такое сообщение:

В этом сообщении описана ошибка (в данном примере
функция
MyFunc() не определена), а в конце сообщения указано имя файла
и номер строки (в этом примере ошибка находится в строке 18 файла
test-33-02.htm).

Если щёлкнуть по имени файла, то вы перейдёте на вкладку Sources консоли, где отобразится исходный код файла и место ошибки будет обозначено:

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

for (i = 0; i < 10; i++)
  console.log(i);

Выделение сообщений в консоли

Иногда требуется как-то обозначить сообщение. Это можно сделать с помощью значков (иконок). Примерно так:

console.info('Сообщение со значком ИНФОРМАЦИЯ');
console.warn('Сообщение со значком ПРЕДУПРЕЖДЕНИЕ');
console.error('Сообщение со значком ОШИБКА');

Некоторые браузеры могут не поддерживать отдельные значки.

Группировка сообщений

Можно при необходимости сгруппировать сообщения в консоли. Делается это примерно так:

for (i = 1; i < 4; i++)
{
  //Начало группы
  console.group('Группа ' + i);
  for (j = 0; j < 3; j++)  
    console.log(i*10 + j);
  //Завершение группы
  console.groupEnd();
}

Здесь с помощью console.group() мы обозначаем начало группы,
а с помощью console.groupEnd() – конец группы. В консоли это будет выглядеть примерно так:

На этом возможности консоли не заканчиваются. Но, думаю, для начала сведений вполне достаточно.

Эта статья – лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Программирование на JavaScript Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков – мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее…