Javascript консоль ошибок

Время на прочтение
5 мин

Количество просмотров 60K

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

Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log(). Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.

Что такое консоль?

Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:

• Просматривать журналы ошибок и предупреждений, возникающих на веб-странице.
• Взаимодействовать с веб-страницей, используя команды JavaScript.
• Отлаживать приложения и работать с DOM непосредственно из браузера.
• Исследовать и анализировать сетевую активность.

В целом, консоль даёт разработчику возможность писать JavaScript-код прямо в браузере, наблюдать за тем, что происходит на страницах, и управлять этими процессами.

Методы console.log, console.error, console.warn и console.info

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

Использование различных команд для вывода данных в консоль

Метод console.group

Метод console.group() позволяет собирать серии вызовов console.log() (а также — других подобных методов) в группы, содержимое которых можно сворачивать и разворачивать. Пользоваться этим методом очень просто: после вызова console.group() (или после console.groupCollapsed(), если группу требуется вывести сразу в свёрнутом виде) нужно поместить все вызовы console.log(), которые надо сгруппировать. Затем, в конце набора команд, которые требуется сгруппировать, надо поместить команду console.groupEnd(). Рассмотри пример.

function doSomething(obj){
    console.group('doSomething Profile');
    const _data = new Date();
    console.log('evaluating data: ', _data);
    const _fullName = `${obj.firstName} ${obj.lastName}`;
    console.log('fullName: ', _fullName);
    const _id = Math.random(1);
    console.log('id: ', _id);
    console.groupEnd();
}

doSomething({"firstName":"Riccardo", "lastName":"Canella"});

В консоль, после выполнения этого фрагмента кода, попадёт следующее.

Группировка данных в консоли с помощью метода console.group()

Метод console.table

После того, как я узнал о существовании метода console.table(), моя жизнь изменилась навсегда. Например, использование обычной команды console.log() при выводе JSON-кода или больших JSON-массивов — это сущий кошмар. Метод console.table() позволяет выводить сложные структуры данных внутри симпатичных таблиц, столбцам которых можно давать имена, передавая их в качестве параметров (не все браузеры поддерживают эту возможность console.table()). Вот пример работы с этой командой.

const typeOfConsole = [
    {name:'log', type:'standard'},
    {name:'info', type:'standard'},
    {name:'table', type:'wow'}
];

console.table(typeOfConsole);

const mySocial = {
    facebook: true,
    linkedin: true,
    flickr: true,
    instagram: true,
    VKontaktebadoo: false
};

console.table(mySocial, ["Socials", "I'v an account"]);

То, что получилось, и выглядит отлично, и способно облегчить отладку.

Табличное оформление выводимых данных с помощью console.table()

Методы console.count, console.time и console.timeEnd

Методы console.count(), console.time() и console.timeEnd() можно назвать чем-то вроде швейцарского ножа для разработчика, который занимается отладкой приложений. Так, метод console.count() позволяет подсчитывать количество собственных вызовов и выводить его в консоль с заданной меткой. Метод console.time() позволяет запустить именованный таймер (имя передаётся ему в качестве параметра, на одной странице может присутствовать до 10000 таймеров). Для того чтобы остановить конкретный таймер, используется команда console.timeEnd() с меткой таймера, передаваемой в качестве параметра. Она останавливает таймер и выводит время его работы в консоль. Вот как пользоваться этими методами.

console.time('total');
console.time('init arr');
const arr = new Array(20);
console.timeEnd('init arr');

for(var i = 0; i < arr.length; i++){
    arr[i] = new Object();
    const _type = (i % 2 === 0) ? 'even' : 'odd';
    console.count(_type+'added');
}

console.timeEnd('total');

А вот как выглядит результат работы этого кода в консоли.

Использование методов console.count(), console.time() и console.timeEnd()

Методы console.trace и console.assert

Методы console.trace() и console.assert() позволят выводить из места их вызова информацию о стеке. Представьте себе, что вы занимаетесь разработкой JS-библиотеки и хотите сообщить пользователю о том, где возникла ошибка. В подобном случае эти методы могут оказаться весьма полезными. Метод console.assert() похож на console.trace(), разница между ними заключается в том, что console.assert() выведет данные лишь в том случае, если не выполнится переданное ему условие. Вот как работать с этими методами.

