10 продвинутых способов писать в консоль помимо console.log
![10 продвинутых способов писать в консоль помимо console.log](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/cc22ae61-a8aa-4b67-8d3f-a4c3de29a927.png)
Когда вам нужно что-то отдебажить на фронтенде, вы юзаете console.log
Одной из проблем юзания console.log
может быть. "засорение" консоли, что затрудняет чтение консоли. Ниже обсудим 10 способов как улучшить запись в консоль:
1. console.table
![console.table](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/f3e2899b-7d10-4b0a-979f-b72a0728e5e6.png)
Вместо того, чтобы просто выводить массив или объект, 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](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/c3439a3e-ad9f-45f3-841d-a723de349426.png)
2. console.group
![console.group](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/c4600e12-0786-480e-b0b5-dc11390104f4.png)
console.group
и console.groupEnd
. Эти методы позволяют создать в консоли вложенную сворачиваемую группу. Это может быть полезно для организации и структурирования инпут данных отладки, например на разных уровнял вложености.
console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();
![console.group](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/dad5d288-e780-4b7b-a8b1-8a299ddc5073.png)
3. console.time
![console.time](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/f58206e1-1373-40c8-b113-224c932501c8.png)
Методы 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](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/0245222e-68b5-4eaf-97d1-cfee5a6c7cca.png)
4. console.assert
![onsole.assert](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/8ff8047b-62e3-4339-9bc7-f5d423dbba71.png)
Позволяет вывести в консоле сообщение об ошибке, если утверждение заданое в условии было ложным
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](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/d5d63dfb-8f46-4ec4-8d34-3588157c18b3.png)
5. Стили для console.log
![console.log](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/1a2a86e2-8849-456f-b916-2570bf0125c7.png)
Вы можете юзать %c
placeholder в ваших console.log
стейтах и CSS стили для консоли:
console.log('%cHello world!', 'color: red; font-weight: bold;');
![styles console.log](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/8d7d1917-ef4c-4b04-a033-04e4f37c4c87.png)
6. console.trace
![console.trace](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/2506c273-6987-4d4b-a30f-8eb75c426bde.png)
console.trace() - это метод JavaScript, который выводит стек вызовов функций, которые привели к вызову текущей функции. Он может быть использован в отладке кода, чтобы проследить, где именно возникает ошибка или неожиданный результат.
Чтобы использовать console.trace(), вы можете просто вставить его в код в том месте, где вы хотите увидеть стек вызовов. Например:
function foo() {
console.trace();
}
function bar() {
foo();
}
bar();
Когда этот код будет выполнен, вы увидите стек вызовов функций в консоли, начиная с bar
и заканчивая console.trace
.
7. console.dir
![console.dir](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/00a3dde4-8ecb-423d-af5e-4fcc57402aca.png)
Используйте 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](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/ceb4053e-494a-4833-b690-f78182b1017d.png)
8. console.count
![console.count](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/575f3b7c-4699-4505-86ec-d31d7080d09a.png)
Позволяет подсчитать количество одинаковых месседжей в коде, например:
function foo(x) {
console.count(x);
}
foo('hello');
foo('world');
foo('hello');
![console.count](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/828eb94e-f96c-4dbd-9126-7e4309a202e0.png)
9. console.clear
![console.clear](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/577ac989-a7aa-4d6a-a4c3-ea0ded34f03a.png)
Когда нужно почисить консоль от лишних сообщений, можно заюзать console.clear
10. console.profile
![console.profile](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/8af54ed4-e6bb-4252-bdaf-aadc04438ffd.png)
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
В консоль будет выведена следующая инфа:
![console.profile](https://joprblob.azureedge.net/site/blog/27bb6d2d-17de-40c4-8929-eb1df5649254/167d6879-ec15-422a-8fee-511e31f6dae6.png)