Audio/Video promotion
Место для рекламы
Поддержка  •  Дневник  •  Без рекламы  •  О сайте  •  Реклама  •  Поставить баннер  •  Fleshlight  •  Прислать  •  Хроника  •  Translate Гости: 5    Участники: 0 Авторизация Авторизация   Регистрация 
Метод Научного Тыка
RULVEN
Поиск  
Blackball iMag | интернет-журнал
Размещение рекламы
Каталог


Начало » Разработка ПО » 10 продвинутых способов писать в консоль помимо console.log
Мне повезёт!

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


10 продвинутых способов писать в консоль помимо console.log
Добавлено: Пн 29.05.2023 • Sergeant
Автор: Артём Полищук
Источник: источник
Просмотров: 571
Комментарии: 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



Комментарии

Чтобы добавить видео с YouTube, нужно написать [@youtube=xxxxx] , где xxxxx – ID видео.


Комментарии: 0
Нет ни одного комментария.
RSS-лента
Поделиться ссылкой:

javascript
DOM Enlightenment Вт 13.02.2024
DOM Enlightenment
Год: 2013
10 продвинутых способов писать в консоль помимо console.log Пн 29.05.2023
10 продвинутых способов писать в консоль помимо console.log
Асинхронный JavaScript: изучаем Async/Await, Callbacks и Promises Пн 15.05.2023
Асинхронный JavaScript: изучаем Async/Await, Callbacks и Promises
Learning React Чт 20.04.2023
Learning React
Год: 2020
JavaScript Everywhere Вт 18.04.2023
JavaScript Everywhere
Год: 2020
Fullstack React with TypeScript Чт 13.04.2023
Fullstack React with TypeScript
Год: 2020
Fullstack React Вт 11.04.2023
Fullstack React
Год: 2020
React and React Native, 3rd Edition Чт 06.04.2023
React and React Native, 3rd Edition
Год: 2020
Full-Stack React Projects, 2nd Edition Вт 04.04.2023
Full-Stack React Projects, 2nd Edition
Год: 2020
Пн 03.04.2023
Angular без CLI (руководство)
The Road to React Чт 30.03.2023
The Road to React
Год: 2020
React Hooks in Action Чт 23.03.2023
React Hooks in Action
Год: 2021
Learning PHP, MySQL & JavaScript Вт 21.03.2023
Learning PHP, MySQL & JavaScript
Год: 2018
Бессерверные приложения на JavaScript Вт 07.02.2023
Бессерверные приложения на JavaScript
Год: 2020
Programming JavaScript Applications Чт 05.01.2023
Programming JavaScript Applications
Год: 2014
Composing Software Вт 11.10.2022
Composing Software
Год: 2019
Data Structures and Algorithms with JavaScript Чт 06.10.2022
Data Structures and Algorithms with JavaScript
Год: 2014
Programming HTML5 Applications Вт 04.10.2022
Programming HTML5 Applications
Год: 2011
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 Чт 26.05.2022
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5
Год: 2016
You Don't Know JS: Types & Grammar Вт 10.05.2022
You Don't Know JS: Types & Grammar
Год: 2015
You Don't Know JS: ES6 & Beyond Чт 05.05.2022
You Don't Know JS: ES6 & Beyond
Год: 2015
You Don't Know JS: Async & Performance Вт 03.05.2022
You Don't Know JS: Async & Performance
Год: 2015
You Don't Know JS: Up & Going Чт 28.04.2022
You Don't Know JS: Up & Going
Год: 2015
You Don't Know JS: this & Object Prototypes Вт 26.04.2022
You Don't Know JS: this & Object Prototypes
Год: 2014
You Don't Know JS: Scope & Closures Чт 21.04.2022
You Don't Know JS: Scope & Closures
Год: 2014
TypeScript: Modern JavaScript Development Чт 14.10.2021
TypeScript: Modern JavaScript Development
Год: 2016
Pro JavaScript Design Patterns Чт 16.09.2021
Pro JavaScript Design Patterns
Год: 2008
Mastering JavaScript Design Patterns Чт 24.06.2021
Mastering JavaScript Design Patterns
Год: 2014
JavaScript Patterns Вт 18.05.2021
JavaScript Patterns
Год: 2010
Learning JavaScript Design Patterns Чт 08.04.2021
Learning JavaScript Design Patterns
Год: 2012
Пн 05.04.2021
Замыкания в JavaScript для начинающих
Get Programming with JavaScript Вт 03.03.2020
Get Programming with JavaScript
Год: 2016
JavaScript Application Design Вт 25.02.2020
JavaScript Application Design
Год: 2015
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript Вт 20.08.2019
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript
Год: 2012
JavaScript. Шаблоны Вт 13.08.2019
JavaScript. Шаблоны
Год: 2011
Secrets of the JavaScript Ninja Вт 06.08.2019
Secrets of the JavaScript Ninja
Год: 2012
Eloquent JavaScript, 3rd Edition Вт 30.07.2019
Eloquent JavaScript, 3rd Edition
Год: 2018
Speaking JavaScript Вт 07.05.2019
Speaking JavaScript
Год: 2014
High Performance JavaScript Вт 23.04.2019
High Performance JavaScript
Год: 2010
Сила JavaScript Вт 16.04.2019
Сила JavaScript
Год: 2013
Functional Programming in JavaScript Вт 02.04.2019
Functional Programming in JavaScript
Год: 2015
Книги
В работу с головой Вт 27.02.2024
В работу с головой
Год: 2017
Жемчужины программирования, 2-е издание Вт 20.02.2024
Жемчужины программирования, 2-е издание
Год: 2002
DOM Enlightenment Вт 13.02.2024
DOM Enlightenment
Год: 2013
Путь программиста. Самоучитель по языку Transact-SQL Вт 06.02.2024
Путь программиста. Самоучитель по языку Transact-SQL
Год: 2020
Ultimate ASP.NET Core Web API Вт 30.01.2024
Ultimate ASP.NET Core Web API
Год: 2021

Разработано на основе BlackNight CMS
Release v.2024-02-21
© 2000–2024 Blackball
Дизайн & программирование:
О сайтеРеклама
Visitors
Web-site performed by Sergey Drozdov
BlackballРекламаСтатистикаПоддержка | МузыкаПлейлистыКиноВидеоИгрыАудиоПрограммыСтатьиКартинкиЮморФорумДневник сайтаПрислать контент