function lesserThan(a,b){
    console.assert(a<b, {
        "message":"a is not lesser than b",
        "a": a,
        "b": b
    });
}

lesserThan(6,5);
console.trace("End");

Несложно заметить, что вывод, генерируемый этим фрагментом кода, выглядит так же, как нечто подобное выглядело бы в React (или в любой другой библиотеке), когда фреймворк сообщает о возникновении исключения.

Результат использования команд console.assert() и console.trace()

Команды для работы с консолью и продакшн-код

Команды для работы с консолью нужны на этапе разработки и отладки приложений. Это значит, что когда придёт время выпуска продукта, эти команды придётся из кода удалить. Об этом можно просто забыть и, через некоторое время после сборки продакшн-версии проекта, заметить, что программа пишет что-то в консоль тогда, когда в этом нет никакой необходимости. Не стоит нагружать компьютеры ненужной работой, пусть и такой, казалось бы, незначительной, как вывод данных в консоль. В то же время, учитывая то, что команды для работы с консолью могут пригодиться в ходе доработки приложения, лучше всего не удалять их из исходного кода программы насовсем, а убирать их лишь из её продакшн-версии. Тут нам на помощь придут средства для сборки проектов. Так, я постоянно пользуюсь Webpack, и на работе, и в собственных проектах. Этот инструмент позволяет удалять все ненужные команды по работе с консолью (он способен отличить их от других команд) из продакшн-сборок с использованием uglifyjs-webpack-plugin.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";

.....
optimization: {
        minimizer: !debug ? [
            new UglifyJsPlugin({
                // Параметры сжатия
                uglifyOptions: {
                    // Убрать комментарии
                    comments: false,
                    compress: {
                       // Убрать предупреждения
                       warnings: false,
                       // Убрать команды по работе с консолью
                       drop_console: true
                    },
                }
           })] : []
}

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

Итоги

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

Уважаемые читатели! Какие команды для работы с JavaScript-консолью вы используете?

В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.

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

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль — общий взгляд

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

• в браузере Chrome и Dragonfly для Opera – Ctrl + Shift + I
• Firebug — F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль.  Самая известная и полезная команда .log().

При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли

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

function calcPhotos() { 
       total_photos_diff = total_photos - prev_total_photos;
       // Выводим значения переменных в консоль
       console.log(total_photos_diff);
}

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

var t = 3,
    p = 1;
 
 
function calcPhotos(total_photos, prev_total_photos) {
        var total_photos_diff   = total_photos - prev_total_photos;     
        
        // Выводим значения в консоль
        console.log(total_photos_diff);
        
        // Обновляем значения
        t = t*1.3;
        p = p*1.1;
}
 
 
setInterval(function() {
        calcPhotos(t,p);
},100);

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение»  и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом  представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Группировка вызовов метода .log()

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

// Первая группа
console.group("Photo calculation");
      console.info("Total difference is now " + total_photos_diff);
      console.log(total_photos_diff);
console.groupEnd();
 
// Вторая группа
console.group("Incrementing variable");
       console.log("Total photos is now: " + t);
       console.log("Prev total photos is now: " + p);
console.groupEnd();

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

Для установки точки прерывания нужно перейти на закладку ‘Scripts‘ и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации — появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:

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

Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:

• “Continue”: продолжает выполнение кода до следующей точки прерывания.

• “Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет «погружаться» в ее код.

• “Step Into”: похоже на «Step over», за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.

• «Step Out»: если вы вошли в код функции с помощью кнопки «Step Into», то нажатие кнопки «Step out» вызовет выполнение кода функции до конца и переход к родительской функции.

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

Условные точки прерывания

В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.

В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

if (total_photos_diff > 300) {
          debugger;     // запускаем отладчик и прерываем выполнение кода
}

Другие способы прервать выполнение кода

Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.

Остановка при изменении DOM

Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘Pause‘ в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

var t = 3,
        p = 1;
 
 
