Как сделать консоль сайта больше

Добавил пользователь Дмитрий К.
Обновлено: 10.09.2024

Речь пойдет о начинке встроенного объекта console в браузерах Chrome и Firefox.

Начнем с простого – метод console.log(). Базовый синтаксис:

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

и выведет оно, как вы уже догадались: Bob is 42 years old.

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

Далее перейдем к схожим методам, а именно console.info(), console.warn(), console.error(), console.debug(). Все они работают аналогично console.log(), а метод console.debug() вообще является его алисом(deprecated). Отличие по сути только в варианте вывода(примеры для FireFox и Chrome):

Иногда, когда объект вложеный удобнее использовать не console.log(), а console.dir(), который выведет все в виде структуры:

чтобы вывести красиво HTML/XML можно использовать console.dirxml():

правда, если говорить о Chrome, то там объединили понятие dir/dirxml и log и для сложных обектов со вложенными свойствами используют dir/dirxml вместо log по умолчанию.

Если в консоль выводится много информации, то будет полезно разделять информацию по группам исползуя метод console.group() плюс вспомогательные console.groupEnd() и console.groupCollapsed():

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

Для оценки времени выполнения чего-либо существует удобный метод console.time() и console.timeEnd(), синтаксис:

Есть также в консоли и метод для трассировки вызова – console.trace(). Наиболее полезное примененеие ему – вывод полного стека вызовов при возникновении ошибки – что делает браузер по умолчанию, но всеже, если мы переопределили стандартное поведение браузера, нам очень поможет этот метод:

К сожалению, в FireBug это не работает, а Chrome выдал следующее:

Через консоль еще можно проверять ожидаемые значения используя метод console.assert(), который в случае невыполнения условия внутри вернет console.error().

Для работы с DOM есть ряд полезных хелперов:

$(), $$() – краткая запись для document.querySelector
$x() – получение элемента по XPath
$0 – выбранный инспектором элемент
$1 – предыдущий выбранный инспектором элемент
$n() – показать один из пяти последних выбранных элементов (параметром идет номер элемента) – работает только для FireBug

Другие полезные хелперы:

keys() – выводит ключи объекта
values() – выводи значения объекта
inspect() – открывает объект для инспектирования
clear() – очищает консоль

Ну и конечно самый главный метод help(), плохо что его так и не реализовали в Chrome, но в FireBug он работает отлично, рекомендую.

Ну и еще как бонус, для тех, кто долистал этот посто до конца. В FireBug есть интересный синтаксис работы с переменными из замыкания используя “%“:

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

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

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

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль - общий взгляд

в браузере Chrome и Dragonfly для Opera – Ctrl + Shift + I
Firebug - F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

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

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

Метод можно использовать для вывода вычисленных значений:

Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.

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

console.info(): выводит иконку "информация" и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку "предупреждение" и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку "ошибка" и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Группировка вызовов метода .log()

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group():

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

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

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

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

Работаем с точками прерывания

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

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

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

“Continue”: продолжает выполнение кода до следующей точки прерывания.

“Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет "погружаться" в ее код.

“Step Into”: похоже на "Step over", за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.

"Step Out": если вы вошли в код функции с помощью кнопки "Step Into", то нажатие кнопки "Step out" вызовет выполнение кода функции до конца и переход к родительской функции.

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

Условные точки прерывания

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

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

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

Установка точки прерывания в коде

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

Другие способы прервать выполнение кода

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

Остановка при изменении DOM

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

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ' Pause ' в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Введение в стек вызовов

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

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

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

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

Заключение

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

5 последних уроков рубрики "Разное"

Как выбрать хороший хостинг для своего сайта?

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

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

Итак, встречайте — Консоль управления (Dashboard).

Консоль

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

Как зайти в Консоль?

Чтобы перейти к Консоли после установки WordPress, нужно в строке адреса интернет-браузера дописать "/wp-admin" сразу после адреса самого сайта. То есть, если вы установили WordPress на "www.мойсайт.com", попасть в Консоль вы сможете перейдя по "www.мойсайт.com/wp-admin". (Удобнее всего сразу сохранить эту ссылку в Закладки и в дальнейшем переходить в Консоль двумя кликами мышки.) Нужно будет ввести Имя пользователя и Пароль для доступа к Консоли, эту информацию вы указывали при установке WordPress.

Структура Консоли

Визуально Консоль поделена на 4 основные части:

Шапка

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

Вы можете сразу приступить к редактированию текущей записи, добавить новую, перейти к просмотру комментариев, настроить внешний вид или получить короткую ссылку к записи. Нажав на Консоль, вы попадете обратно в Консоль Управления. В Консоли не отображается Админ Панель, но по желанию можно ее включить. Также можно наоборот скрыть панель в режиме просмотра сайта. Для этого перейдите в Консоли в меню Пользователи -> Ваш профиль и настройте желаемый вид отображения.

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

Под Именем в шапке находятся еще 2 кнопки: Настройки экрана и Помощь. В "Настройках экрана" можно выбрать, какие элементы отображать на Рабочей области, а какие скрыть. Кнопка "Помощь" отображает подсказки к текущему разделу Консоли. Также можно выбрать вид разметки экрана: в 1 колонку или несколько колонок.

Рабочая область

