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

Сегодня расскажу немного об отладке расширений Qlik Sense с помощью инструментов разработчика Chrome. Для этого немного окунемся в историю отладки сайтов и обратимся к способам решения этих задач в среде разработчиков JS, что наиболее близко к процессу создания Qlik Sense Extension.

Инструменты веб-разработчика: как объединяется Google и Qlik Sense

Создавать визуализации данных (вернее расширения Qlik Sense) и использовать инструменты веб-разработчика? Конечно, это две вещи, которые теперь легко совмещаются вместе, а во многих случаях значительно упрощают жизнь.

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

Даже если вы работаете с Qlik Sense Desktop, вы можете использовать браузер для отладки расширений / приложений (через хаб по localhost:4848/hub).

Итак, запускаем хаб и жмем F12.

НА ЗАМЕТКУ! F12 запускает инструменты веб-разработчика в окне браузера Chrome

Как включить инструменты разработчика в браузере

Щелкните правой кнопкой мыши, нажав клавиши  Ctrl+Shift , в окне браузера с открытым приложением Qlik Sense. После этого включите DevTools:

DevTools: области применения

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

Итак, есть три ключевые области, где полезно объединить Chrome и Qlik Sense:

• Консоль
• Элементы
• Отладка скрипта

Консоль

Самая популярная вкладка тестировщиков – консоль разработчика Chrome Dev Tools, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде расширения Qlik Sense. Также данная панель отображает различного рода предупреждения и рекомендации.

То есть, например, для запуска оповещений полезно использовать консоль:

Получится что-то типа такого:

НА ЗАМЕТКУ!

• console.log() крайне полезный инструмент для отладки вывода без необходимости использовать alert-ов.
• console.log() работает по принципу printf. Поэтому вы можете делать такие вещи, как: console.log(«%s is %d years old.», «Bob», 42).
• console.info() для вывода информации сообщений;
• console.debug() для вывода сообщений отладки;
• console.warn() для вывода предупреждающих сообщений и
• console.error() для вывода сообщений об ошибках.

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

Функциональность консоли не ограничивается только логами, там еще много разных функцией, которые полезно изучить:

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

Представим, когда сообщения в консоли идут потоком друг за другом бывает полезно объединять их в группы. Делается это путем вызова методов console.group() и console.groupEnd().Если вместо console.group() вызвать console.groupCollapsed(), то сообщения в консоли будут свернуты при отображении.

Проверка кода элемента

Панель Elements показывает разметку точно также, как она рендерится в браузере. Можно визуально менять расширение Qlik Sense посредством изменения html/css кода в панели элементов. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн экстеншена.

Эта вкладка инструментов помогает не только управлять стилем расширения, но и посмотреть, как будет выглядеть расширение с разным разрешением и размером экрана. Таким образом, браузер эмулирует тот или иной девайс, показывая, как отображается расширение на других устройствах.

Отладка скрипта

Также весьма полезная вещь в арсенале разработки Qlik Sense. В целях отладки можно использовать и другие решения (вместо Chrome DevTools, например FireBug). Но об этом напишу в следующий раз.

 

Отличных вам разработок с Qlik!