Produire des logs en QML/JavaScript

Mixer les approches QtWidgets et QtQuick

Accès rapide :
Produire des logs avec l'objet console
Les méthodes de production de logs
Quelques autres méthodes de l'objet console
Configurer la production des logs QML

Produire des logs avec l'objet console

D'un certain point de vue, la technologie QML est très proche d'un navigateur : en fait, QML utilise le moteur Web Chromium (le projet au coeur du navigateur Chrome de la société Google). Si vous connaissez un peu le développement Web en JavaScript, la méthode console.log("A message")); doit vous être familière. Dans ce cas, vous ne serez vraiment pas dépaysé : on la retrouve aussi en QML. En fait, on y retrouve aussi d'autres méthodes inspirées de la console d'un navigateur Web.

Les méthodes de production de logs

Le tableau ci-dessous vous présente quelques méthodes relatives à la production de logs. Elles sont classées par niveau de verbosité.

Et voici un petit exemple d'utilisation de certaines de ces méthodes. Pour déclencher le code JavaScript, il vous suffit de cliquer sur le bouton. Une division à partir d'une valeur aléatoire va être effectuée : si la valeur aléatoire est différente de zéro, un appel à console.log sera réalisé et dans le cas contraire, un appel à console.error sera lancé.

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    title: "My First Application"
    width: 640
    height: 480
    visible: true

    Button {
        text: "Push Me"
        anchors.centerIn: parent
        width: 200
        onClicked: {
            let value = Math.floor(Math.random() * 3);
            if (value != 0) {
                console.log(1 / value);
            } else {
                console.error("Denominator cannot be zero");
            }
        }
    }
}

Quelques autres méthodes de l'objet console

En plus des méthodes de production de logs, l'objet console en QML propose également d'autres méthodes utiles pour le débogage et l'affichage d'informations dans la console. Voici un tableau présentant quelques-unes de ces méthodes supplémentaires.

Ces méthodes peuvent être utilisées pour faciliter le débogage et la compréhension de l'exécution de votre code QML. N'hésitez pas à les expérimenter pour voir comment elles peuvent vous aider dans votre développement.

Voici un exemple d'utilisation des méhodes console.time() et console.timeEnd()

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    title: "Exemple de chronométrage"
    width: 640
    height: 480
    visible: true

    Component.onCompleted: {
        console.time("Loop duration");

        let iterations = 1_000_000;
        let counter = 0;

        for (let i = 0; i < iterations; i++) {
            counter++;
        }

        console.timeEnd("Loop duration");
    }
}

Configurer la production des logs QML

Par défaut, vos logs sont envoyés sur le flux stderr et tous les niveaux de messages s'affichent de la même manière. Considérons le gestionnaire d'événements suivant (fonction onClicked).

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    title: "My First Application"
    width: 640
    height: 480
    visible: true

    Button {
        text: "Push Me"
        anchors.centerIn: parent
        width: 200
        onClicked: {
            console.debug("Message 1 with console.debug");
            console.log("Message 2 with console.log");
            console.info("Message 3 with console.info");
            console.warn("Message 4 with console.warn");
            console.error("Message 5 with console.error");
        }
    }
}

Et voici les messages produits sur la console (flux stderr) :

qml: Message 1 with console.debug
qml: Message 2 with console.log
qml: Message 3 with console.info
qml: Message 4 with console.warn
qml: Message 5 with console.error

Mais, il est possible de configurer la production de vos logs en enregistrant un « Message Handler » dans Qt. L'exemple de code Python suivant change la production des logs en y ajoutant l'instant de production du log, le type de log ainsi que l'emplacement du code ayant produit un log.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 

import sys

from PySide6 import QtCore
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine
from PySide6.QtCore import QUrl, QtMsgType, QFileInfo, QFile


# Implémentation de votre Message Handler
def qtMessageHandler(mode, context, message):
    match mode:
        case QtMsgType.QtDebugMsg:
            modeStr = "Debug"
        case QtMsgType.QtInfoMsg:
            modeStr = "Information"
        case QtMsgType.QtWarningMsg:
            modeStr = "Warning"
        case QtMsgType.QtCriticalMsg:
            modeStr = "Critical"
        case _:
            modeStr = "Fatal"
    fileName = QFileInfo(QFile(context.file).fileName()).fileName()
    print(f"QML - {modeStr}: {message} ({fileName}:{context.line})")


if __name__ == '__main__':
    # Enregisrement du Message Handler dans Qt 
    QtCore.qInstallMessageHandler(qtMessageHandler)

    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(QUrl("EnableLogs.qml"))

    sys.exit(app.exec())

Comme vous le constatez, les niveaux de logs ne coïncident pas complétement. En fait, les niveaux de logs présentés dans ce fichier Python sont ceux déjà disponible en C++/Python avec l'approche QtWidgets. Le niveau QtMsgType.QtFatalMsg n'a pas d'équivalent avec l'objet console et les méthodes JavaScript console.debug et console.log renvoient toutes les deux sur QtMsgType.QtDebugMsg.

Et voici la manière dont vos logs sont dorénavant produits.

QML - Debug: Message 1 with console.debug (EnableLogs.qml:15)
QML - Debug: Message 2 with console.log (EnableLogs.qml:16)
QML - Information: Message 3 with console.info (EnableLogs.qml:17)
QML - Warning: Message 4 with console.warn (EnableLogs.qml:18)
QML - Critical: Message 5 with console.error (EnableLogs.qml:19)

Mixer les approches QtWidgets et QtQuick