Participer au site avec un Tip
Rechercher
 

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

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é.

Nom de la méthode Description
console.trace : Affiche une trace de la pile d'appels dans la console, permettant de suivre l'exécution du code et d'identifier les fonctions appelées.
console.debug : Affiche un message de débogage dans la console, généralement pour fournir des informations sur l'état d'exécution du programme.
console.log : Affiche un message général dans la console, souvent utilisé pour informer du déroulement du programme ou pour afficher des valeurs de variables.
console.info : Affiche un message d'information dans la console, similaire à console.log() mais généralement utilisé pour indiquer des informations moins importantes ou plus spécifiques.
console.warn : Affiche un message d'avertissement dans la console, utilisé pour signaler des situations potentiellement problématiques ou des mauvaises pratiques dans le code.
console.error : Affiche un message d'erreur dans la console, utilisé pour signaler des erreurs ou des problèmes critiques qui empêchent le programme de fonctionner correctement.

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");
            }
        }
    }
}
vous devriez certainement remarquer qu'a priori rien ne distingue pour le moment un appel à console.log d'un autre à console.error.

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.

Nom de la méthode Description
console.assert : Affiche un message d'erreur, suivit de la stacktrace, dans la console si la condition spécifiée est fausse. Utile pour vérifier si une condition est vraie pendant l'exécution du code.
console.time : Démarre un chronomètre avec un label spécifique. Utilisez console.timeEnd() avec le même label pour arrêter le chronomètre et afficher le temps écoulé.
console.timeEnd : Arrête le chronomètre avec le label spécifié et affiche le temps écoulé depuis le début du chronomètre.
console.group : Crée un nouveau groupe de messages dans la console. Utilisez console.groupEnd() pour fermer le groupe. Permet de regrouper et d'organiser les messages dans la console.
console.groupEnd : Ferme le groupe de messages créé avec console.group().

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");
    }
}
Exemple d'utilisation des méhodes console.time() et console.timeEnd().

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");
        }
    }
}
Utilisation des différentes méthodes de log.

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())
Implémentation et enregistrement d'une Message Handler

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