Message to administrator
Имя:
Email:
Message:
Sign In
Username:
Password:

Статистика
Share
Donation  •  Journal  •  About  •  Advertisement  •  Place ads banner  •  Send content  •  Timeline  •  Translate  •  Featured  •  Message to admin OpenToWork Guests: 111    Members: 0 Авторизация Sign In   Sign Up 
Scientific Poke Method
RULVEN
Search  
Blackball iMag | интернет-журнал
RSS-лента
Share link:
Catalogue

Статьи
Anonymous • Сб 17.09.2005 04:47

Home » Software development » 10 продвинутых способов писать в консоль помимо console.log

10 продвинутых способов писать в консоль помимо console.log


10 продвинутых способов писать в консоль помимо console.log
Added: Пн 29.05.2023 • Sergeant
Author: Артём Полищук
Source: source
Views: 639
Comments: 0


Когда вам нужно что-то отдебажить на фронтенде, вы юзаете console.log Одной из проблем юзания console.log может быть "засорение" консоли, что затрудняет чтение консоли. Ниже обсудим 10 способов как улучшить запись в консоль:

1. console.table

Вместо того, чтобы просто выводить массив или объект, console.table выводит данные в табличном формате, что упрощает чтение.

// Output an array of objects as a table
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];
console.table(users);

Это выведет массив юзеров в табличном формате со свойствами каждого объекта в виде столбцов и объектов в виде строк.

console.table

2. console.group

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

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

console.group

3. console.time

Методы console.time и console.timeEnd позволяют измерить время, необходимое для выполнения блока кода. Это может быть полезно для выявления и оптимизации узких мест производительности в вашем коде.

console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // Process the data
  });

console.time

4. console.assert

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

function add(a, b) {
  return a + b;
}

// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');

console.assert

5. Стили для console.log

Вы можете юзать %c placeholder в ваших console.log стейтах и CSS стили для консоли:

console.log('%cHello world!', 'color: red; font-weight: bold;');

styles console.log

6. console.trace

console.trace() - это метод JavaScript, который выводит стек вызовов функций, которые привели к вызову текущей функции. Он может быть использован в отладке кода, чтобы проследить, где именно возникает ошибка или неожиданный результат.

Чтобы использовать console.trace(), вы можете просто вставить его в код в том месте, где вы хотите увидеть стек вызовов. Например:

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

Когда этот код будет выполнен, вы увидите стек вызовов функций в консоли, начиная с bar и заканчивая console.trace.

7. console.dir

Используйте console.dir метод для вывода свойств объекта в иерархическом формате:

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

Это выведет свойства obj объекта в иерархическом формате, что позволит вам увидеть структуру объекта и все его свойства и значения.

console.dir

8. console.count

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

function foo(x) {
  console.count(x);
}

foo('hello');
foo('world');
foo('hello');

console.count

9. console.clear

Когда нужно почисить консоль от лишних сообщений, можно заюзать console.clear

10. console.profile

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

console.profile('MyProfile');

// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
  // Do something
}

console.profileEnd('MyProfile');

Это запустит профилирование блока кода между вызовами console.profile и console.profileEnd и выведет результаты в консоль при console.profileEnd

В консоль будет выведена следующая инфа:



Мне нравится 0   Мне не нравится 0





Comments: 0
There are no comments.

Новое
OWASP: что это такое и что нужно знать веб-разработчикам вчера, 11:44
OWASP: что это такое и что нужно знать веб-разработчикам
Система визуализации и мониторинга. Grafana + Prometheus 2 дня назад, 09:07
Система визуализации и мониторинга. Grafana + Prometheus
От имени реальных HR: Squid Werewolf маскируются под рекрутеров крупных компаний 2 дня назад, 03:16
От имени реальных HR: Squid Werewolf маскируются под рекрутеров крупных компаний
Айтишники отправляют детей учиться на плотников и электриков. Они уверены, что ИИ уничтожит интеллектуальный труд 3 дня назад, 13:54
Айтишники отправляют детей учиться на плотников и электриков. Они уверены, что ИИ уничтожит интеллектуальный труд
Ретроконсоль Sega Master System II: что внутри винтажной приставки? 3 дня назад, 09:01
Ретроконсоль Sega Master System II: что внутри винтажной приставки?
Обиженный программист «заминировал» IT-системы энергетического гиганта 3 дня назад, 08:46
Обиженный программист «заминировал» IT-системы энергетического гиганта
Алгоритмы голодания: ИИ отбирает хлеб у 76 миллионов фрилансеров 3 дня назад, 08:42
Алгоритмы голодания: ИИ отбирает хлеб у 76 миллионов фрилансеров
Внешний аккумулятор restore: hello, world! – быстрая зарядка на пляже Вс 09.03.2025
Внешний аккумулятор restore: hello, world! – быстрая зарядка на пляже
Как компании контролируют удалённо работающих сотрудников Сб 08.03.2025
Как компании контролируют удалённо работающих сотрудников
Вайб-кодинг: программисты нашли способ зарабатывать, ничего не делая? Пт 07.03.2025
Вайб-кодинг: программисты нашли способ зарабатывать, ничего не делая?
Books
Fundamentals of Enterprise Architecture 2 дня назад, 10:04
Fundamentals of Enterprise Architecture
Год: 2024
Pro .NET Memory Management, Second Edition Вт 04.03.2025
Pro .NET Memory Management, Second Edition
Год: 2024
Micro Frontends in Action Вт 18.02.2025
Micro Frontends in Action
Год: 2020
Разработано на основе BlackNight CMS
Release v.2025-03-13
© 2000–2025 Blackball
Design & programming:
AboutAdvertising
Visitors
Web-site performed by Sergey Drozdov
BlackballAdvertisingStatsПоддержка
MusicPlaylistsCinemaVideoGamesAudioDownloadsMagazinePicturesHumorForumWebsite journalSend contentFeatured