Все, что вам нужно знать о консоли разработчика

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

Как получить доступ к консоли разработчика

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

Затем выберите веб-консоль :

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

Если, с другой стороны, вы являетесь пользователем Chrome, процедура очень похожа. Просто войдите в его меню, выберите «Дополнительные инструменты », а затем «Инструменты разработчика »:

Как использовать консоль разработчика

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

# 1 Различные уровни ведения журнала

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

На предыдущем снимке экрана, например, мы видим, что объект console (глобальный объект, целью которого является помощь нам в отладке кода) имеет разные методы для записи сообщений в консоль:

• debug и log показывают простые сообщения.
• info показывает информационные сообщения. В Firefox они показывают значок «Информация» рядом с сообщением.
• warn показывает предупреждения, обычно указывая на проблему или что-то не совсем правильное. Обычно он выделен желтым цветом и значком предупреждения.
• error обычно зарезервирован для наиболее серьезных ошибок (то есть действительно неудачных). Он показан красным цветом, а также выводит трассировку стека (то есть, какая функция сгенерировала ошибку и всех ее вызывающих объектов).

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

# 2 Мониторинг времени выполнения

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

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

Если вы хотите знать, сколько времени требуется для выполнения определенного фрагмента кода, запустите таймер в начале кода ( console.time ) и остановите его ( console.timeEnd ), когда ваш код завершится:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Когда код достигнет timeEnd , вы увидите время, которое потребовалось для запуска:

 Timer: 655ms - timer ended

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

# 3 Автоматические счетчики

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

# 4 Как форматировать ваши журналы

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

Текстовые строки

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

 console.log( 'Hello world!' );

напечатал этот текст:

 Hello world!

Что, если бы вместо этого мы захотели напечатать объект? Ну, это:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

становится таким:

Но что, если мы хотим зарегистрировать несколько вещей? Должны ли мы использовать несколько вызовов console.log ? Ну, ответ - нет, не нужно. Мы можем регистрировать все, что хотим, одним вызовом:

Группировка журналов…

Когда мы начинаем иметь много логов в нашем коде (как, например, здесь):

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

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

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

и они будут отображаться следующим образом:

Столы

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

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Если мы выведем их в console.log , вот что мы получим:

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

#5 Как правильно отображать сложные типы (объекты и массивы)

Наконец, я хотел бы закончить сегодняшний пост чем-то, о чем знают не многие разработчики… Допустим, например, что вы работаете над проектом и хотите посмотреть, какое значение имеет объект до и после его обновления. Для этого, скорее всего, вы зарегистрируете переменную в console.log перед внесением изменений и после них, как показано на следующем GIF-файле:

В предыдущем примере мы регистрируем объект, содержащий значение, равное 1. Затем мы обновляем значение до 200 и снова регистрируем объект. Можно было бы ожидать, что первый журнал всегда будет показывать исходное значение (1), но обратите внимание, как, когда мы расширяем объект, он на самом деле показывает новое значение 200. Что происходит?

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

Чтобы решить эту проблему, просто отправьте копию в журнал (библиотеки, такие как lodash и его метод cloneDeep , делают это очень легко). Таким образом, первый зарегистрированный объект будет копией, которую нельзя изменить (поскольку у вас не будет ссылки на нее):

И это все на сегодня! Надеюсь, вам понравился этот пост. Если вам нужна дополнительная информация обо всем, что вы можете делать с помощью console , ознакомьтесь с документацией в MDN. Не забудьте поделиться им с друзьями? И если вы делаете что-то другое или у вас есть какие-либо советы, чтобы поделиться с нашими читателями, оставьте нам комментарий?

Imagen destacada Тим ван дер Куйп на Unsplash.