function calcPhotos(total_photos, prev_total_photos) {
        var total_photos_diff   = total_photos - prev_total_photos;     
        
        // Первая группа
        
        console.info("Total difference is now " + total_photos_diff);
 
        
        // Обновляем значения
        t = t+5;
        p = p+1;
 
        // Необрабатываемое исключение
        if (total_photos_diff > 300) {
                throw 0;
        }
 
        // Обрабатываемое исключение
        if (total_photos_diff > 200) {
                try {
                        $$('#nonexistent-element').hide();
                } catch(e) {
                        console.error(e);
                }
        }
 
}
 
 
setInterval(function() {
        calcPhotos(t,p);
},50);

Введение в стек вызовов

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

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues(), что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.

Here is a solution to the literal question of how to print a message to the browser’s error console, not the debugger console. (There might be good reasons to bypass the debugger.)

As I noted in comments about the suggestion to throw an error to get a message in the error console, one problem is that this will interrupt the thread of execution. If you don’t want to interrupt the thread, you can throw the error in a separate thread, one created using setTimeout. Hence my solution (which turns out to be an elaboration of the one by Ivo Danihelka):

var startTime = (new Date()).getTime();
function logError(msg)
{
  var milliseconds = (new Date()).getTime() - startTime;
  window.setTimeout(function () {
    throw( new Error(milliseconds + ': ' + msg, "") );
  });
}
logError('testing');

I include the time in milliseconds since the start time because the timeout could skew the order in which you might expect to see the messages.

The second argument to the Error method is for the filename, which is an empty string here to prevent output of the useless filename and line number. It is possible to get the caller function but not in a simple browser independent way.

It would be nice if we could display the message with a warning or message icon instead of the error icon, but I can’t find a way to do that.

Another problem with using throw is that it could be caught and thrown away by an enclosing try-catch, and putting the throw in a separate thread avoids that obstacle as well. However, there is yet another way the error could be caught, which is if the window.onerror handler is replaced with one that does something different. Can’t help you there.

This interactive tutorial shows you how to log and filter messages in the Chrome DevTools Console.

This tutorial is intended to be completed in order. It assumes that you understand the fundamentals of web development, such as how to use JavaScript to add interactivity to a page.

Set up the demo and DevTools

This tutorial is designed so that you can open up the demo and try all the workflows yourself. When you physically follow along, you’re more likely to remember the workflows later.

1. Open the demo.

2. Optional: Move the demo to a separate window. In this example, the tutorial is on the left, and the demo is on the right.

   

3. Focus the demo and then press Control+Shift+J or Command+Option+J (Mac) to open DevTools. By default DevTools opens to the right of the demo.

   

4. Optional: Dock DevTools to the bottom of the window or undock it into a separate window.

   DevTools docked to the bottom of the demo:

   DevTools undocked in a separate window:

View messages logged from JavaScript

Most messages that you see in the Console come from the web developers who wrote the page’s JavaScript. The goal of this section is to introduce you to the different message types that you’re likely to see in the Console, and explain how you can log each message type yourself from your own JavaScript.

1. Click the Log Info button in the demo. Hello, Console! gets logged to the Console.

   

2. Next to the Hello, Console! message in the Console, click log.js:2. The Sources panel opens and highlights the line of code that caused the message to get logged to the Console.

   

   The message was logged when the page’s JavaScript called console.log('Hello, Console!').

3. Navigate back to the Console using any of the following workflows:

   • Click the Console tab.
   • Press Control+[ or Command+[ (Mac) until the Console is in focus.
   • Open the Command Menu, start typing Console, select the Show Console Panel command, and then press Enter.

4. Click the Log Warning button in the demo. Abandon Hope All Ye Who Enter gets logged to the Console.

   

   Messages formatted like this are warnings.

5. Optional: Click log.js:12 to view the code that caused the message to get formatted like this, and then navigate back to Console when you’re finished. Do this whenever you want to see the code that caused a message to get logged a certain way.

6. Click the Expand icon in front of Abandon Hope All Ye Who Enter. DevTools shows the stack trace leading up to the call.

   

   The stack trace is telling you that a function named logWarning was called, which in turn called a function named quoteDante. In other words, the call that happened first is at the bottom of the stack trace. You can log stack traces at any time by calling console.trace().

7. Click Log Error. The following error message gets logged: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Click Log Table. A table about famous artists gets logged to the Console.

   

   Note how the birthday column is only populated for one row. Check the code to figure out why that is.

9. Click Log Group. The names of 4 famous, crime-fighting turtles are grouped under the Adolescent Irradiated Espionage Tortoises label.

   

10. Click Log Custom. A message with a red border and blue background gets logged to the Console.

    

The main idea here is that when you want to log messages to the Console from your JavaScript, you use one of the console methods. Each method formats messages differently.

There are even more methods than what has been demonstrated in this section. At the end of the tutorial you’ll learn how to explore the rest of the methods.

View messages logged by the browser

The browser logs messages to the Console, too. This usually happens when there’s a problem with the page.

1. Click Cause 404. The browser logs a 404 network error because the page’s JavaScript tried to fetch a file that doesn’t exist.

   

2. Click Cause Error. The browser logs an uncaught TypeError because the JavaScript is trying to update a DOM node that doesn’t exist.

   

3. Click the Log Levels drop-down and enable the Verbose option if it’s disabled. You’ll learn more about filtering in the next section. You need to do this to make sure that the next message you log is visible. Note: If the Default Levels drop-down is disabled, you may need to close the Console Sidebar. Filter by Message Source below for more information about the Console Sidebar.

   

4. Click Cause Violation. The page becomes unresponsive for a few seconds and then the browser logs the message [Violation] 'click' handler took 3000ms to the Console. The exact duration may vary.

   

Filter messages

On some pages you’ll see the Console get flooded with messages. DevTools provides many different ways to filter out messages that aren’t relevant to the task at hand.

Filter by log level

Each console.* method is assigned a severity level: Verbose, Info, Warning, or Error. For example, console.log() is an Info-level message, whereas console.error() is an Error-level message.

Note: For a full list of console.* methods and their severity levels, see the Console API reference.

To filter by log level:

1. Click the Log Levels drop-down and disable Errors. A level is disabled when there is no longer a checkmark next to it. The Error-level messages disappear.

   

2. Click the Log Levels drop-down again and re-enable Errors. The Error-level messages reappear.

Filter by text

When you want to only view messages that include an exact string, type that string into the Filter text box.

1. Type Dave into the Filter text box. All messages that do not include the string Dave are hidden. You might also see the Adolescent Irradiated Espionage Tortoises label. That’s a bug.

   

2. Delete Dave from the Filter text box. All the messages reappear.

Filter by regular expression

When you want to show all messages that include a pattern of text, rather than a specific string, use a regular expression.

1. Type /^[AH]/ into the Filter text box. Type this pattern into RegExr for an explanation of what it’s doing.

   

2. Delete /^[AH]/ from the Filter text box. All messages are visible again.

Filter by message source

When you want to only view the messages that came from a certain URL, use the Sidebar.

1. Click Show Console Sidebar .

   

2. Click the Expand icon next to 12 Messages. The Sidebar shows a list of URLs that caused messages to be logged. For example, log.js caused 11 messages.

   

Filter by user messages

Earlier, when you clicked Log Info, a script called console.log('Hello, Console!') in order to log the message to the Console. Messages logged from JavaScript like this are called user messages. In contrast, when you clicked Cause 404, the browser logged an Error-level message stating that the requested resource could not be found. Messages like that are considered browser messages. You can use the Sidebar to filter out browser messages and only show user messages.

1. Click 9 User Messages. The browser messages are hidden.

   

2. Click 12 Messages to show all messages again.

Use the Console alongside any other panel

What if you’re editing styles, but you need to quickly check the Console log for something? Use the Drawer.

1. Click the Elements tab.

2. Press Escape. The Console tab of the Drawer opens. It has all of the features of the Console that you’ve been using throughout this tutorial.

   

Next steps

Congratulations, you have completed the tutorial. Click Dispense Trophy to receive your trophy.

• See Console Reference to explore more features and workflows related to the Console UI.
• See Console API Reference to learn more about all of the console methods that were demonstrated in View messages logged from JavaScript and explore the other console methods that weren’t covered in this tutorial.
• See Get Started to explore what else you can do with DevTools.
• See Format and style messages in the Console to learn more about all of the console format and styling methods.