Содержание урока по Qlik Sense
Отладка с помощью инструментов веб-разработчика
Исторически сложилось так, что разработчики 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; }