Рабочая область представляет собой набор панелей (виджетов) для управления и взаимодействия с WordPress. Они могут размещаться как в одну колонку, так и в несколько по желанию пользователя. Сразу после установки WordPress на Рабочей области отображаются такие панели:

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

Более того, если навести курсор на область вокруг заголовка панели, появится маленькая стрелочка, позволяющая свернуть или развернуть панель. А в некоторых случаях также появится надпись Настроить, которая позволяет изменить параметры WordPress, не переходя к Меню.

Меню — это вертикально ориентированный набор ссылок, ведущих к разным функциям и параметрам WordPress. На картинке сверху показано стандартное меню WordPress. Каждый раз, когда вы наводите на заголовок меню, он подсвечивается и появляется стрелка, по нажатию которой раскрывается список с подпунктами меню. В самом низу Меню есть кнопка "Свернуть меню", которая скрывает название заголовков, оставляя только пиктограммы.

Давайте коротко пройдемся по всем подпунктам Меню. Сразу оговорюсь, что подпунктов меню в каждом разделе может быть больше, в зависимости от установленной темы или добавленных плагинов. Я рассмотрю набор, который вы получаете сразу после установки WordPress со стандартной темой Twenty Eleven.

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

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

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

Все ссылки — здесь можно добавлять ссылки, которые будут отображаться на вашем сайте. Ссылки можно разделять по рубрикам; они существуют отдельно от рубрик, используемых для записей.
Добавить новую — позволяет добавлять или редактировать ссылки, указывая информацию в каждом блоке. Обязательными полями являются только адрес и имя.
Рубрики ссылок — здесь можно группировать ссылки, используя рубрики ссылок. Названия рубрик ссылок должны быть уникальными.

Все комментарии — менеджер комментариев на сайте. Можно просматривать все комментарии ко всем записям и управлять ими.

Темы — просмотр установленных на сайт тем. Здесь же можно устанавливать дополнительные темы по желанию.
Виджеты — это независимые блоки содержимого, которые можно размещать в областях, предусмотренных вашей темой (обычно их называют боковыми колонками).
Меню — позволяет создать произвольное меню вместо имеющегося по умолчанию. Эти меню могут содержать ссылки на страницы, рубрику, произвольные ссылки и другие типы содержимого.
Настройки темы — позволяет настраивать текущую тему и варианты отображения контента на сайте. Также можно настраивать цветовую схему.
Фон — здесь можно настроить внешний вид сайта, не затрагивая код в файлах темы, с помощью произвольного фона. В качестве фона может выступать изображение или цвет.
Заголовок — здесь можно управлять заголовком сайта, а также задавать титульное изображение под заголовком.
Редактор — позволяет использовать редактор кода тем для внесения изменений в отдельные CSS- и PHP-файлы вашей темы.

Установленные — просмотр всех установленных на сайт плагинов для WordPress. Можно включить или выключить любой плагин, или задать его параметры.
Добавить новый — позволяет загрузить и добавить новый плагин на сайт.
Редактор — редактор кода установленных плагинов.

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

Все инструменты — содержит набор полезных инструментов, призванных упростить ваше взаимодействие с WordPress. Например, инструмент "Опубликовать" или "Конвертер рубрик и меток".
Импорт — отображает набор плагинов, которые позволяют импортировать записи и данные из других сервисов и новостных лент к вам на сайт.
Экспорт — позволяет экспортировать содержимое вашего сайта в файл для сохранения резервной копии.

Подвал

В самой нижней части Консоли находится так называемый Подвал (футер). Здесь вы можете ознакомиться с документацией и дополнительной информацией о WordPress. В правом углу Подвала всегда отображается текущая версия WordPress.

Консоль в браузере Chrome

Как открыть консоль в браузере Chrome:

— нажав одновременно клавиши Ctrl + Shift + I;

— ПКМ по элементу страницы –> Просмотреть код;

— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.

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

Итого в ней есть 8 вкладок, каждая из которых отображает определенные данные:

1 – Elements (содержит весь html/css код страницы и позволяет выбрать элементы для исследования, а также редактировать их)

2 – Console (отображает наличие/отсутствие ошибок/предупреждений в коде)

3 – Sources (позволяет выполнять операции с кодом страницы)

4 – Network (отслеживает время исполнения определенных запросов и сами запросы)

5 – Timeline (измеряет время загрузки страницы)

6 – Profiles (позволяет создавать JavaScript, профили CPU)

7 – Resources (позволяет просмотреть определенные сохраненные данные)

8 – Audits (проводит проверки определенных параметров)

Теперь пройдемся по каждой из них в отдельности и поподробнее:

Панель Elements

Панель элементов

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

Эмулятор девайсов

Панель Console

Панель console

Панель Sources

Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):

Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
Зона текста. В ней находится текст файлов.
Зона информации и контроля.

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

Панель Network

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

Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.

Панель Performance

Performance панель

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

Панель Memory

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

CPU profiler предоставляет информацию по времени, затраченному на выполнение Javascript.

Heap profiler отображает распределение памяти.

JavaScript profile детализирует, куда именно ушло время при выполнении скриптов.

Панель Application

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

Панель Audits

Аудит панель

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

Панель Secuirity

Security панель

Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.

Читайте также: