Отладка с помощью инструментов веб-разработчика

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

Инструменты веб-разработчика

Большинство веб-браузеров предлагают какой-то инструмент разработчика, но в этом разделе вы познакомитесь с некоторыми основными концепциями, основанными на Google Chrome.

Инструменты разработчика в вашем браузере

Если вы разрабатываете расширения визуализации с помощью Qlik Sense Desktop, вы можете использовать свой любимый браузер для целей отладки. Просто откройте Qlik Sense Desktop и оставьте его открытым. Затем откройте свой браузер и перейдите по адресу http://localhost:4848. Отобразится Hub, и оттуда вы сможете открыть инструменты разработчика браузера.

Инструменты разработчика из Qlik Sense Desktop

Поскольку Qlik Sense Desktop использует Chromium в качестве встроенного браузера, вы можете получить доступ к Chrome DevTools из Qlik Sense Desktop. Нажмите Ctrl + Shift и одновременно щелкните правой кнопкой мыши по листу, а затем выберите «Показать DevTools» в диалоговом окне.

Откроется окно devtools

Отладка с помощью Chrome DevTools

В этом разделе выделены три области, которые имеют большое значение при разработке расширений визуализации:

• Использование console
• Inspect elements
• Debugging

Использование консоли

Как упоминалось выше, удобнее использовать console в веб DevTools вместо запуска предупреждений. Для этого используйте console.info или console.log, чтобы передать что-нибудь в консоль.

Пример: 

paint: function ( $element, layout ) {

    var err = {
        message: 'Something went wrong',
        errCode: 'bla'
    };

    console.info( 'We are re-painting the extension' );
    console.error( 'Oops, we haven an error', err );
    console.log( 'We are here' );
    console.log( 'layout', layout );

}

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

console.assert();
console.group();
console.groupCollapsed();
console.groupEnd();
console.table();

Некоторые соображения

Функции console.xyz() поддерживаются не всеми веб-браузерами, поэтому рекомендуется убедиться, что в коде не осталось console.xyz(), когда он попадет в рабочую среду. Для этого есть несколько стратегий:

• Вручную удалите все console.xyz() из кода перед развертыванием в производственной среде.
• Оберните все ваши вызовы в консоль, чтобы они выполнялись только в том случае, если текущий веб-браузер поддерживает консольные вызовы.
• Используйте инструменты, например Grunt или Gulp, для создания процесса развертывания, в котором все операторы консоли удаляются автоматически.

Inspect elements (Осмотрите элементы)

Манипуляции с объектной моделью документа (DOM) можно просмотреть с помощью инспектора элементов, который встречается в большинстве инструментов веб-разработчика. В Chrome DevTools вы получаете доступ к функции проверки элементов, щелкнув увеличительное стекло на панели инструментов.

Отладка

Вы можете использовать developer tools для отладки в реальном времени, например:

• Chrome DevTools
• Firebug
• Инструменты разработчика F12 для Internet Explorer

Для того, чтобы запустить режим debugging в расширении, необходимо написать команду debugger;.

Пример:

paint: function($element, layout) {
    
    console.log(layout);
    
    var hypercube = layout.qHyperCube;
    
    console.log(hypercube);
    
    debugger;
}