как выводить сообщения отладки в javascript console chrome

Метод console.log() это самый распространенный способ вывода сообщений в консоль. Вы можете использовать его для вывода текстов, переменных, объектов и других значений.

let x = 10;
console.log("Значение x:", x);

Кроме console.log(), существует множество других методов, которые предоставляют дополнительные возможности:

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

  console.error("Это сообщение об ошибке");

  Expand code

• console.warn(): Позволяет вывести предупреждения. Сообщения отображаются желтым цветом.

  console.warn("Это предупреждение");

  Expand code

• console.info(): Используется для вывода информационных сообщений. Обычно отображает синего цвета, но визуально может не отличаться от console.log().

  console.info("Это информационное сообщение");

  Expand code

• console.table(): Позволяет выводить массивы и объекты в виде таблицы, что может быть полезно для визуализации данных.

  const people = [
      { name: "John", age: 30 },
      { name: "Jane", age: 25 }
  ];
  console.table(people);

  Expand code

Вы можете использовать форматированные строки для создания более очевидных сообщений:

let a = 5;
let b = 10;
console.log(`Сумма a и b равна: ${a + b}`);

Вы также можете использовать специальные символы, такие как %c для кастомизации стиля:

console.log("%cЭто выделенный текст", "color: blue; font-size: 20px;");

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

if (x > 5) {
    console.log("x больше 5");
}

Консоль в Chrome DevTools предоставляет множество дополнительных возможностей для отладки:

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

• Смотреть значения переменных: Взаимодействуйте с переменными и объектами в консоли, просто вводя их имена.

• С помощью debugger;: Вы можете вставить этот оператор в код, что остановит выполнение, если у вас открыта вкладка "Sources" в DevTools. Это позволяет исследовать состояние приложения на этом этапе.

function myFunction() {
    let y = 20;
    debugger; // Код остановится здесь, и вы сможете осмотреть значения
    return y * 2;
}
myFunction();

Методы console.time() и console.timeEnd() можно использовать для измерения времени выполнения блоков кода.

console.time("myFunction");
myFunction();
console.timeEnd("myFunction");